引言：2048小遊戲的結束界面，使用純CSS制作模態對話框，一般做模態對話框都會使用BootStrap自帶的模態對話框組件方便使用，但在制作要運行在移動端的小項目時，就不能使用BootStrap，因為文件太大，下載耗時，耗費流量。

2個Div，一個鋪滿整屛，一個顯示內容

• 坑：如何讓Div鋪滿整屛？解決：2個辦法

1. 寬 高 100% → position：absolute； → top=0;left=0;
2. 四個方向 margin-top/left/right/bootom 都設為0

• 坑：如何讓一個Div在整個窗口居中？

1. 錯誤做法： top / left 50% 不能設置居中 因為top / left是左上角的定位
2. 正確做法： top / left 50% → margin-top:-100px;(高的一半) margin-left:-150px;(寬的一半)

• 坑：模態框背景div的透明度 opacity是繼承父元素的
• 解決：background：rgba(55,55,55,.5); 使用rgba() 可以避免繼承
• 關鍵代碼 ↓

<div id="gameover">
    <p>
        GAME OVER！<br
 
>
        SCORE:<span id="final">0</span><br>
        <a class="btn" href="javascript:start();">TRY AGAIN!</a>
    </p>
</div>

p{
    width:480px;
    margin:0 auto;
    font-size:40px;
    font-weight: bold;
    font-family:Arial;
    padding-top: 15px;
}
#gameover
 
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(55,55,55,0.5);
}

• 遊戲狀態： 2048遊戲有兩個遊戲狀態

1. 運行中 → game over 模態對話框不顯示
2. 遊戲結束 → game over 模態對話框顯示

• 標準狀態保存：給每個狀態起名 （一般全大寫字母）定義常量，使特殊的值有意義，易維護

1. const RUNNING= 1,GAMEOVER=0;
2. RUNNING 和 GAMEOVER只是一個名稱，實際存儲的還是1/0，所以，並不會增大存儲空間
3. 坑：判斷遊戲結束的時候
4. 解決：創建關鍵函數 function isGameOver(){ }

• 遊戲沒有結束的條件：

1. 有0
2. 當前元素等於右側元素（不用和左側元素比較，因為左側的元素已經和當前元素比較過了；最右側一列元素沒有右側元素，也不用比較 c < CN-1）
3. 當前元素等於下方元素（不用和上方元素比較，因為上方的元素已經和當前元素比較過了；最下方一行元素沒有下方元素，也不用比較 r < RN-1）

• 每一次移動後，都調用一次 isGameOver() 判斷是否遊戲結束

1. 坑：調用isGameOver() 要在隨機生成數之後 → 隨機數把空格填滿了，才可以進行遊戲結束判斷

• 關鍵代碼 ↓

var status=0;//保存遊戲狀態   0：遊戲結束  1：運行中
const RUNNING= 1,GAMEOVER=0;

function start(){
    //創建空數組保存到data中
    status=RUNNING;//將遊戲狀態重置為運行中
    score=0;//將得分歸零
    ……
}

//判斷遊戲是否結束
function isGameOver(){
    for(var r=0;r<RN;r++){
        for(var c=0;c<CN;c++){
            if(data[r][c]==0)
                return false;
            if(c<CN-1&&data[r][c]==data[r][c+1])
                return false;
            if(r<RN-1&&data[r][c]==data[r+1][c])
                return false;
        }
        return true;
    }
}

//每一次移動之後，判斷遊戲是否結束 
if(before!=after){
        randomNum();
        isGameOver();
        updataView();
 ｝

註：轉載請註明出處

【2048小遊戲】——CSS/原生js爬坑之純CSS模態對話框&遊戲結束