摘要：導(dǎo)語(yǔ)本次將會(huì)從頭到尾講一個(gè)游戲的制作過(guò)程，中間也會(huì)穿插自己的理解一項(xiàng)目結(jié)構(gòu)除了和文件外，分了，以及引入。我們將兩個(gè)方法寫(xiě)在中是格子之間的距離，是一個(gè)小格子的寬度定位完成后我們進(jìn)行的是數(shù)組的初始化，初始化為一個(gè)的二維數(shù)組，值為。

本次將會(huì)從頭到尾講一個(gè)2048游戲的制作過(guò)程，中間也會(huì)穿插自己的理解

除了html和css文件外，分了main.js,support.js,showanimation.js，以及引入jquery。

html文件

    
    
    
    
    


    

        
我的2048
        NewGame
        
score:0
        
    

     

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

    
    
    
    
    

css文件

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    font-size:12px;
    line-height:120%;
    text-align:center;
    color:#333;
    padding:20px;
    font:12px/1.5 "微軟雅黑",tahoma,arial,"Hiragino Sans GB",宋體,sans-serif;
}
table{    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;
    font-weight:normal;
}
img{border:none;}
ol,ul{list-style:none;}
input, select,textarea{
    vertical-align:middle;
    outline:none;
}
textarea{resize:none;}
a{
    color:#333;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
/*清浮*/
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.clearfix{zoom:1}

/********************************************/
body{
    background:#978E81;
}
header{
    display:block;
    margin:0 auto;
    width:100%;     /*為了兼容移動(dòng)端*/
    text-align:center;
}
header h1{
    font-family:Arial;
    font-size:30px;
    font-weight:bold;
}
header #newGameBtn{
    display: block;
    margin:10px auto;
    width:100px;
    padding:5px 10px;
    background-color:#8f7a66;
    font-family:Arial;
    color:white;
    border-radius:10px;
    text-decoration:none;
}
header #newGameBtn:hover{
    background-color:#9f8b77;
}
header p{
    font-family:Arial;
    font-size:25px;
    margin:10px auto;

}
#grid-container{
    width:460px;
    height:460px;
    padding:20px;
    margin:30px auto;
    background-color: #bbada0;
    border-radius:10px;
    position:relative;
}
.grid-cell{
    width:100px;
    height:100px;
    border-radius:12px;
    background-color:#ccc0b3;
    position:absolute;

}
.number-cell{
    border-radius:4px;
    font-family:Arial;
    font-weight:bold;
    font-size:60px;
    line-height:100px;
    text-align:center;
    position:absolute;
}

首先毫無(wú)疑問(wèn)，需要先初始化游戲，渲染方塊之類的。
我們聲明兩個(gè)變量。

var board=new Array();  //存儲(chǔ)游戲的數(shù)據(jù)
var score=0;    //得分

然后定義一個(gè)newGame函數(shù),并且等document加載完后調(diào)用它

$(document).ready(function(){
    newGame();
})
function newGame(){
    //為移動(dòng)端初始化寬度
    prepareForMobile();
    //初始化棋盤格
    init();
    //在隨機(jī)兩個(gè)格子生成數(shù)字
    generateOneNumber();
    generateOneNumber();
}

先忽略那個(gè)兼容移動(dòng)端的，我們根據(jù)游戲的邏輯，在newGame里面寫(xiě)了兩件事，一個(gè)是初始化，一個(gè)是隨機(jī)在格子中生成一個(gè)數(shù)字，一開(kāi)始要有兩個(gè)，所以這個(gè)方法調(diào)用兩遍。下面是init里的內(nèi)容

function init(){
    //有數(shù)字的小方塊
    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),
                "left":getPosLeft(i,j)
            });
        }
    }
    //初始化board數(shù)組
    for(var i=0;i<4;i++){
        board[i]=new Array();
        for(var j=0;j<4;j++){
            board[i][j]=0;

        }
    }
    //有操作,更新界面
    updateBoardView();

    score=0;
    $("#score").text(score);
}

在init初始化里面，我們先做的是給16個(gè)背景小方塊，因?yàn)樵赾ss文件里面我們只寫(xiě)了定位方式absolute。
通過(guò)遍歷得到每個(gè)格子，css()方法給他們?cè)O(shè)置定位。我們將getPosTop,getPosLeft兩個(gè)方法寫(xiě)在support.js中

//20是格子之間的距離，100是一個(gè)小格子的寬度
function getPosTop(i,j){
    var top=20+i*(100+20);
    return top;
}
function getPosLeft(i,j){
    var left=20+j*(100+20);
    return left;
}

定位完成后我們進(jìn)行的是board數(shù)組的初始化，初始化為一個(gè)4*4的二維數(shù)組，值為false。board初始化完成后我們則根據(jù)board來(lái)將游戲界面更新。因?yàn)楹罄m(xù)我們會(huì)經(jīng)常使用到根據(jù)board數(shù)組更新游戲畫(huà)面,所以將其寫(xiě)成一個(gè)updateBoardView()方便調(diào)用

updateBoardView()函數(shù)
因?yàn)橛凶⑨專院?jiǎn)單說(shuō)一下。我們是動(dòng)態(tài)加載有數(shù)字的方塊的，每次更新先將所有的數(shù)字方塊全部移除，在弄個(gè)循環(huán)創(chuàng)建它們，并且創(chuàng)建的同時(shí)用css設(shè)置樣式。設(shè)置樣式時(shí)先判斷這個(gè)位置的board是不是0,為零的話則將寬高設(shè)置為0，并將它們的top,left設(shè)置在背景方格的中間（這里是為了后面的animate動(dòng)畫(huà)是從中間變化）。對(duì)于board中有值的，則需要多設(shè)置他們的background-color和color。最后將值顯示在html中，即theNumberCell.text(board[i][j])

//更新棋盤上顯示的方塊
function updateBoardView(){
    //如果有number-cell后先刪除
    $(".number-cell").remove();
    //遍歷格子，改變樣式
    for(var i=0;i<4;i++){
        for(var j=0;j<4;j++){
            $("#grid-container").append("
")
            var theNumberCell=$("#number-cell-"+i+"-"+j);

            if(board[i][j]==0){
                theNumberCell.css({
                    "width":"0px",
                    "height":"0px",
                    "top":getPosTop(i,j)+50,/*這里是為了把它放中間，動(dòng)畫(huà)才好看*/
                    "left":getPosLeft(i,j)+50
                });
            }else{
                theNumberCell.css({
                    "width":100+"px",
                    "height":100+"px,
                    "top":getPosTop(i,j),
                    "left":getPosLeft(i,j),
                    "background-color":getNumberBackgroundColor(board[i][j]),
                    "color":getNumberColor(board[i][j])
                });
                theNumberCell.text(board[i][j]);
            }
        }
        $(".number-cell").css({
            "line-height":cellSideLength+"px",
            "font-size":0.6*cellSideLength+"px"
        })
    }
}

數(shù)字方塊的背景色與前景色的獲取
我們將這兩個(gè)函數(shù)寫(xiě)在support.js中,就使用了一個(gè)switch，簡(jiǎn)單明了，不多解釋

function getNumberBackgroundColor(number){
    var color="black";
    switch(number){
        case 2:
            color="#eee4da";
            break;
        case 4:
            color="#ede0c8";
            break;
        case 8:
            color="#f2b179";
            break;
        case 16:
            color="#f59563";
            break;
        case 32:
            color="#f67c5f";
            break;
        case 64:
            color="#f65e3b";
            break;
        case 128:
            color="#edcf72";
            break;
        case 256:
            color="#edcc61";
            break;
        case 512:
            color="#9c0";
            break;
        case 1024:
            color="#33b5e5";
            break;
        case 2048:
            color="#09c";
            break;
    }
    return color;
}
function getNumberColor(number){
    if(number<=4){
        return "#776e50";
    }
    return "white";
}

要想在格子上隨機(jī)生成一個(gè)數(shù)字，首先我們需要先確定還有空格子可以生成,沒(méi)有的話直接返回，所以先判斷

//先看有無(wú)空格
    if(nospace(board)){
        return false;
    }

將nospace(board)寫(xiě)在support.js中

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;
}

接著要隨機(jī)生成一個(gè)坐標(biāo),并且判斷這個(gè)點(diǎn)是不是為空，不為空則繼續(xù)隨機(jī)生成。實(shí)在是找不到了，就遍歷格子，選第一個(gè)為空的格子

//隨機(jī)生成一個(gè)位置
    var randx=parseInt(Math.floor(Math.random()*4));
    var randy=parseInt(Math.floor(Math.random()*4));
//看是不是空格,優(yōu)化隨機(jī)
    var times=0;
    while(times<50){
        if(board[randx][randy]==0){
            break;
        }
        //重復(fù)
        var randx=parseInt(Math.floor(Math.random()*4));
        var 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;
                }
            }
        }
    }

然后隨機(jī)生成個(gè)2或4 var randNumber=Math.random()<0.65?2:4;
最后將這個(gè)數(shù)字格子用動(dòng)畫(huà)表現(xiàn)出來(lái)，并更新board數(shù)組

    showNumberWithAnimation(randx,randy,randNumber);
    board[randx][randy]=randNumber;

最后，我們將showNumberWithAnimation()寫(xiě)在showanimation.js中。
主要是通過(guò)jq的animate實(shí)現(xiàn)動(dòng)畫(huà)效果。

function showNumberWithAnimation(i,j,randNumber){
    var numberCell=$("#number-cell-"+i+"-"+j);

    numberCell.css({
        "background-color":getNumberBackgroundColor(randNumber),
        "color":getNumberColor(randNumber)
    });
    
    numberCell.animate({
        width:100,
        height:100,
        top:getPosTop(i,j),
        left:getPosLeft(i,j)
    },50);
    numberCell.text(randNumber);
}

至此，我們的游戲的初始化就完成了，在瀏覽器里運(yùn)行一下吧