var?board?=?[];
for?(var?i?=?0;?i?<?4;?i++)?{
	board[i]?=?[];
	for?(var?j?=?0;?j?<?4;?j++)?{
		board[i][j]?=?0;
	}
}
var?container?=?document.getElementById('grid_container');
window.onload?=?function(){
	
	var?clear?=?document.getElementsByClassName('number-cell');
	for?(var?i?=?clear.length;?i?<?0;?i--)?{
		clear[i].parent.removeChild('clear[i]');
	}
	//背景色及表面小格子(無樣式)歸位
	for?(var?i?=?0;?i?<?4;?i++)?{
		for?(var?j?=?0;?j?<?4;?j++)?{
			var?gridCell?=?document.getElementById('grid_cell_'?+?i?+?'_'?+?j);
			gridCell.style.left?=?getLeft(i);
			gridCell.style.top?=?getTop(j);

			var?numberCell?=?document.createElement('div');
			numberCell.className?=?'number-cell';
			numberCell.id?=?'number_cell_'?+?i?+?'_'?+j;
			numberCell.style.left?=?getLeft(i);
			numberCell.style.top?=?getTop(j);
			container.appendChild(numberCell);
		}
	}

	//隨機生成1個棋格
	aGridCell();
	aGridCell();


	
}

var?aGridCell?=?function(){
	do{
		var?randomi?=?Math.floor(Math.random()?*?4);
		var?randomj?=?Math.floor(Math.random()?*?4);
	}
	while(board[randomi][randomj]?!=?0);
	
	var?randomCell?=?document.getElementById('number_cell_'+?randomi?+?'_'?+randomj)
	var?randomNumber?=?Math.random()?>?0.5???4?:?2;
	board[randomi][randomj]?=?randomNumber;

	randomCell.style.left?=?getLeft(randomi);
	randomCell.style.top?=?getTop(randomj);
	randomCell.style.width?=?100?+?'px';
	randomCell.style.height?=?100?+?'px';

	randomCell.innerHTML?=?randomNumber;
	randomCell.style.color?=?fontColor(board[randomi][randomj]);
	randomCell.style.backgroundColor?=?backgroundColor(board[randomi][randomj])
};

var?getLeft?=?function(i){
	return?20?+?120?*?i?+?'px';
};
var?getTop?=?function(j){
	return?20?+?120?*?j?+?'px';
};

var?fontColor?=?function(number){
	if?(number?<=?4)?{
		return?'#7c736a';
	}
	else{
		return?'#fff7eb';
	}
}
function?backgroundColor(?number?){
????switch(?number?){
????????case?2:return?"#eee4da";
????????case?4:return?"#ede0c8";
????????case?8:return?"#f2b179";
????????case?16:return?"#f59563";
????????case?32:return?"#f67c5f";
????????case?64:return?"#f65e3b";
????????case?128:return?"#edcf72";
????????case?256:return?"#edcc61";
????????case?512:return?"#9c0";
????????case?1024:return?"#33b5e5";
????????case?2048:return?"#09c";
????????case?4096:return?"#a6c";
????????case?8192:return?"#93c";
????}

????return?"black";
}

window.document.addEventListener('keydown',function(e){
	switch(e.keyCode){
		case?37:
			moveLeft();
			aGridCell();
			break;
		case?38:
			moveTop();
			aGridCell();
			break;
		case?39:
			moveRight();
			aGridCell();
			break;
		case?40:
			moveDown();
			aGridCell();
			break;
		default:
			break;
	}
})
var?moveLeft?=?function(){
	if(canMoveLeft()){

		for?(var?i?=?1;?i?<?4;?i++)?{
			for?(var?j?=?0;?j?<?4;?j++)?{
				if?(board[i][j]?!=?0)?{
					
					for?(var?k?=?0;?k?<?i;?k++)?{
						if?(board[k][j]?==?0?&&?noObstacles(j,i,k))?{
							moveLeftAnimation(j,i,k);
							board[k][j]?=?board[i][j];
							console.log(board[k][j],board[i][j])
							board[i][j]?=?0;
							console.log(board[i][j])
							continue;
						}else?if?(board[k][j]?=?board[i][j]?&&?noObstacles(j,i,k))?{
							moveLeftAnimation(j,i,k);
							board[k][j]?+=?board[i][j];
							console.log(board[k][j],board[i][j])
							board[i][j]?=?0;
							continue;
						}
					}
				}
			}
		}
		var?clear?=?document.getElementsByClassName('number-cell');
		for?(var?i?=?clear.length;?i?<?0;?i--)?{
			clear[i].parent.removeChild('clear[i]');
		}

		for?(var?i?=?0;?i?<?4;?i++)?{
			for?(var?j?=?0;?j?<?4;?j++)?{
				if?(board[i][j]?!=?0)?{
					var?numberCell?=?document.getElementById('number_cell_'+?i?+?'_'?+?j);
					var?number?=?board[i][j];
					numberCell.innerHTML?=?number;
					numberCell.style.left?=?getLeft(i);
					numberCell.style.top?=?getTop(j);
					numberCell.style.width?=?100?+?'px';
					numberCell.style.height?=?100?+?'px';
					numberCell.style.color?=?fontColor(board[i][j]);
					numberCell.style.backgroundColor?=?backgroundColor(board[i][j])
				}
				
			}
		}
	};
}
var?canMoveLeft?=?function(){

	for?(var?i?=?1;?i?<?4;?i++)?{
		for?(var?j?=?0;?j?<?4;?j++)?{
			if?(board[i][j]?!=?0)?{
				if?(board[i-1][j]?==?0||board[i-1][j]?==?board[i][j])?{
					return?true;
				}
			?}
		}
	}
}

var?moveLeftAnimation?=?function(row,from,to){
	var?gridCell?=?document.getElementById('number_cell_'?+?from?+?'_'?+?row);
	gridCell.style.left?=?getLeft(to);
	console.log(gridCell.id,to,gridCell.style.left)
}

var?noObstacles?=?function(row,from,to){
	for?(var?i?=?to?+?1;?i?<?from;?i++)?{
		if(board[i][row]?!=?0){
			return?false;
		}
	}
	return?true;
}
var?moveTop?=?function(){
	
}
var?moveRight=?function(){
	
}
var?moveDown?=?function(){

}

而且按下左鍵(moveleft函數里面)，我console.log(board[k][j])為什么會出現1...