사용자:Bd3076/대규모 실험실/8/plugin

/** 2048 plugin
 * 제작자: Bd3076
 * 용도: 2048 MP에 사용될 플러그인
 */

// 보드판 생성
var board = new Array(new Array(4), new Array(4), new Array(4), new Array(4));
for(var i=0; i<4; i++){
	for(var j=0; j<4; j++){
		board[i][j] = 0;
	}
}

// 점수 생성
var score = 0;

// 캔버스 구문
document.getElementById('gameArea').innerHTML = '<canvas id="cvs" width="800" height="600"></canvas>';
var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');
ctx.textAlign = "center";
ctx.textBaseline = "middle";

// 비어있는 칸이 있는지 판별하는 함수
var emptyExist = function(){
	for(var i=0; i<4; i++){
		for(var j=0; j<4; j++){
			if(!board[i][j]) return true;
		}
	}
	return false;
};

// 비어있는 칸 중 하나를 랜덤으로 고르는 함수
var randomEmpty = function(){
	var emptyArray = new Array(0); // 비어 있는 칸들의 목록
	for(var i=0; i<4; i++){
		for(var j=0; j<4; j++){
			if(!board[i][j]) emptyArray.push([i, j]);
		}
	}
	if(emptyArray.length === 0){
		console.log("error: no empty slots");
		return null;
	}
	return emptyArray[Math.floor(Math.random() * emptyArray.length)];
};

// 보드판의 상태를 캔버스에 그리는 함수
var drawBoard = function(){
	// 숫자에 따른 색
	var numberColor = ["#CDC1B4", "#EEE4DA", "#EDE0C8", "#F2B179", "#F59563",
					   "#F67C5F", "#F6523B", // ~64
					   "#EDCF72", "#EDCC61", "#EDC850",
					   "#EDC53F", "#EDC22E", "#EBB914", "#D3A612", // ~8192
					   "#BC9410", "#BC9410", "#BC9410", "#BC9410"]; 
	
	// 보드판의 개형 그리기
	ctx.fillStyle = "#BBADA0";
	ctx.beginPath();
	ctx.moveTo(0, 10);
	ctx.lineTo(0, 590);
	ctx.arc(10, 590, 10, Math.PI/2, Math.PI);
	ctx.lineTo(10, 600);
	ctx.lineTo(790, 600);
	ctx.arc(790, 590, 10, 0, Math.PI/2);
	ctx.lineTo(800, 590);
	ctx.lineTo(800, 10);
	ctx.arc(790, 10, 10, Math.PI*3/2, Math.PI*2);
	ctx.lineTo(790, 0);
	ctx.lineTo(10, 0);
	ctx.arc(10, 10, 10, Math.PI, Math.PI*3/2);
	ctx.closePath();
	ctx.fill();
	
	// 각 칸 그리기
	for(var i=0; i<4; i++){
		for(var j=0; j<4; j++){
			// 외형 그리기
			var startX = 16 + 146*i;
			var startY = 16 + 146*j;
			ctx.fillStyle = numberColor[board[i][j] === 0 ? 0 : Math.round(Math.log2(board[i][j]))];
			ctx.beginPath();
			ctx.moveTo(startX, startY+4);
			ctx.lineTo(startX, startY+126);
			ctx.arc(startX+4, startY+126, 4, Math.PI/2, Math.PI);
			ctx.lineTo(startX+4, startY+130);
			ctx.lineTo(startX+126, startY+130);
			ctx.arc(startX+126, startY+126, 4, 0, Math.PI/2);
			ctx.lineTo(startX+130, startY+126);
			ctx.lineTo(startX+130, startY+4);
			ctx.arc(startX+126, startY+4, 4, Math.PI*3/2, Math.PI*2);
			ctx.lineTo(startX+126, startY);
			ctx.lineTo(startX+4, startY);
			ctx.arc(startX+4, startY+4, 4, Math.PI, Math.PI*3/2);
			ctx.closePath();
			ctx.fill();
			
			// 텍스트 그리기
			if(board[i][j] !== 0){
				var numberLength = board[i][j].toString().length;
				var fontSize = numberLength == 1 ? 80 : 160 / numberLength;
				ctx.fillStyle = "#776E65";
				ctx.font = "bold " + fontSize + "px sans-serif";
				console.log("bold " + fontSize + "px sans-serif");
				ctx.fillText(board[i][j], startX+65, startY+65);
			}
		}
	}
	
	// 점수 그리기
	ctx.fillStyle = "#EEE4DA";
	ctx.beginPath();
	ctx.moveTo(610, 26);
	ctx.lineTo(610, 90);
	ctx.arc(620, 90, 10, Math.PI/2, Math.PI);
	ctx.lineTo(620, 100);
	ctx.lineTo(774, 100);
	ctx.arc(774, 90, 10, 0, Math.PI/2);
	ctx.lineTo(784, 90);
	ctx.lineTo(784, 26);
	ctx.arc(774, 26, 10, Math.PI*3/2, Math.PI*2);
	ctx.lineTo(774, 16);
	ctx.lineTo(620, 16);
	ctx.arc(620, 26, 10, Math.PI, Math.PI*3/2);
	ctx.closePath();
	ctx.fill();
	ctx.fillStyle = "#776E65";
	ctx.font = "bold 60px sans-serif";
	ctx.fillText(score, 697, 58);
};

// 키보드 입력을 받아 판을 이동시키고, 새로운 숫자를 만들거나 게임 오버시키는 함수

$("#left").click(function(){ gameRunner({keyCode: 37})});
$("#up").click(function(){ gameRunner({keyCode: 38})});
$("#right").click(function(){ gameRunner({keyCode: 39})});
$("#down").click(function(){ gameRunner({keyCode: 40})});

var gameRunner = function(e){
	var ek = e.keyCode;
	var cnt;
	var moved = 0;
	var added = new Array(new Array(4), new Array(4), new Array(4), new Array(4));
	for(var i=0; i<4; i++){
		for(var j=0; j<4; j++){
			added[i][j] = 0;
		}
	}
	console.log(ek);
	// 판 움직이기
	switch(ek){
		case 37:
			for(var j=0; j<4; j++){
				cnt = 0;
				for(var i=0; i<4; i++){
					if(i>0 && board[i][j] !== 0 && board[i-1][j] === 0){
						board[cnt++][j] = board[i][j];
						board[i][j] = 0;
						moved = 1;
						
						if(cnt > 1 && board[cnt-1][j] == board[cnt-2][j] && !added[cnt-2][j]){
							board[cnt-2][j] *= 2;
							board[cnt-1][j] = 0;
							cnt--;
							added[cnt-1][j] = 1;
							score += board[cnt-1][j];
						}
					}
					else if(board[i][j] !== 0){
						cnt++;
						
						if(cnt > 1 && board[cnt-1][j] == board[cnt-2][j] && !added[cnt-2][j]){
							moved = 1;
							board[cnt-2][j] *= 2;
							board[cnt-1][j] = 0;
							cnt--;
							added[cnt-1][j] = 1;
							score += board[cnt-1][j];
						}
					}
				}
			}
			if(!moved) return;
			break;
		case 38:
			for(var i=0; i<4; i++){
				cnt = 0;
				for(var j=0; j<4; j++){
					if(j>0 && board[i][j] !== 0 && board[i][j-1] === 0){
						board[i][cnt++] = board[i][j];
						board[i][j] = 0;
						moved = 1;
						
						if(cnt > 1 && board[i][cnt-1] == board[i][cnt-2] && !added[i][cnt-2]){
							board[i][cnt-2] *= 2;
							board[i][cnt-1] = 0;
							cnt--;
							added[i][cnt-1] = 1;
							score += board[i][cnt-1];
						}
					}
					else if(board[i][j] !== 0){
						cnt++;
						
						if(cnt > 1 && board[i][cnt-1] == board[i][cnt-2] && !added[i][cnt-2]){
							moved = 1;
							board[i][cnt-2] *= 2;
							board[i][cnt-1] = 0;
							cnt--;
							added[i][cnt-1] = 1;
							score += board[i][cnt-1];
						}
					}
				}
			}
			if(!moved) return;
			break;
		case 39:
			for(var j=0; j<4; j++){
				cnt = 0;
				for(var i=3; i>=0; i--){
					if(i<3 && board[i][j] !== 0 && board[i+1][j] === 0){
						board[3-(cnt++)][j] = board[i][j];
						board[i][j] = 0;
						moved = 1;
						
						if(cnt > 1 && board[3-(cnt-1)][j] == board[3-(cnt-2)][j] && !added[3-(cnt-2)][j]){
							board[3-(cnt-2)][j] *= 2;
							board[3-(cnt-1)][j] = 0;
							cnt--;
							added[3-(cnt-1)][j] = 1;
							score += board[3-(cnt-1)][j];
						}
					}
					else if(board[i][j] !== 0){
						cnt++;
						
						if(cnt > 1 && board[3-(cnt-1)][j] == board[3-(cnt-2)][j] && !added[3-(cnt-2)][j]){
							moved = 1;
							board[3-(cnt-2)][j] *= 2;
							board[3-(cnt-1)][j] = 0;
							cnt--;
							added[3-(cnt-1)][j] = 1;
							score += board[3-(cnt-1)][j];
						}
					}
				}
			}
			if(!moved) return;
			break;
		case 40:
			for(var i=0; i<4; i++){
				cnt = 0;
				for(var j=3; j>=0; j--){
					if(j<3 && board[i][j] !== 0 && board[i][j+1] === 0){
						board[i][3-(cnt++)] = board[i][j];
						board[i][j] = 0;
						moved = 1;
						
						if(cnt > 1 && board[i][3-(cnt-1)] == board[i][3-(cnt-2)] && !added[i][3-(cnt-2)]){
							board[i][3-(cnt-2)] *= 2;
							board[i][3-(cnt-1)] = 0;
							cnt--;
							added[i][3-(cnt-1)] = 1;
							score += board[i][3-(cnt-1)];
						}
					}
					else if(board[i][j] !== 0){
						cnt++;
						
						if(cnt > 1 && board[i][3-(cnt-1)] == board[i][3-(cnt-2)] && !added[i][3-(cnt-2)]){
							moved = 1;
							board[i][3-(cnt-2)] *= 2;
							board[i][3-(cnt-1)] = 0;
							cnt--;
							added[i][3-(cnt-1)] = 1;
							score += board[i][3-(cnt-1)];
						}
					}
				}
			}
			if(!moved) return;
			break;
		default:
			return;
	}
	// 숫자 추가
	var aNum = (Math.random() < 0.875) ? 2 : 4;
	var re = randomEmpty();
	board[re[0]][re[1]] = aNum;
	
	drawBoard();
	
	// 게임 오버 감지
	for(var i=0; i<4; i++){
		for(var j=0; j<4; j++){
			if(board[i][j] === 0) return;
		}
	}
	
	for(var i=0; i<4; i++){
		for(var j=0; j<3; j++){
			if(board[i][j] == board[i][j+1]) return;
		}
	}
	
	for(var i=0; i<3; i++){
		for(var j=0; j<4; j++){
			if(board[i][j] == board[i+1][j]) return;
		}
	}
	
	window.onkeydown = undefined;
	setTimeout(gameOver, 2000);
};

function gameOver(){
	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, 600, 600);
	ctx.fillStyle = "black";
	ctx.font = "bold 100px sans-serif";
	ctx.fillText("Game Over", 300, 300);
	ctx.font = "bold 20px sans-serif";
	ctx.fillText("다시 시작하려면 새로고침하세요", 300, 450);
	return;
}

// 초기 보드판 상태: 2 또는 4가 총 2개 나오고, 4가 나올 확률은 각각 1/8
var sNum1 = (Math.random() < 0.875) ? 2 : 4;
var sNum2 = (Math.random() < 0.875) ? 2 : 4;

var re1 = randomEmpty();
board[re1[0]][re1[1]] = sNum1;
var re2 = randomEmpty();
board[re2[0]][re2[1]] = sNum2;

// 판 그리기
drawBoard();

window.onkeydown = gameRunner;