SOURCE

var numberArr=new Array();

var score=0;

window.onload=function(){
	document.getElementById('score').innerText=0;
	
	newgame();
	var newgamebutton = document.getElementById('newgamebutton');
	newgamebutton.onclick = function(){
		score = 0;
		document.getElementById('score').innerText=0;
		newgame();
	}
}

function newgame(){
	score=0;
	//清空原有棋盘区域
	removeAll();
	//棋盘格初始化
	initGridCell();

	//数字初始化
	initNumberCell();

	//在两个随机位置生成两个随机数字（2,4）
	getRandNumber();
	getRandNumber();
	//显示数据
	// showNumber();
}
//初始化棋盘格
function initGridCell(){
	var grid_container= document.getElementById('grid_container');
	console.log(grid_container);
	for(var i=0;i<4;i++){
		for(var j=0;j<4;j++){
			var grid_cell=document.createElement('div');
			grid_cell.setAttribute('class','grid_cell');
			grid_container.appendChild(grid_cell);
			grid_cell.style.left=20+120*j+"px";
			grid_cell.style.top=20+120*i+"px";
		}
	}

	//初始化游戏数据
	for(var i=0;i<4;i++)
	{
		numberArr[i]=new Array();
		for(var j=0;j<4;j++){
			numberArr[i][j]=0;
		}
	}
}
//初始化数字格
function initNumberCell(){
	var grid_container= document.getElementById('grid_container');
	console.log(grid_container);
	for(var i=0;i<4;i++){
		for(var j=0;j<4;j++){
			var number_cell=document.createElement('div');
			number_cell.setAttribute('class','number_cell');
			number_cell.setAttribute('id','number_cell-'+i+'-'+j);
			grid_container.appendChild(number_cell);
			number_cell.style.left=20+120*j+"px";
			number_cell.style.top=20+120*i+"px";
			
		}
	}
}
//显示游戏数据到数字格上
function showNumber(){
	for(var i=0;i<4;i++){
		for(var j=0;j<4;j++){
			var number_cell=document.getElementById('number_cell-'+i+'-'+j);
			// console.log(number_cell);
			if(numberArr[i][j]==0){
				number_cell.style.display ='none';
			}
			else{
				number_cell.style.display ="block";
				number_cell.style.background=setBgColor(numberArr[i][j]);
				number_cell.style.color=setColor(numberArr[i][j]);
				number_cell.innerText= numberArr[i][j];
				if (numberArr[i][j]>=1024) {
					number_cell.style.fontSize="45px";
				}
				else{
					number_cell.style.fontSize="60px";
				}
			}
		}
	}
}

//生成随机位置的随机数字
function getRandNumber(){
	//是否存在空位置
	if(hasEmptyPosition()==true){

	//生成随机位置
	var randx=parseInt(Math.floor(Math.random()*4));
	var randy=parseInt(Math.floor(Math.random()*4));

	while(true){
		if(numberArr[randx][randy]==0){
			break;
		}
		else{
			randx=parseInt(Math.floor(Math.random()*4));
			randy=parseInt(Math.floor(Math.random()*4));
		}
	}
	//生成随机数字
	var randNumber=Math.random()<0.5 ? 2:4;
	numberArr[randx][randy]=randNumber;

	showNumber();
	}
}

function removeAll(){
	var grid_container= document.getElementById('grid_container');
	
	var nodes=grid_container.childNodes;
	
	for(var i=nodes.length-1;i>=0;i--){
		grid_container.removeChild(nodes[i]);
	}
}


//2048上下左右游戏控制
document.onkeydown=function(ev){
	console.log(ev.keyCode);

	switch(ev.keyCode){
		case 37://left
			moveLeft();
			getRandNumber();
			isGameOver();
			break;
		case 38://up
			moveUp();
			getRandNumber();
			isGameOver();
			break;
		case 39://right
			moveRight();
			getRandNumber();
			isGameOver();
			break;
		case 40://down
			moveDown();
			getRandNumber();
			isGameOver();
			break;
	}
}

function moveLeft(){
	//是否能够向左移动
	if(canMoveLeft()==true){
		for (var i = 0; i < 4; i++) {
			for (var j = 1;j < 4; j++) {
				if (numberArr[i][j]!=0) {
					for(var k=0;k<j;k++){
						if(numberArr[i][k]==0 && hasObstacleRow(i,k,j,numberArr)){
							//可以移动
							numberArr[i][k]=numberArr[i][j];
							numberArr[i][j]=0;

						}
						else if(numberArr[i][k]==numberArr[i][j] && hasObstacleRow(i,k,j,numberArr)){
							//可以移动
							numberArr[i][k]+=numberArr[i][j];
							score+=numberArr[i][k];
							document.getElementById('score').innerText=score;
							numberArr[i][j]=0;
						}
					}
				}
			}
		}
		return true;
	}
	return false;

}

function moveUp(){
	if(canMoveUp()==true){
		for (var i = 1; i < 4; i++) {
			for (var j = 0;j < 4; j++) {
				if (numberArr[i][j]!=0) {
					for(var k=0;k<i;k++){
						if(numberArr[k][j]==0 && hasObstacleCol(j,k,i,numberArr)){
							//可以移动
							numberArr[k][j]=numberArr[i][j];
							numberArr[i][j]=0;

						}
						else if(numberArr[k][j]==numberArr[i][j] && hasObstacleCol(j,k,i,numberArr)){
							//可以移动
							numberArr[k][j]+=numberArr[i][j];
							score+=numberArr[i][k];
							document.getElementById('score').innerText=score;
							numberArr[i][j]=0;
						}
					}
				}
			}
		}
		return true;
	}
	return false;
}

function moveRight(){
	if(canMoveRight()==true){
		for (var i = 0; i < 4; i++) {
			for (var j = 2;j >=0; j--) {
				if (numberArr[i][j]!=0) {
					for(var k=3;k>j;k--){
						if(numberArr[i][k]==0 && hasObstacleRow(i,j,k,numberArr)){
							//可以移动
							numberArr[i][k]=numberArr[i][j];
							numberArr[i][j]=0;

						}
						else if(numberArr[i][k]==numberArr[i][j] && hasObstacleRow(i,j,k,numberArr)){
							//可以移动
							numberArr[i][k]+=numberArr[i][j];
							score+=numberArr[i][k];
							document.getElementById('score').innerText=score;
							numberArr[i][j]=0;
						}
					}
				}
			}
		}
		return true;
	}
	return false;


}

function moveDown(){
	if(canMoveDown()==true){
		for (var i = 2; i >= 0; i--) {
			for (var j=0;j<4;j++) {
				if (numberArr[i][j]!=0){
					for(var k=3;k>i;k--){
						if(numberArr[k][j]==0 && hasObstacleCol(j,i,k,numberArr)){
							//可以移动
							numberArr[k][j]=numberArr[i][j];
							numberArr[i][j]=0;

						}
						else if(numberArr[k][j]==numberArr[i][j] && hasObstacleCol(j,i,k,numberArr)){
							//可以移动
							numberArr[k][j]+=numberArr[i][j];
							score+=numberArr[i][k];
							document.getElementById('score').innerText=score;
							numberArr[i][j]=0;
						}
					}
				}
			}
		}
		return true;
	}
	return false;
}

function isGameOver(){
	//没有空位置 并且不能向上下左右移动
	if(hasEmptyPosition()==false
		&& canMoveLeft()==false
		&& canMoveRight()==false
		&& canMoveUp()==false
		&& canMoveDown()==false){
		alert("Game Over!");
	}
}



function setBgColor(number){
	switch(number){
		case 2:return "#DEEDED";break;
		case 4:return "#C1EBDD";break;
		case 8:return "#C3ECC4";break;
		case 16:return "#9FE4A1";break;
		case 32:return "#7EDA88";break;
		case 64:return "#E39DD6";break;
		case 128:return "#F6B0A6";break;
		case 256:return "#F69463";break;
		case 512:return "#F36039";break;
		case 1024:return "#E9D174";break;
		case 2048:return "#EDC950";break;
		case 4096:return "#F2C723";break;
		case 8192:return "#F63E32";break;
	}
}

function setColor(number){
	if(number<=4){
		return "#776e65";
	}
	else{
		return "#fff";
	}
}
//判断是否存在空位置
function hasEmptyPosition(){
	for (var i = 0; i < 4; i++) {
		for(var j=0;j<4;j++){
			if(numberArr[i][j]==0){
				return true;
			}
		}
	}
	return false;
}
//判断是否能够左移
function canMoveLeft(){
	for (var i = 0; i < 4; i++) {
		for(var j=1;j<4;j++){
			if (numberArr[i][j-1]==0||numberArr[i][j-1]==numberArr[i][j]) {
				return true;
			}
		}
	}
		return false;
	
}


function canMoveRight(){
	for (var i = 0; i < 4; i++) {
		for(var j=2;j>=0;j--){
			if (numberArr[i][j+1]==0||numberArr[i][j+1]==numberArr[i][j]) {
				return true;
			}
		}
	}
		return false;
}

function canMoveUp(){

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


function canMoveDown(){
	for(var i=2;i>=0;i--){
		for (var j = 0; j <4; j++) {
			if(numberArr[i+1][j]==0 || numberArr[i+1][j]==numberArr[i][j]){
				return true;
			}
		}
	}
	return false;
}


//判断行方向上是否有障碍物
function hasObstacleRow(row,col1,col2,numberArr){
	for (var i =col1+1; i < col2; i++) {
		if(numberArr[row][i]!=0){
			return false;
		}
	}
	return true;
}

//判断列方向上是否有障碍物
function hasObstacleCol(col,row1,row2,numberArr){
	for (var i =row1+1; i < row2; i++) {
		if(numberArr[i][col]!=0){
			return false;
		}
	}
	return true;
}

<header>
		<h1>网页版2048</h1>
		<a id="newgamebutton" href="#">New Game</a>
		<p>Score: <span id="score">0</span></p>
	</header>

	<div id="grid_container">
		<!-- <div class="grid_cell"></div> -->
		<!-- <div class="number_cell"></div> -->

	</div>
	<div class="name">
			<div class="w">
				<hr />
				<a><strong>版权所有</strong>：</a>&nbsp;&nbsp;
				<a>ljjwy</a>
			</div>
	</div>

body,h1,a,p,span,div{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
body{
	background: #DFF9F0;
	font-family: Arial;
	margin-bottom: 30px;
}
header{
	text-align: center;
	margin: 20px auto;
	color:#238A91;
}
header h1{
	font-size: 48px;
	font-weight: bold;
}
header #newgamebutton{
	width: 100px;
	height: 30px;
	display: block;
	margin: 20px auto;
	text-align: center;
	line-height: 30px;
	background: #54BBBA;
	border-radius: 10px;
	padding: 5px;
	color: #fff;
}
header #newgamebutton:hover{
	background: #9f8b77;
}
header p{
	font-size: 28px;
	font-weight: bold;
}
#grid_container{
	width: 460px;
	height: 460px;
	padding: 20px;
	background: #53BAB8;
	margin: 0 auto;
	border-radius: 6px;
	position: relative;
}
.grid_cell{
	width: 100px;
	height: 100px;
	border-radius: 6px;
	background: #76D0D0;
	position: absolute;
}
.number_cell{
	width: 100px;
	height: 100px;
	/*background: #76D0D0;*/
	border-radius: 6px;
	line-height: 100px;
	text-align:center;
	font-size: 60px;
	font-weight: bold;
	position: absolute;
}
.name{
	height: 10px;
	text-align: center;
}