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...