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

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

<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTP-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 rel="stylesheet" type="text/css" href="2048.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>
        <h1>2048</h1>
        <a href="javascript:newgame();" id="newgamebutton">New Game</a>
        <p>score : <span id="score">0</span></p>
    </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>

/**
 * Created by liuyubobobo on 14-4-11.
 * my site: http://www.liuyubobobo.com
 */
 
header{
    display:block;
    margin:0 auto;
    width:100%;
    text-align:center;
}
 
header h1{
    font-family:Arial;
    font-size:40px;
    font-weight:bold;
    margin:0 auto;
}
 
header #newgamebutton{
    display:block;
    margin:10px auto;
 
    width:100px;
    padding:10px 10px;
    background-color:#8f7a66;
 
    font-family:Arial;
    color:white;
 
    border-radius:10px;
    text-decoration:none;
}
header #newgamebutton:hover{
    background-color:#9f8b77;
}
 
header p{
    font-family:Arial;
    font-size:25px;
    margin:10px auto;
}
 
#grid-container{
    width:460px;
    height:460px;
    padding:20px;
 
    margin:10px auto;
    background-color:#bbada0;
 
    border-radius: 10px;
    position: relative;
}
 
.grid-cell{
    width:100px;
    height:100px;
    border-radius: 6px;
    background-color:#ccc0b3;
 
    position: absolute;
}
 
.number-cell{
    border-radius: 6px;
 
    font-family: Arial;
    font-weight:bold;
    font-size:60px;
    line-height:100px;
    text-align:center;
 
    position:absolute;
}

/**
 * Created by liuyubobobo on 14-4-11.
 * my site: http://www.liuyubobobo.com
 */
 
var board = new Array();
var score = 0;
var startx=0;
var starty=0;
var endx=0;
var endy=0;
var hasConflicted = new Array();
 
$(document).ready(function(){
    prepareForMobile();
    newgame();
});
 
function prepareForMobile(){
 
    if( documentWidth > 500 ){
        gridContainerWidth = 500;
        cellSpace = 20;
        cellSideLength = 100;
    }
 
    $('#grid-container').css('width',gridContainerWidth - 2*cellSpace);
    $('#grid-container').css('height',gridContainerWidth - 2*cellSpace);
    $('#grid-container').css('padding', cellSpace);
    $('#grid-container').css('border-radius',0.02*gridContainerWidth);
 
    $('.grid-cell').css('width',cellSideLength);
    $('.grid-cell').css('height',cellSideLength);
    $('.grid-cell').css('border-radius',0.02*cellSideLength);
}
 
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;
}
 
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>' );
            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) + 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( board[i][j] );
            }
 
            hasConflicted[i][j] = false;
        }
 
    $('.number-cell').css('line-height',cellSideLength+'px');
    $('.number-cell').css('font-size',0.6*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( board[i][j] == 0 ){
                    randx = i;
                    randy = j;
                }
            }
    }*/
 
var count=0;
var temporary=new Array();
 for(var i=0;i<4;i++)
 for(var j=0;j<4;j++)
 {
	 if(board[i][j]==0)
	 {
		 temporary[count]=i*4+j;
		 count++;
	 }
 }
 var pos= parseInt( Math.floor( Math.random()  * count ) );
 
 randx=Math.floor(temporary[pos]/4);
 randy=Math.floor(temporary[pos]%4);
 
 
 
    //随机一个数字
    var randNumber = Math.random() < 0.5 ? 2 : 4;
 
    //在随机位置显示随机数字
    board[randx][randy] = randNumber;
    showNumberWithAnimation( randx , randy , randNumber );
 
    return true;
}
 
$(document).keydown( function( event ){
	//event.preventDefault();
    switch( event.keyCode ){
        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: //default
            break;
    }
});
document.addEventListener('touchstart',function(event)
{
	startx=event.touches[0].pageX;
	starty=event.touches[0].pageY;
}
);
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;
	if(Math.abs(deltax)>=Math.abs(deltay))
	{
		if(deltax>0)//right
		{
 
 
				if(moveRight())
		{
			generateOneNumber();
			isGameOver();
		}  
		}else//left
		{
			if(moveLeft())
		{
			setTimeout("generateOneNumber()",210);
			setTimeout("isGameOver()",300);
		}
		}
 
		}
		else
		{
			if(deltay>0)//down
		{
 
				if(moveDown())
		{
			generateOneNumber();
			isGameOver();
		}
		}else//up
		{
			if(moveUp())
		{
			generateOneNumber();
			isGameOver();
		}
		}
 
		}
 
 
}
);
 
function isgameover(){
    if( nospace( board ) && nomove( board ) ){
        gameover();
    }
}
 
function gameover(){
    alert('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;
                        //add score
                        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 , j , k , 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] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        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 ) ){
                        //move
                        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] ){
                        //move
                        showMoveAnimation( i , j , k , j );
                        //add
                        board[k][j] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        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 , i , k , board ) ){
                        //move
                        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] ){
                        //move
                        showMoveAnimation( i , j , k , j );
                        //add
                        board[k][j] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        score += board[k][j];
                        updateScore( score );
 
                        hasConflicted[k][j] = true;
                        continue;
                    }
                }
            }
        }
 
    setTimeout("updateBoardView()",200);
    return true;
}

/**
 * Created by liuyubobobo on 14-4-11.
 * my site: http://www.liuyubobobo.com
 */
function showNumberWithAnimation( i , j , randNumber ){
 
    var numberCell = $('#number-cell-' + i + "-" + j );
 
    numberCell.css('background-color',getNumberBackgroundColor( randNumber ) );
    numberCell.css('color',getNumberColor( randNumber ) );
    numberCell.text( randNumber );
 
    numberCell.animate({
        width:cellSideLength,
        height:cellSideLength,
        top:getPosTop( i , j ),
        left:getPosLeft( i , j )
    },500);
}
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);
}

/**
 * Created by liuyubobobo on 14-4-11.
 * my site: http://www.liuyubobobo.com
 */
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 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 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 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 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 noBlockHorizontal(row,col1,col2,board)
{
	for(var i=col1+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)||
	canMoveDown(board)||
	canMoveRight(board))
	return false;
	return true;
}

代码展示：@return

任务