代码展示：@未曾至，慕课网2048私人订制教程-慕课网

index.html 2048style.css main2048.js showanimation2048.js support2048.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <title>2048-张靓颖版</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="My Own 2048" />
	<link rel="stylesheet" href="2048style.css" />
 
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript" src="support2048.js"></script>
	<script type="text/javascript" src="showanimation2048.js"></script>
	<script type="text/javascript" src="main2048.js"></script>
 
 
 
</head>
    <body>
    	<header>
            <div class="cdinf">
                <p>2006.1.12 《Jane.爱》</p>
                <p>2006.8.7 《我爱邓丽君》</p>
                <p>2006.10.11 《The One》</p>
                <p>2007.8.2 《Update》</p>
                <p>2006.12.8 《Dear Jane》</p>
                <p>2009.1.16 《张靓颖@音乐》</p>
                <p>2010.2.2 《我相信》</p>
                <p>2011.6.1 《改变》</p>
                <p>2012.6.8 《倾听》</p>
                <p>2013.6.25 《感谢》</p>
                <p>2014.7.21 《第七感》</p>
                <p>To Be Continue...</p>
            </div>
            <div class="mask"></div>
            <div class="success">
                <p>恭喜</p>
                <p>成功解锁第七感！</p>
            </div>
            <div class="fail">
                <p>加油，亲</p>
                <p>前方就有第七感！</p>
            </div>
	    	<h1>2048-张靓颖版</h1>
            <div class="inf">
    	    	<a href="javascript:newGame();" class="newGameButton">新游戏</a>
    	    	<p class="newGameButton myscore">得分 : <span id="score">0</span></p>
            </div>
    	</header>
 
    	<div id="grid-container">
    		<div class="grid-cell" id="grid-cell-0-0"></div>
    		<div class="grid-cell" id="grid-cell-0-1"></div>
    		<div class="grid-cell" id="grid-cell-0-2"></div>
    		<div class="grid-cell" id="grid-cell-0-3"></div>
 
    		<div class="grid-cell" id="grid-cell-1-0"></div>
    		<div class="grid-cell" id="grid-cell-1-1"></div>
    		<div class="grid-cell" id="grid-cell-1-2"></div>
    		<div class="grid-cell" id="grid-cell-1-3"></div>
 
    		<div class="grid-cell" id="grid-cell-2-0"></div>
    		<div class="grid-cell" id="grid-cell-2-1"></div>
    		<div class="grid-cell" id="grid-cell-2-2"></div>
    		<div class="grid-cell" id="grid-cell-2-3"></div>
 
    		<div class="grid-cell" id="grid-cell-3-0"></div>
    		<div class="grid-cell" id="grid-cell-3-1"></div>
    		<div class="grid-cell" id="grid-cell-3-2"></div>
    		<div class="grid-cell" id="grid-cell-3-3"></div>
    	</div>
    </body>
</html>

body{
    background: url(http://img.mukewang.com/53f314300001f03519201200.jpg) 170px -50px;
}
 
.cdinf{
	position: absolute;
	top: 125px;
	left: 110px;
	font: 14px '微软雅黑';
	color: white;
	text-align: left;
	z-index: 1;
}
 
.mask{
	height: 500px;
	width: 500px;
	top: 131px;
	margin: 0 auto;
	background-color: black;
	opacity: 0.5;
	filter:alpha(opacity=50);
	display: none;
	position: absolute;
	z-index: 100;
	border-radius: 10px;
}
 
.success{
	position: absolute;
	top: 255px;
	left: 519px;
	z-index: 101;
	display: none;
	font: bold 40px '微软雅黑';
	color:#FF9999;
}
 
.fail{
	position: absolute;
	top: 255px;
	left: 519px;
	z-index: 101;
	display: none;
	font: bold 40px '微软雅黑';
	color:pink;
}
 
header{
	display: block;
	margin: 0 auto;
	width: 500px;
	text-align: center;
}
 
header h1{
	font-family: '微软雅黑';
	font-size: 35px;
	font-weight: bold;
	color: #FF9999;
	margin: 20px auto 10px auto;
}
 
.inf{
	margin: 0 auto;
}
 
header .newGameButton{
	display: inline-block;
	width: 100px;
	padding: 7px 8px 8px 8px;
	background-color: pink;
 
	font: 15px '微软雅黑';
	color: white;
 
	border-radius: 10px;
 
	text-decoration: none;
	margin-right: 10px;
}
 
.myscore{
	margin-top: 0px;
	margin-bottom: 0px;
}
 
header .newGameButton:hover{
	background-color: #FF9999;
}
 
#grid-container{
	width: 460px;
	height: 460px;
	padding: 20px;
 
	margin: 20px auto 0 auto;
	background-color: pink;
	border-radius: 10px;
	position: relative;
}
 
.grid-cell{
	width: 100px;
	height: 100px;
	border-radius: 6px;
	background-color: #FFCCC9;
 
	position: absolute;
}
 
.number-cell{
	border-radius: 6px;
 
	font-family: Arial;
	font-size: 60px;
	font-weight: bold;
	line-height: 100px;
	text-align: center;
 
	position: absolute;
}

var board = new Array();
var score = 0;
var hasConflicted = new Array();
 
$(document).ready(function(){
    newGame();
});
 
function newGame(){
	//初始化操作
    init();
	//随机产生两个数字
	generateOneNumber();
	generateOneNumber();
}
 
function init(){
	for (var i = 0; i < 4; i++) {
		for (var j = 0; j < 4; j++) {
			var gridCell = $("#grid-cell-" + 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;
	updateScore( score );
	$('.mask').css('display','none');
	$('.fail').css('display','none');
	$('.success').css('display','none');
}
 
function updateBoardView(){
	$(".number-cell").remove();
	for(var i = 0; i < 4; i++){
		for(var j = 0; j < 4; j++){
			$("#grid-container").append( '<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>' );//这里的append及里面的引号使用值得注意
			var theNumberCell = $('#number-cell-'+i+'-'+j);
 
			if(board[i][j] == 0){
				theNumberCell.css('width','0px');
				theNumberCell.css('height','0px');
				theNumberCell.css('top',getPosTop(i,j)+50);
				theNumberCell.css('left',getPosLeft(i,j)+50);
			}
			else{
				theNumberCell.css('width','100px');
				theNumberCell.css('height','100px');
				theNumberCell.css('top',getPosTop(i,j));
				theNumberCell.css('left',getPosLeft(i,j));
				theNumberCell.css('background-image',getNumberBackgroundColor(board[i][j]));
				theNumberCell.css('color',getNumberColor(board[i][j]));
				//theNumberCell.text(board[i][j]);
			}
 
			hasConflicted[i][j] = false;
		}
	}
}
 
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( board[i][j] == 0 ){
					randx = i;
					randy = j;
					break;
				}
			}
		}
	}
 
	//随机一个数字
	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){   //注意大小写，keycode中C是大写
		case 37://left
			if( moveLeft() ){
				setTimeout("generateOneNumber()",210);
				setTimeout("isGameOver()",300);
			}
			break;
		case 38://up
			if( moveUp() ){
				setTimeout("generateOneNumber()",210);
				setTimeout("isGameOver()",300);
			}
			break;
		case 39://right
			if( moveRight() ){
				setTimeout("generateOneNumber()",210);
				setTimeout("isGameOver()",300);
			}
			break;
		case 40://down
			if( moveDown() ){
				setTimeout("generateOneNumber()",210);
				setTimeout("isGameOver()",300);
			}
			break;
		default:
			break;
	}
});
 
function isGameOver(){
	if( noSpace(board) && noMove(board) ){
		gameOver();
	}
 
	for(var i = 0; i < 4; i++){
		for(var j = 0; j < 4; j++){
			if( board[i][j] == 2048 ){
				youWin();
			}
		}
	}
}
 
function  gameOver(){
	$('.mask').show();
	$('.fail').show();
}
 
function  youWin(){
	$('.mask').show();
	$('.success').show();
}
 
function moveLeft(){
	if(!canMoveLeft(board)){
		return false;
	}
 
	//move left
	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 && noBlockx(i,k,j,board) ){
						//move left
						showMoveAnimation(i,j,i,k);  //注意参数的顺序
						board[i][k] = board[i][j];
						board[i][j] = 0; 
						continue;
					}
					else if( board[i][k] == board [i][j] && noBlockx(i,k,j,board) && !hasConflicted[i][k] ){
						//move left
						showMoveAnimation(i,j,i,k);
						//add
						board[i][k] += board[i][j];
						board[i][j] = 0;
						score += board[i][k];
						updateScore( score );
 
						hasConflicted[i][k] = true;
						continue;
					}
				}
			}
		}
	}
 
	setTimeout("updateBoardView()",200);
	return true;
}
 
function moveUp(){
	if(!canMoveUp(board)){
		return false;
	}
 
	//move up
	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 && noBlocky(j,k,i,board) ){
						//move left
						showMoveAnimation(i,j,k,j);  //注意参数的顺序
						board[k][j] = board[i][j];
						board[i][j] = 0; 
						continue;
					}
					else if( board[k][j] == board [i][j] && noBlocky(j,k,i,board) && !hasConflicted[k][j] ){
						//move left
						showMoveAnimation(i,j,k,j);
						//add
						board[k][j] += board[i][j];
						board[i][j] = 0;
						score += board[k][j];
						updateScore( score );
 
						hasConflicted[k][j] = true;
						continue;
					}
				}
			}
		}
	}
 
	setTimeout("updateBoardView()",200);
	return true;
}
 
function moveRight(){
	if(!canMoveRight(board)){
		return false;
	}
 
	//move left
	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 && noBlockx(i,j,k,board) ){
						//move left
						showMoveAnimation(i,j,i,k);  //注意参数的顺序
						board[i][k] = board[i][j];
						board[i][j] = 0; 
						continue;
					}
					else if( board[i][k] == board [i][j] && noBlockx(i,j,k,board) && !hasConflicted[i][k] ){
						//move left
						showMoveAnimation(i,j,i,k);
						//add
						board[i][k] += board[i][j];
						board[i][j] = 0;
						score += board[i][k];
						updateScore( score );
 
						hasConflicted[i][k] = true;
						continue;
					}
				}
			}
		}
	}
 
	setTimeout("updateBoardView()",200);
	return true;
}
 
function moveDown(){
	if(!canMoveDown(board)){
		return false;
	}
 
	//move up
	for(var i = 2;i >= 0;i--){
		for(var j = 0;j < 4;j++){
			if( board[i][j] != 0 ){
				for(var k = 3; k > i; k--){
					if( board[k][j] == 0 && noBlocky(j,i,k,board) ){
						//move left
						showMoveAnimation(i,j,k,j);  //注意参数的顺序
						board[k][j] = board[i][j];
						board[i][j] = 0; 
						continue;
					}
					else if( board[k][j] == board [i][j] && noBlocky(j,i,k,board) && !hasConflicted[k][j] ){
						//move left
						showMoveAnimation(i,j,k,j);
						//add
						board[k][j] += board[i][j];
						board[i][j] = 0;
						score += board[k][j];
						updateScore( score );
 
						hasConflicted[k][j] = true;
						continue;
					}
				}
			}
		}
	}
 
	setTimeout("updateBoardView()",200);
	return true;
}
 
function noMove( board ){
	if( canMoveDown( board ) ||
	    canMoveRight( board )||
	    canMoveUp( board )   ||
	    canMoveLeft( board ) ){
		return false;
	}
 
	return true;
}

function showNumberWithAnimation( i, j, randNumber){
    var numberCell = $('#number-cell-'+i+'-'+j);
 
	numberCell.css('background-image',getNumberBackgroundColor(randNumber));
	numberCell.css('color',getNumberColor(randNumber));
	//numberCell.text(randNumber);
 
	numberCell.animate({
		width:"100px",
		height:"100px",
		top:getPosTop(i,j),
		left:getPosLeft(i,j)
	},150);
}
 
function showMoveAnimation(fromx,fromy,tox,toy){
	var numberCell = $('#number-cell-'+fromx+'-'+fromy);
	numberCell.animate({
		top:getPosTop(tox,toy),
		left:getPosLeft(tox,toy)
	},300);
}
 
function updateScore( score ){
	$('#score').text( score );
}

function getPosTop(i,j){
    return 20 + i * 120;
}
 
function getPosLeft(i,j){
	return 20 + j * 120;
}
 
function getNumberBackgroundColor( number ){
	switch( number ){
		case 2:return "url(http://www.imooc.com/activity/2048/117139/pics/1.jpg)";break;
        case 4:return "url(http://www.imooc.com/activity/2048/117139/pics/2.jpg)";break;
        case 8:return "url(http://www.imooc.com/activity/2048/117139/pics/3.jpg)";break;
        case 16:return "url(http://www.imooc.com/activity/2048/117139/pics/4.jpg)";break;
        case 32:return "url(http://www.imooc.com/activity/2048/117139/pics/5.jpg)";break;
        case 64:return "url(http://www.imooc.com/activity/2048/117139/pics/6.jpg)";break;
        case 128:return "url(http://www.imooc.com/activity/2048/117139/pics/7.jpg)";break;
        case 256:return "url(http://www.imooc.com/activity/2048/117139/pics/8.jpg)";break;
        case 512:return "url(http://www.imooc.com/activity/2048/117139/pics/9.jpg)";break;
        case 1024:return "url(http://www.imooc.com/activity/2048/117139/pics/10.jpg)";break;
        case 2048:return "url(http://www.imooc.com/activity/2048/117139/pics/11.jpg)";break;
	}
}
 
function getNumberColor( number ){
	if( number <= 4 ){
		return "#776e65";
	}
 
	return "white";
}
 
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 = 1; 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 canMoveUp( board ){
	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;
				}
			}
		}
	}
	return false;
}
 
function canMoveRight( board ){
	for(var i = 0; i < 4; i++){
		for(var j = 0; j < 3; j++){
			if( board[i][j] != 0){
				if( board[i][j+1]==0 || board[i][j+1]==board[i][j] ){
					return true;
				}
			}
		}
	}
	return false;
}
 
function canMoveDown( board ){
	for(var i = 0; i < 3; 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;
				}
			}
		}
	}
	return false;
}
 
function noBlockx(row,col1,col2,board){
	for(var i = col1 + 1; i < col2; i++){
		if( board[row][i] != 0 ){
			return false;
		}
	}
	return true;
}
 
function noBlocky(col,row1,row2,board){
	for(var i = row1 + 1; i < row2; i++){
		if( board[i][col] != 0 ){
			return false;
		}
	}
	return true;
}

代码展示：@未曾至

任务