代码展示：@一杯热茶，慕课网2048私人订制教程-慕课网

index.html style.css animation.js main.js Support.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
     content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>2048</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="Support.js"></script>
<script src="animation.js" type="text/javascript"></script>
<script src="main.js"  type="text/javascript"></script>
</head>
 
<body>
	<header>
    	<h1>私人 2048</h1>
        <a href="javascript:newgame();" id="bot">New Game</a>
        <p>score:<span id="score">0</span></p>
    </header>
 
    <div id="main">
    	<div class="main-box" id="box-0-0"></div>
    	<div class="main-box" id="box-0-1"></div>
        <div class="main-box" id="box-0-2"></div>
        <div class="main-box" id="box-0-3"></div>
 
        <div class="main-box" id="box-1-0"></div>
    	<div class="main-box" id="box-1-1"></div>
        <div class="main-box" id="box-1-2"></div>
        <div class="main-box" id="box-1-3"></div>
 
        <div class="main-box" id="box-2-0"></div>
    	<div class="main-box" id="box-2-1"></div>
        <div class="main-box" id="box-2-2"></div>
        <div class="main-box" id="box-2-3"></div>
 
        <div class="main-box" id="box-3-0"></div>
    	<div class="main-box" id="box-3-1"></div>
        <div class="main-box" id="box-3-2"></div>
        <div class="main-box" id="box-3-3"></div>
    </div>
 <!--   <div class="over">
    	<div class="over-frame">GAMEMOVE!</div>
    </div>-->
</body>
</html>

*{ padding:0; margin:0;}
header{ display:block; width:100%; margin:0 auto; text-align:center;}
header h1{ font-family:Arial; font-size:40px; font-weight:bold;}
header #bot{ display:block; margin:20px auto; width:100px; padding:10px; background:#8f7a66; font-family:Arial; color:#fff; border-radius:10px; text-decoration:none;}
header #bot:hover{ background:#9f8b77;}
header p{ font-family:Arial; font-size:25px; margin:25px auto;}
#main{ width:460px;height:460px;padding:20px; margin:50px auto; background:#bbada0; border-radius:10px; position:relative;}
.main-box{ width:100px; height:100px; border-radius:6px; background:#ccc0b3; position:absolute;}
.number-cell{ border-radius:6px; font-family:Arial; font-weight:bold; font-size:30px; line-height:100px; text-align:center; position:absolute; color:#000;}
.over{ width:100%; height:100%; background:rgba(204,204,204,0.5); position:absolute; top:0; left:0; display:none;}
.over-frame{ width:500px; height:200px; margin:0 auto; margin-top:20%; font-size:90px; text-align:center; line-height:200px; cursor:pointer;}

function showNumberWithAnimation(i,j,randNumber){
 
	var numberCell=$('#number-cell-'+i+"-"+j);
 
	numberCell.css("background-color",getNumberBackgroundColor(randNumber))
	numberCell.css("color",getNumberColor(randNumber))
	numberCell.text(getNumberText( randNumber ))
 
	numberCell.animate({
		width:cellSideLength,
		height:cellSideLength,
		top:getPosTop(i,j),
		left:getPosLeft(i,j)	
	},50);
}
 
function showMoveAnimation( fromx , fromy , tox, toy ){
	 var numberCell = $('#number-cell-' + fromx + '-' + fromy );
	numberCell.animate({
		top:getPosTop(tox,toy),
		left:getPosLeft(tox,toy)
	},200)
}
 
function updateScore(score){
	$("#score").text(score)
}
$(function(){
	$("#bot").click(function(){
		updateScore(0)	
	})
})

var board=new Array();
var score=0;
var hasConflicted=new Array();
 
var startx=0;
var starty=0;
var endx=0;
var endy=0;
 
$(document).ready(function(){
    prepareForMobile();
	newgame();	
	score=0;
	updateScore(score);
})
 
function prepareForMobile(){
 
	if(documentWidth>500){
		gridContainerWidth=500;
		cellSpace=20;
		cellSideLength=100;
	}
 
	$("#main").css("width",gridContainerWidth-2*cellSpace);
	$("#main").css("height",gridContainerWidth-2*cellSpace);
	$("#main").css("padding",cellSpace);
	$("#main").css("border-radius",0.01*gridContainerWidth);
 
	$(".main-box").css("width",cellSideLength);
	$(".main-box").css("height",cellSideLength);
	$(".main-box").css("border-radius",0.01*cellSideLength);
}
 
function newgame(){
	//初始化棋盘格
	init();
	//随机生成两个数字
	generateOneNumber();
	generateOneNumber();
}
function init(){
	for(var i=0;i<4;i++){
		for(var j=0;j<4;j++){
			var gridCell=$("#box-"+i+"-"+j)
			gridCell.css("top",getPosTop(i,j))
			gridCell.css("left",getPosLeft(i,j))
		}
	}
 
	for(var i=0;i<4;i++){
		board[i]=new Array();
		hasConflicted[i]=new Array();
		for(var j=0;j<4;j++){
			board[i][j]=0;	
			hasConflicted[i][j]=false;	
		}
	}
	updateBoardView();
 
	score=0;
}
function updateBoardView(){
	$(".number-cell").remove();
	for(var i=0; i<4;i++){
		for(var j=0;j<4;j++){
			$("#main").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>')
			var theNumberCell=$('#number-cell-'+i+'-'+j)
 
			if(board[i][j]==0){
				theNumberCell.css({"width":"0","height":"0"})
				theNumberCell.css("top",getPosTop(i,j)+cellSideLength/2)
				theNumberCell.css("left",getPosLeft(i,j)+cellSideLength/2)
			}else{
				theNumberCell.css('width',cellSideLength);
                theNumberCell.css('height',cellSideLength);
                theNumberCell.css('top',getPosTop(i,j));
                theNumberCell.css('left',getPosLeft(i,j));
                theNumberCell.css('background-color',getNumberBackgroundColor( board[i][j] ) );
                theNumberCell.css('color',getNumberColor( board[i][j] ) );
 
                theNumberCell.text( getNumberText( board[i][j] ) );
 
			}
			hasConflicted[i][j]=false;	
		}
		$(".number-cell").css("line-height",cellSideLength+"px");
		$(".number-cell").css("font-size",0.3*cellSideLength+"px");
	}
}
function generateOneNumber(){
	if(nospace(board))
		return false;
	//随机一个位置
	var randx=parseInt(Math.floor(Math.random()*4));
	var randy=parseInt(Math.floor(Math.random()*4))
 
	var times=0;
	while(times<50){
		if(board[randx][randy]==0)
			break;
 
		randx=parseInt(Math.floor(Math.random()*4));	
		randy=parseInt(Math.floor(Math.random()*4))
 
		times++;
	}
	if(times==50){
		for(var i=0;i<4;i++)
			for(var j=0; j<4; j++){
				if(doard[i][j]==0){
					randx=i;
					randy=j;
				}
		}
	}
	//随机一个数字
	var randNumber=Math.random()<0.5? 2:4;
	//在随机的位置上显示数字
	board[randx][randy]=randNumber;
	showNumberWithAnimation(randx,randy,randNumber)
	return true;
 
}
 
$(document).keydown(function(event){
	switch(event.keyCode){
		case 37://left
			event.preventDefault()
			if(moveLeft()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
			break;			
		case 38://up
			event.preventDefault()
			if(moveUp()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
			break;
		case 39://right
			event.preventDefault()
			if(moveRight()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
			break;
		case 40://down
			event.preventDefault()
			if(moveDown()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
			break;
	}
})
 
document.addEventListener('touchstart',function(event){
	startx=event.touches[0].pageX;
	starty=event.touches[0].pageY;
})
 
document.addEventListener('touchmove',function(event){
	event.preventDefault()
})
 
document.addEventListener('touchend',function(event){
	endx=event.changedTouches[0].pageX;
	endy=event.changedTouches[0].pageY;
 
	var deltax=endx-startx;
	var deltay=endy-starty;
 
	if(Math.abs(deltax)<0.3*documentWidth && Math.abs(deltay)<0.3*documentWidth)
		return;
 
	//x轴进行滑动
	if(Math.abs(deltax)>=Math.abs(deltay)){
		if(deltax>0){
			//move right
			if(moveRight()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
		}else{
			//move left	
			if(moveLeft()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
 
		}
	}
	//y轴进行滑动
	else{
		if(deltay>0){
			//move down
			if(moveDown()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
		}else{
			//move up
			if(moveUp()){
				setTimeout("generateOneNumber()",210);
				setTimeout("isgameover()",300);
			}
		}	
	}
})
 
function isgameover(){
	if(nospace(board) && nomove(board)){
		gameover();	
	}
}
 
 
 
 
function moveLeft(){
	if(!canMoveLeft(board))
		return false;
 
	//moveLeft
	for(var i=0; i<4;i++)
		for(var j=1; j<4;j++){
			if(board[i][j]!=0){
				for(var k=0; k<j;k++){
					if(board[i][k]==0 && noBlockHorizontal(i,k,j,board)){
						//move
						showMoveAnimation(i,j,i,k)
						board[i][k]=board[i][j]
						board[i][j]=0;
						continue
					}else if(board[i][k]==board[i][j] && noBlockHorizontal(i,k,j,board) && !hasConflicted[i][k]){
						//move
						showMoveAnimation(i,j,i,k)
						//add
						board[i][k]+=board[i][j]
						board[i][j]=0;
						//addscore
						score+=board[i][k]
						updateScore(score)
 
						hasConflicted[i][k]=true;	
						continue
					}
				}
			}
		}
 
	setTimeout("updateBoardView()",200)
	return true;
}
 
function moveRight(){
	if(!canMoveRight(board))
		return false;
 
	//moveRight
	for(var i=0; i<4;i++)
		for(var j=2; j>=0;j--){
			if(board[i][j]!=0){
				for(var k=3; k>j;k--){
					if(board[i][k]==0 && noBlockHorizontal(i,k,j,board)){
						//move
						showMoveAnimation(i,j,i,k)
						board[i][k]=board[i][j]
						board[i][j]=0;
						continue
					}else if(board[i][k]==board[i][j] && noBlockHorizontal(i,j,k,board) && !hasConflicted[i][k]){
						//move
						showMoveAnimation(i,j,i,k)
						//add
						board[i][k] *= 2;
                        board[i][j] = 0;
 
						//addscore
						score += board[i][k]
						updateScore(score)
 
						hasConflicted[i][k]=true;
						continue
 
					}
				}
			}
		}
 
	setTimeout("updateBoardView()",200)
	return true;
}
 
 
 
 
function moveUp(){
    if( !canMoveUp( board ) )
        return false;
    //moveUp
    for( var j = 0 ; j < 4 ; j ++ )
        for( var i = 1 ; i < 4 ; i ++ ){
            if( board[i][j] != 0 ){
                for( var k = 0 ; k < i ; k ++ ){
                    if( board[k][j] == 0 && noBlockVertical( j , k , i , board ) ){
                        showMoveAnimation( i , j , k , j );
                        board[k][j] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    }
                    else if( board[k][j] == board[i][j] && noBlockVertical( j , k , i , board ) && !hasConflicted[k][j]){
                        showMoveAnimation( i , j , k , j );
                        board[k][j] *= 2;
                        board[i][j] = 0;
						//addscore
						score+=board[k][j]
						updateScore(score)
						hasConflicted[k][j]=true;
                        continue;
                    }
                }
            }
        }
    setTimeout("updateBoardView()",200);
    return true;
}
 
function moveDown(){
 
    if( !canMoveDown( board ) )
        return false;
 
    //moveDown
    for( var j = 0 ; j < 4 ; j ++ )
        for( var i = 2 ; i>=0 ; i -- ){
            if( board[i][j] != 0 ){
                for( var k = 3 ; k >i ; k -- ){
 
                    if( board[k][j] == 0 && noBlockVertical( j , k , i , board ) ){
                        showMoveAnimation( i , j , k , j );
                        board[k][j] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    }
                    else if( board[k][j] == board[i][j] && noBlockVertical( j , i , k , board ) && !hasConflicted[k][j]){
                        showMoveAnimation( i , j , k , j );
                        board[k][j] *= 2;
                        board[i][j] = 0;
 
						//addscore
						score+=board[k][j]
						updateScore(score)
 
						hasConflicted[k][j] = true;
 
                        continue;
                    }
                }
            }
        }
 
    setTimeout("updateBoardView()",200);
    return true;
}
 
function gameover(){
	$(".over").show();
	$(document).click(function(){
		$(".over").hide()
	})
}
$("#bot").click(function(){
score=0;
updateScore(score)	
})

documentWidth=window.screen.availWidth;
gridContainerWidth=0.92*documentWidth;
cellSideLength=0.18*documentWidth;
cellSpace=0.04*documentWidth;
 
 
 
function getPosTop(i,j){
    return cellSpace+i*(cellSpace+cellSideLength);
}
 
function getPosLeft(i,j){
	return cellSpace+j*(cellSpace+cellSideLength);
}
 
function getNumberBackgroundColor(number){
	switch(number){
	case 2:return "#eee4da"; break	;
	case 4:return "#ede0c8"; break	;
	case 8:return "#f2b179"; break	;
	case 16:return "#f59563"; break;	
	case 32:return "#f67c5f"; break;	
	case 64:return "#f65e3b"; break;
	case 128:return "#edcf72"; break;
	case 256:return "#edcc61"; break;	
	case 512:return "#9c0"; break;	
	case 1024:return "#33b5e5"; break;	
	case 2048:return "#09c"; break	;
	case 4096:return "#a6c"; break	;
	case 8192:return "#93c"; break	;
	}
	return "black"
}
 
function getNumberText(number){
	switch(number){
		case 2:return "小白"; break;
		case 4:return "实习生"; break;
		case 8:return "程序员"; break;
		case 16:return "工程师"; break;	
		case 32:return "主管"; break;	
		case 64:return "经理"; break;
		case 128:return "总监"; break;
		case 256:return "总经理"; break;	
		case 512:return "副总裁"; break;	
		case 1024:return "CEO"; break;	
		case 2048:return "总裁"; break	;
		case 4096:return "董事长"; break	;
		case 8192:return "乔布斯"; break	;
	}
    return "black";
}
function getNumberColor(number){
	if(number<=4)
		return "#776e65";
 
	return "#ded0c2"
}
 
function nospace( board ){
 
    for( var i = 0 ; i < 4 ; i ++ )
        for( var j = 0 ; j < 4 ; j ++ )
            if( board[i][j] == 0 )
                return false;
 
    return true;
}
 
function canMoveLeft(board){
	for(var i=0; i<4;i++)
		for(var j=0; j<4;j++)
			if(board[i][j]!=0)
				if(board[i][j-1]==0 || board[i][j-1]==board[i][j])
					return true;
 
		return false;	
}
 
function canMoveRight(board){
	for(var i=0; i<4;i++)
		for(var j=2; j>=0;j--)
			if(board[i][j]!=0)
				if(board[i][j+1]==0 || board[i][j+1]==board[i][j])
					return true;
 
		return false;	
}
 
function canMoveUp( board ){
 
    for( var j = 0 ; j < 4 ; j ++ )
        for( var i = 1 ; i < 4 ; i ++ )
            if( board[i][j] != 0 )
                if( board[i-1][j] == 0 || board[i-1][j] == board[i][j] )
                    return true;
 
    return false;
}
 
function canMoveDown( board ){
 
    for( var j = 0 ; j < 4 ; j ++ )
        for( var i = 2 ; i >= 0 ; i -- )
            if( board[i][j] != 0 )
                if( board[i+1][j] == 0 || board[i+1][j] == board[i][j] )
                    return true;
 
    return false;
}
 
 
 
function noBlockHorizontal(row,coll,col2,board){
	for(var i=coll+1;i<col2;i++)
		if(board[row][i]!=0)
			return false;
	return true;
 
}
 
function noBlockVertical( col , row1 , row2 , board ){
    for( var i = row1 + 1 ; i < row2 ; i ++ )
        if( board[i][col] != 0 )
            return false;
    return true;
}
 
function nomove(board){
	if(canMoveLeft(board)||
	canMoveRight(board)||
	canMoveUp(board)||
	canMoveDown(board))
	return false;
 
return true;
}

代码展示：@一杯热茶

任务