JS與HTML、CSS實現2048小遊戲（三）

後續文章

前篇鏈接

JS與HTML、CSS實現2048小遊戲（一）
JS與HTML、CSS實現2048小遊戲（二）

隨機數生成方法——generateOneNumber()

在前面的文章中數字格和棋盤格已經初始化完成，init()初始化的步驟差不多完成了。接下來就要開始繼續編寫newgame()方法的第二個方法——generateOneNumber()的編寫了。
實現這個方法一共需要四步：

隨機位置生成一個數

第一步，需要生成一個隨機的位置。在這裏咱們將遊戲主界面的16個小格子看成一個二維座標系，然後就可以在這個座標系中隨機生成一個座標。

//隨機位置生成數字函數
function generateOneNumber() {
    //生成一個隨即位置的隨機數字
    //1、生成一個隨機位置
    //隨即一個X座標
    var randX = parseInt(Math.floor(Math.random()*4));
    //隨即一個Y座標
    var randY = parseInt(Math.floor(Math.random()*4));
 }

這裏使用了randome()函數，但是這會生成一個在0和1之間的隨機浮點數，所以咱們需要將他乘以4並使用floor來使其在0，1，2，3，這四個數中隨機取值。最後還需要用parseint來將這個數轉換成整形數字。

接着，要寫一個死循環，在其中增設判斷條件，如果隨機選中的格子是空的，就跳出循環，如果不是就重新隨機生成。這樣是爲了防止數字隨機生成在以有數字的格子之中。而使用board來計數，一方面是爲判斷格子是否爲空，一方面則是爲了之後檢測格子中數字是否相同，還有一方面也是爲了計算遊戲得分而設計的數值。


 //定義一個死循環，完成隨機生成格子
    while (true){
        if (board[randX][randY] == 0) {
            break;
        }
        //否則重新生成隨即位置
        var randX = parseInt(Math.floor(Math.random()*4));
        var randY = parseInt(Math.floor(Math.random()*4));
    }

第二步，咱們要在這個隨機位置生成一個隨機數字。這裏則是使用一個三元運算符和一個隨機數，如果隨機到的數小於0.5就讓隨機數字randNumber變爲2，不是則變爲4。根據2048的遊戲規則新生成的數字只有2和4，所以在這裏就只設置了這兩個數。

//2、生成一個隨機數字
    var randNumber = Math.random()<0.5 ? 2:4;

數字生成動畫

第三步，就要在隨機位置上顯示隨機數字了。先是令隨機位置的board的值爲之前得到的隨機數字。然後使用一個shouNunberWithanimation()的動畫方法來實現。這樣就要在動畫邏輯文件中來編寫這個方法了。

//數字生成動畫
function shouNunberWithanimation(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:"100px",
        height:"100px",
        top:getPosTop(i,j),
        left:getPosLeft(i,j)
    },50)
}

數字格css樣式添加

同樣的先創建這個方法，先是給這個函數傳入隨即位置的XY值和隨機數的值，然後再開始編寫這個函數。首先，要獲取這個隨即位置的數字格。然後爲了顯示出這個數字，需要重新設置這個數字格的樣式，再加上jquery-1.11.0這個庫中的動畫效果函數animate()。其中，我設置了數字格的長寬與棋盤格一樣爲100px，同樣的用getPosLeft()和getPosTop()兩個方法來固定座標。然後在設置這個數字格的顯示動畫的時候，我使用getNumberBackgroundColor,getNumberColor(randNumber)方法，來設置不同數字的不同文本顏色和數字格背景顏色。因爲這兩個方法在生成數字時都會使用到，所以我將其放入基礎邏輯文件中編寫。

//數字格背景顏色變化函數
function getNumberBackgroundColor(number) {
    switch (number) {
        case 2:// noinspection JSAnnotator
            return "#eee4da";
            break;
        case 4:// noinspection JSAnnotator
            return "#ede0c8";
            break;
        case 8:// noinspection JSAnnotator
            return "#f2b179";
            break;
        case 16:// noinspection JSAnnotator
            return "#f59563";
            break;
        case 32:// noinspection JSAnnotator
            return "#f67c5f";
            break;
        case 64:// noinspection JSAnnotator
            return "#f65e3b";
            break;
        case 128:// noinspection JSAnnotator
            return "#edcf72";
            break;
        case 256:// noinspection JSAnnotator
            return "#edcc61";
            break;
        case 512:// noinspection JSAnnotator
            return "#9c0";
            break;
        case 1024:// noinspection JSAnnotator
            return "#33b5e5";
            break;
        case 2048:// noinspection JSAnnotator
            return "#09c";
            break;
        case 4096:// noinspection JSAnnotator
            return "#a6c";
            break;
        case 8192:// noinspection JSAnnotator
            return "#93c";
            break;
    }
}
//數字字體顏色變化函數
function getNumberColor(number){
    if (number <= 4 ){
        return "#776e65"
    }
    return "white";
    
}

這兩個方法比較簡單，一個是使用switch來判斷不同數字從而更改北京顏色，一個則是比較簡單用判斷來規劃他的字體顏色。我在編寫時，將背景顏色只設定到了，大家可以自行增減。字體則是因爲4以後的顏色和白色對比都比較容易突出文本，便僅設定了兩種情況，有想法的可以自行更改。大家可以看到，在最左端的提示欄中，都有顯示出每一種標識的顏色，這是webstorm自帶的功能，這樣方便大家查看修改，這也是我選擇用這個軟件來進行編寫的原因。

將上面的方法寫完咱們便在編譯一下就可以看到每次刷新時都會隨機出現兩個數字了。

到現在位置，這個遊戲的整體佈局纔算是徹底的介紹完了。下一篇，我再來教大家編寫遊戲的主體邏輯。

後續文章

JS與HTML、CSS實現2048小遊戲（四）

JS與HTML、CSS實現2048小遊戲（三）