亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

記一次2048小游戲開發(fā)

awokezhou / 1512人閱讀

摘要：判斷游戲是否結束如果棋子移動了得到的，就再次產(chǎn)生新的棋子調用函數(shù)，給棋子涂色并記錄當前分數(shù)建立滑動屏幕監(jiān)聽事件，通過判斷滑動方向來執(zhí)行對應的移動操作，并在每次滑動屏幕后調用判斷游戲是否結束。

一、前言

今年過完年來到學校步入了大三下學期，一番掙扎之后狠心放棄了學了一年多的Java，決定開始轉戰(zhàn)喜歡的前端。然后每天泡在實驗室里學習前端的基礎，一切從零開始，這期間剛好是各大互聯(lián)網(wǎng)公司春招的時候就順便往幾個大廠投了的簡歷，申請暑期實習。2048小游戲是360奇舞學院的前端星的壓軸選拔題目。剛看到這個題目時一臉懵，因為我之前沒玩過2048小游戲不知道這是個什么東西【允悲】，接下來就跟大家一起分享一下我用了5天的課余時間從不知道這是個什么游戲到最后把它寫出來的過程吧。[這是一道30分的題目 我得了23分 大佬評語是動畫做的差了點]

二、題目描述

用JavaScript實現(xiàn)一個2048小游戲

題目要求：

實現(xiàn)web的2048游戲，使用JavaScript或TypeScript完成

基本規(guī)則、計算分數(shù)和判斷終局準確無誤

移動數(shù)字時有基本的動畫效果

加分項

適配移動端

其他額外的效果或可玩性改進

代碼實現(xiàn)優(yōu)雅，注釋完整

三、游戲設計思路 
先一起來看一下項目文件結構（此項目我沒用任何框架和jQuery庫）

頁面布局樣式，先把頁面基本元素展示出來（HTML+CSS完整代碼）。

HTML




    
    
    2048小游戲
    


    

        
2048小游戲

        重新開始
    

    

        

        
得分： 分

    

    

        
電腦：請用鍵盤方向鍵操作游戲

        
手機：請滑動手機屏幕操作游戲

這里我做了手機端適配，這段代碼可以讓頁面在手機端等比放大。

CSS

body {
    background-color: #ced9c5;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: "Microsoft YaHei";
}
/*header部分樣式*/
header{
    display: block;
    margin: 0px auto;
    text-align: center;
}
header h1{
    font-size: 1.5em;
}
header #newgame_btn{
    width: 100px;
    padding:10px;
    background: #7da962;
    font-family:inherit;
    font-size: 20px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
}
/*table樣式*/
table {
    margin: 0px auto;
    margin-top: 30px;
    border-radius: 10px;
    background-color: #bfc0bb;
    border-spacing: 8px;
}
td {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*footer部分樣式*/
main .number_title {
    font-size: 0.8em;
}
main #show_number{
    color: #f8563d;
    font-size: 1.3em;
}
.inner {
    height: 50px;
    line-height: 1.8;
    text-align: center;
    padding: 15px;
    font-size: .7em;
    color: #656565;
}
footer .operation_pc{
    border-top: 1px solid #bfc0bb;
}
footer .operation_phone{
    border-bottom: 1px solid #bfc0bb;
}
棋盤棋子初始化與產(chǎn)生新的棋子、計分和對產(chǎn)生的新棋子涂色

通過了解游戲規(guī)則，游戲中有16個格子，游戲剛開始時需要隨機在兩個格子里出現(xiàn)兩個數(shù)，接下來每次移動后要產(chǎn)生一個隨機數(shù)，隨機數(shù)只能是隨機的2或4。所以這里我們就要做一個生成隨機數(shù)的函數(shù)。

通過調用這個函數(shù)并傳入最大和最小數(shù)值的參數(shù)，然后函數(shù)會返回一個介于這兩個數(shù)之間（包括這兩個數(shù)）的一個隨機整數(shù)。

function GetRandom(Min,Max){
    return Min + Math.round((Max-Min) * Math.random());
}

調用產(chǎn)生隨機數(shù)的函數(shù)，在1~16的空格子里產(chǎn)生隨機的2或4。

要注意的是，在產(chǎn)生隨機的2或4時要先判斷要放入隨機數(shù)的格子是否是空的，如果隨機找的格子不為空則不產(chǎn)生隨機的2或4，要再次調用自身直到找到空的格子為止。

/*給隨機的格子放入隨機的2或4*/
function RandomNum(){
    // 產(chǎn)生一個1~16的隨機數(shù)來獲取一個格子的ID
    let num = GetRandom(1,16);
    // 空格子數(shù)量計數(shù)器
    let count = 0;
    // 判斷產(chǎn)生隨機格子內是否有數(shù)字
    if(document.getElementById(num).innerHTML == ""){
        // 產(chǎn)生2或4隨機數(shù)并放入隨機產(chǎn)生的空格子中
        document.getElementById(num).innerHTML = GetRandom(1,2) * 2;
    }
    // 如果格子有數(shù)字遍歷棋盤是否放慢了棋子
    else{
        // 遍歷棋盤是否有空格子，如果有計數(shù)器就累加1
        for(let i = 1; i <= 16; i++){
            let piece_  = document.getElementById(i);
            if( piece_.innerHTML== ""){
                count++;
            }
        }
        // 判斷棋盤是否有空格，如果有就再次執(zhí)行隨機產(chǎn)生棋子的函數(shù)
        if(count > 0){
            RandomNum();
        }
    }
}

接下來創(chuàng)建一個每次棋子移動后產(chǎn)生結果的函數(shù)，這里創(chuàng)建一個控制不同數(shù)字背景顏色的對象

let color_object = {
        "":"#d3d3d3",
        "2":"#fef4f2",
        "4":"#fed9a2",
        "8":"#fc8c5e",
        "16":"#f8692f",
        "32":"#f8563d",
        "64":"#ff3936",
        "128":"#00c3dd",
        "256":"#00a4be",
        "512":"#00abcb",
        "1024":"#00abcb",
        "2048":"#00abcb",
        "4096":"#005d6e"
    };

產(chǎn)生隨機數(shù)和結果的函數(shù)創(chuàng)建后，進行函數(shù)的初始化。

function init(){
    // 獲取棋盤table對象
    let checkerBoard = document.getElementById("checkerBoard");
    let text = "";
    let id = 1;
    // 循環(huán)產(chǎn)生tr*4+td*4的行和列并給每一個tablecell賦予ID值（用1~16分別代表每個格子的ID值）
    for(let i = 1; i < 5; i++){
        // 拼接
        text += "";
        for(let j = i; j <= i+12; j += 4){
            // 拼接
            text += "";
            // 使td的ID值依次遞增
            id++;
        }
        // 拼接
        text += ""
    }
    // 把循環(huán)產(chǎn)生的行和列放入table中
    checkerBoard.innerHTML = text;
    // 在棋盤中循環(huán)放入兩個由RandomNum()產(chǎn)生的隨機位置和隨機的2或4
    for(let k = 0; k < 2; k++){
        RandomNum();
    }
    Result();
}

main.js（完整的main.js代碼）

/*新打開窗口時初始化游戲*/
window.onload = init();

/*點擊重新開始游戲按鈕時初始化游戲*/
function newGame(){
    init();
}

/*生成一個介于兩個整數(shù)之間的隨機整數(shù)*/
function GetRandom(Min,Max){
    return Min + Math.round((Max-Min) * Math.random());
}

/*給隨機的格子放入隨機的2或4*/
function RandomNum(){
    // 產(chǎn)生一個1~16的隨機數(shù)來獲取一個格子的ID
    let num = GetRandom(1,16);
    // 空格子數(shù)量計數(shù)器
    let count = 0;
    // 判斷產(chǎn)生隨機格子內是否有數(shù)字
    if(document.getElementById(num).innerHTML == ""){
        // 產(chǎn)生2或4隨機數(shù)并放入隨機產(chǎn)生的空格子中
        document.getElementById(num).innerHTML = GetRandom(1,2) * 2;
    }
    // 如果格子有數(shù)字遍歷棋盤是否放慢了棋子
    else{
        // 遍歷棋盤是否有空格子，如果有計數(shù)器就累加1
        for(let i = 1; i <= 16; i++){
            let piece_  = document.getElementById(i);
            if( piece_.innerHTML== ""){
                count++;
            }
        }
        // 判斷棋盤是否有空格，如果有就再次執(zhí)行隨機產(chǎn)生棋子的函數(shù)
        if(count > 0){
            RandomNum();
        }
    }
}

/*初始化游戲數(shù)據(jù)*/
function init(){
    // 獲取棋盤table對象
    let checkerBoard = document.getElementById("checkerBoard");
    let text = "";
    let id = 1;
    // 循環(huán)產(chǎn)生tr*4+td*4的行和列并給每一個tablecell賦予ID值（用1~16分別代表每個格子的ID值）
    for(let i = 1; i < 5; i++){
        // 拼接
        text += "";
        for(let j = i; j <= i+12; j += 4){
            // 拼接
            text += "";
            // 使td的ID值依次遞增
            id++;
        }
        // 拼接
        text += ""
    }
    // 把循環(huán)產(chǎn)生的行和列放入table中
    checkerBoard.innerHTML = text;
    // 在棋盤中循環(huán)放入兩個由RandomNum()產(chǎn)生的隨機位置和隨機的2或4
    for(let k = 0; k < 2; k++){
        RandomNum();
    }
    Result();
}

/*給不同數(shù)值的棋子涂上不同的顏色，并計算得分*/
function Result(){
    // 給分數(shù)初始值為0
    let score = 0;
    // 計數(shù)棋子的數(shù)量
    let count = 0;
    // 定義一個數(shù)值對應顏色的對象
    let color_object = {
        "":"#d3d3d3",
        "2":"#fef4f2",
        "4":"#fed9a2",
        "8":"#fc8c5e",
        "16":"#f8692f",
        "32":"#f8563d",
        "64":"#ff3936",
        "128":"#00c3dd",
        "256":"#00a4be",
        "512":"#00abcb",
        "1024":"#00abcb",
        "2048":"#00abcb",
        "4096":"#005d6e"
    };
    for(let i = 1; i <= 16; i++){
        // 遍歷所有棋子，給對應數(shù)值的棋子涂上對應的顏色
        let text = document.getElementById(i);
        text.style.backgroundColor = color_object[text.innerHTML];
        // 以棋子數(shù)值為8的棋子作為臨界給數(shù)值大于等于8和小于8的棋子數(shù)字分別設置不同的顏色
        if(text.innerHTML >= 8){
            text.style.color = "#fff";
        }else{
            text.style.color = "#6e6f71";
        }
        // 如果格子的數(shù)值不為空就把此格子上棋子的數(shù)值累加作為當前得分
        if(text.innerHTML != ""){
            score += parseInt(text.innerHTML);
            count++;
        }
    }
    // 如果棋子數(shù)量為2時，即游戲剛初始化，此時分數(shù)置零
    if(count == 2){
        document.getElementById("show_number").innerHTML = 0;
    }
    // 如果棋子數(shù)量不是二則正常累加得分
    else{
        document.getElementById("show_number").innerHTML = score;
    }
}

接下來開始讓棋子動起來（pc端用方向鍵操作，移動端用手指滑動操作）

創(chuàng)建一個棋子移動的函數(shù)，并設兩個參數(shù)。

function Change(piece_1,piece_2){
    // 判斷如果棋子要移動的方向有空格就將其移動
    if(piece_1.innerHTML == "" && piece_2.innerHTML != ""){
        res = true;
        piece_1.innerHTML = piece_2.innerHTML;
        piece_2.innerHTML = "";
    }
    // 判斷如果相鄰棋子都不為空并且數(shù)值相等就將他們合并，同時將一個格子置空
    else if(piece_1.innerHTML != "" && piece_1.innerHTML == piece_2.innerHTML){
        res = true;
        piece_1.innerHTML = parseInt(piece_1.innerHTML) + parseInt(piece_2.innerHTML);
        piece_2.innerHTML = "";
    }
}

棋子往各個方向移動的函數(shù)Top()、Down()、Right()、Left()這里不再一一陳述見下面完整代碼。

建立鍵盤監(jiān)聽來判斷按壓對應的方向鍵執(zhí)行對應的移動函數(shù)，并在每次按壓后調用gameOver();判斷游戲是否結束。

document.onkeydown = function pc_move(){
    res = false;
    if(event.keyCode == 38) Top();
    else if(event.keyCode == 40) Down();
    else if(event.keyCode == 37) Left();
    else if(event.keyCode == 39) Right();
    // 判斷游戲是否結束
    gameOver();
    // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
    if(res) RandomNum();
    // 調用Result()函數(shù)，給棋子涂色并記錄當前分數(shù)
    Result();
}

建立滑動屏幕監(jiān)聽事件，通過判斷滑動方向來執(zhí)行對應的移動操作，并在每次滑動屏幕后調用gameOver();判斷游戲是否結束。

值得注意的是在手機上滑動時屏幕默認的動作是頁面滑動，所以用下面的一行代碼來阻止默認事件的執(zhí)行。

e.preventDefault();
function touch_move(){
    // 定義滑動的起點和終點X、Y坐標值
    let startX = 0;
    let startY = 0;
    let endX = 0;
    let endY = 0;
    // 獲取棋盤對象
    let table = document.getElementById("checkerBoard");
    // 給棋盤綁定"touchstart"事件
    table.addEventListener("touchstart",function(e){
        let touch = event.targetTouches[0];
        // 在手指點擊屏幕時阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動起點坐標
        startX = touch.pageX;
        startY = touch.pageY;
        
    });
    // 給棋盤綁定"touchmove"事件
    table.addEventListener("touchmove",function(e){
        let touch = event.targetTouches[0];
        // 在手指滑動屏幕時阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動屏幕的終點坐標
        endX = touch.pageX;
        endY = touch.pageY;
        
    });
    // 給棋盤綁定"touchend"事件
    table.addEventListener("touchend",function(e){
        // 在手指滑動屏幕結束時阻止屏幕拖動事件
        e.preventDefault();
        //滑動結束，計算出手指分別在X、Y軸上滑動距離
        let distanceX = endX - startX;
        let distanceY = endY - startY;
        res = false;
        // console.log("startX " + startX + "  startY" + startY);
        // console.log("endX" + endX + "  endY" + endY);
        // console.log("distanceX" + distanceX + "  distanceY" + distanceY)
        // console.log("------------------------------------------------------------------------------");
        
        // 如果終點坐標X、Y值都不為零則進入下一步判斷滑動方向
        if(endX!=0 && endY!=0){
            //向上滑動
            if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY < -10){
                Top();
            }
            //向下滑動
            else if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY > 10){
                Down();
            }
            //向左滑動
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -10){
                Left();
            }
            //向右滑動
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 10){
                Right();
            }
            // 判斷游戲是否結束
            gameOver();
            // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
            if(res){
                RandomNum();
            }
            // 將以上綁定事件獲取的起始點坐標值置零
            startX = startY = endX = endY = 0;
        }
        // 調用Result()函數(shù)，給棋子涂色并記錄當前分數(shù)
        Result();
    });
}
touch_move();

move.js（move.js完整代碼）

// 控制棋盤是否產(chǎn)生隨機的棋子，當res==true時產(chǎn)生新的棋子
let res = false;
/*移動棋子使相鄰并且相同數(shù)值的棋子合并，同時將數(shù)值相加*/
function Change(piece_1,piece_2){
    // 判斷如果棋子要移動的方向有空格就將其移動
    if(piece_1.innerHTML == "" && piece_2.innerHTML != ""){
        res = true;
        piece_1.innerHTML = piece_2.innerHTML;
        piece_2.innerHTML = "";
    }
    // 判斷如果相鄰棋子都不為空并且數(shù)值相等就將他們合并，同時將一個格子置空
    else if(piece_1.innerHTML != "" && piece_1.innerHTML == piece_2.innerHTML){
        res = true;
        piece_1.innerHTML = parseInt(piece_1.innerHTML) + parseInt(piece_2.innerHTML);
        piece_2.innerHTML = "";
    }
}

/*向上移動棋子*/
function Top(){
    for(let i = 1; i < 5; i++){
        for(let j = i; j <= i + 12; j += 4){
            for(let k = j; k > 4; k -= 4){
                let piece_1 = document.getElementById(k - 4);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*向下移動棋子*/
function Down(){
    for(let i = 1; i < 5; i++){
        for(let j = i + 12; j >= i; j -= 4){
            for(let k = j; k < 13; k += 4){
                let piece_1 = document.getElementById(k + 4);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*向左移動棋子*/
function Left(){
    for(let i = 1; i <= 13; i += 4){
        for(let j = i; j <= i + 3; j += 1){
            for(let k = j; k > i; k -= 1){
                let piece_1 = document.getElementById(k - 1);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*向右移動棋子*/
function Right(){
    for(let i = 1; i <= 13; i += 4){
        for(let j = i + 4; j >= i; j -= 1){
            for(let k = j; k < i + 3; k += 1){
                let piece_1 = document.getElementById(k + 1);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*按壓鍵盤方向鍵使棋子移動*/
document.onkeydown = function pc_move(){
    res = false;
    if(event.keyCode == 38) Top();
    else if(event.keyCode == 40) Down();
    else if(event.keyCode == 37) Left();
    else if(event.keyCode == 39) Right();
    // 判斷游戲是否結束
    gameOver();
    // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
    if(res) RandomNum();
    // 調用Result()函數(shù)，給棋子涂色并記錄當前分數(shù)
    Result();
}

/*滑動手機屏幕使棋子移動*/
function touch_move(){
    // 定義滑動的起點和終點X、Y坐標值
    let startX = 0;
    let startY = 0;
    let endX = 0;
    let endY = 0;
    // 獲取棋盤對象
    let table = document.getElementById("checkerBoard");
    // 給棋盤綁定"touchstart"事件
    table.addEventListener("touchstart",function(e){
        let touch = event.targetTouches[0];
        // 在手指點擊屏幕時阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動起點坐標
        startX = touch.pageX;
        startY = touch.pageY;
        
    });
    // 給棋盤綁定"touchmove"事件
    table.addEventListener("touchmove",function(e){
        let touch = event.targetTouches[0];
        // 在手指滑動屏幕時阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動屏幕的終點坐標
        endX = touch.pageX;
        endY = touch.pageY;
        
    });
    // 給棋盤綁定"touchend"事件
    table.addEventListener("touchend",function(e){
        // 在手指滑動屏幕結束時阻止屏幕拖動事件
        e.preventDefault();
        //滑動結束，計算出手指分別在X、Y軸上滑動距離
        let distanceX = endX - startX;
        let distanceY = endY - startY;
        res = false;
        // console.log("startX " + startX + "  startY" + startY);
        // console.log("endX" + endX + "  endY" + endY);
        // console.log("distanceX" + distanceX + "  distanceY" + distanceY)
        // console.log("------------------------------------------------------------------------------");
        
        // 如果終點坐標X、Y值都不為零則進入下一步判斷滑動方向
        if(endX!=0 && endY!=0){
            //向上滑動
            if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY < -10){
                Top();
            }
            //向下滑動
            else if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY > 10){
                Down();
            }
            //向左滑動
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -10){
                Left();
            }
            //向右滑動
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 10){
                Right();
            }
            // 判斷游戲是否結束
            gameOver();
            // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
            if(res){
                RandomNum();
            }
            // 將以上綁定事件獲取的起始點坐標值置零
            startX = startY = endX = endY = 0;
        }
        // 調用Result()函數(shù)，給棋子涂色并記錄當前分數(shù)
        Result();
    });
}
touch_move();

進行游戲結束判斷（遍歷棋盤當棋盤放滿棋子，并且每個棋子上下左右相鄰位置都不相同則游戲結束）

gameOver.js（gameOver.js完整代碼）

/*游戲結束判斷*/
function gameOver(){
    // 設置一個空格子計數(shù)器
    let count = 0;
    // 遍歷棋盤是否有空格子，如果有計數(shù)器就累加1
    for(let i = 1; i <= 16; i++){
        let piece_  = document.getElementById(i);
        if( piece_.innerHTML== ""){
            count++;
        }
    }
    // 判斷棋盤是否擺滿棋子
    if(count == 0){
        // 當棋盤擺滿棋子時，遍歷所有棋子看其與相鄰的棋子數(shù)值是否相等，一旦有相等的計數(shù)器就累加1
        for(let i = 1; i <= 16; i++){
            let piece_self = document.getElementById(i);
            let piece_add_1 = document.getElementById(i + 1);
            let piece_cut_1 = document.getElementById(i - 1);
            let piece_add_4 = document.getElementById(i + 4);
            let piece_cut_4 = document.getElementById(i - 4);
            switch (i){
                case 1:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML)){
                        count++;
                    }
                    break;
                case 2:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML)){
                        count++;
                    }
                    break;
                case 3:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML)){
                        count++;
                    }
                    break;
                case 4:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML)){
                        count++;
                    }
                    break;
                case 5:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 6:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 7:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 8:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 9:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 10:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 11:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 12:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 13:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 14:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 15:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 16:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                default:
                    break;    
            }
        }
        // 當遍歷所有棋子后與相鄰位置棋子數(shù)值都不相等，游戲結束
        if(count == 0){
            // 獲取當前得分
            let score = document.getElementById("show_number").innerHTML;
            alert("瀟灑人生，極限挑戰(zhàn)。游戲結束！ 您的得分："+score+" 分");
            // 點擊確定按鈕后初始化游戲
            init();
        }
    }
}

至此整個項目設計過程就結束了，由于剛轉入前端代碼書寫肯定不是很優(yōu)雅，歡迎大家對我的代碼不足之處進行指正。

（寢室已經(jīng)斷電，室友已是鼾聲四起，準備睡覺啦，明天一早還要起來去上課【允悲】）

完整項目訪問我的github倉庫

點擊此處體驗我的2048小游戲
歡迎大家轉載此文章 但請注明出處 謝謝合作

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/94503.html

相關文章

  • 記一次JVM調優(yōu)

    摘要：現(xiàn)象登入生產(chǎn)環(huán)境，使用命令因為這時候并沒有打的，所以只能觀察現(xiàn)象。其他的可以根據(jù)這個類推，是內純的占用量。 前言 我們的游戲上線之初，經(jīng)常有玩家反饋卡，或者有網(wǎng)絡延遲等現(xiàn)象，造成用戶流失等現(xiàn)象，這時候我就想到是不是可能是之前的jvm配置有問題，或者存在內存泄露等問題。 現(xiàn)象 登入生產(chǎn)環(huán)境，使用命令,因為這時候并沒有打gc的log，所以只能觀察現(xiàn)象。 jstat -gcutil 270...

    sugarmo 評論0 收藏0

  • 記一次使用Fiddler抓包工具抓取Https協(xié)議數(shù)據(jù)的踩坑過程

    摘要：直到今天，突然看到一個有意思的微信小游戲。后來試了幾次之后才發(fā)現(xiàn)，這個小游戲比較刁，不僅做了微信的登錄授權，而且做了手機端訪問的判斷，更甚至竟然用的還是協(xié)議的網(wǎng)頁。調用的目標發(fā)生了異常。 記一次使用Fiddler抓包工具抓取Https協(xié)議數(shù)據(jù)的踩坑過程 前言 記得從剛入門前端第一天開始，當時的師傅就跟我介紹了一個可以抓取一些必須要在微信瀏覽器打開的鏈接的工具Fiddler，主要用來抓取...

    JackJiang 評論0 收藏0

  • 記一次游戲H5開發(fā)經(jīng)驗

    摘要：為了實現(xiàn)物體隨機出現(xiàn)的效果，讓每個物體隨機多少秒后開始出現(xiàn)最后一個物體出現(xiàn)完，多少秒后出現(xiàn)結束畫面等等，需要理清楚各個定時器的關系，并對其添加語義化良好的標記，及時對未完結的定時器進行清除，防止定時器帶來的意想不到的問題。 快到年終的時候做了一個以游戲形式展示的h5活動頁，第一次嘗試使用js寫小游戲，很有趣的過程，很寶貴的經(jīng)驗。 效果圖 直接上個效果的gif圖，游戲的一小部分效果，錄出...

    xingpingz 評論0 收藏0

發(fā)表評論

0條評論

awokezhou

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<