成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

awokezhou / 1432人閱讀

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

一、前言

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

二、題目描述

用JavaScript實(shí)現(xiàn)一個(gè)2048小游戲

題目要求：

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

基本規(guī)則、計(jì)算分?jǐn)?shù)和判斷終局準(zhǔn)確無誤

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

加分項(xiàng)

適配移動端

其他額外的效果或可玩性改進(jìn)

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

三、游戲設(shè)計(jì)思路 
先一起來看一下項(xiàng)目文件結(jié)構(gòu)（此項(xiàng)目我沒用任何框架和jQuery庫）

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

HTML




    
    
    2048小游戲
    


    

        
2048小游戲

        重新開始
    

    

        

        
得分： 分

    

    

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

        
手機(jī)：請滑動手機(jī)屏幕操作游戲

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

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)生新的棋子、計(jì)分和對產(chǎn)生的新棋子涂色

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

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

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

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

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

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

接下來創(chuàng)建一個(gè)每次棋子移動后產(chǎn)生結(jié)果的函數(shù)，這里創(chuàng)建一個(gè)控制不同數(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)生隨機(jī)數(shù)和結(jié)果的函數(shù)創(chuàng)建后，進(jìn)行函數(shù)的初始化。

function init(){
    // 獲取棋盤table對象
    let checkerBoard = document.getElementById("checkerBoard");
    let text = "";
    let id = 1;
    // 循環(huán)產(chǎn)生tr*4+td*4的行和列并給每一個(gè)tablecell賦予ID值（用1~16分別代表每個(gè)格子的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)放入兩個(gè)由RandomNum()產(chǎn)生的隨機(jī)位置和隨機(jī)的2或4
    for(let k = 0; k < 2; k++){
        RandomNum();
    }
    Result();
}

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

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

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

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

/*給隨機(jī)的格子放入隨機(jī)的2或4*/
function RandomNum(){
    // 產(chǎn)生一個(gè)1~16的隨機(jī)數(shù)來獲取一個(gè)格子的ID
    let num = GetRandom(1,16);
    // 空格子數(shù)量計(jì)數(shù)器
    let count = 0;
    // 判斷產(chǎn)生隨機(jī)格子內(nèi)是否有數(shù)字
    if(document.getElementById(num).innerHTML == ""){
        // 產(chǎn)生2或4隨機(jī)數(shù)并放入隨機(jī)產(chǎn)生的空格子中
        document.getElementById(num).innerHTML = GetRandom(1,2) * 2;
    }
    // 如果格子有數(shù)字遍歷棋盤是否放慢了棋子
    else{
        // 遍歷棋盤是否有空格子，如果有計(jì)數(shù)器就累加1
        for(let i = 1; i <= 16; i++){
            let piece_  = document.getElementById(i);
            if( piece_.innerHTML== ""){
                count++;
            }
        }
        // 判斷棋盤是否有空格，如果有就再次執(zhí)行隨機(jī)產(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的行和列并給每一個(gè)tablecell賦予ID值（用1~16分別代表每個(gè)格子的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)放入兩個(gè)由RandomNum()產(chǎn)生的隨機(jī)位置和隨機(jī)的2或4
    for(let k = 0; k < 2; k++){
        RandomNum();
    }
    Result();
}

/*給不同數(shù)值的棋子涂上不同的顏色，并計(jì)算得分*/
function Result(){
    // 給分?jǐn)?shù)初始值為0
    let score = 0;
    // 計(jì)數(shù)棋子的數(shù)量
    let count = 0;
    // 定義一個(gè)數(shù)值對應(yīng)顏色的對象
    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++){
        // 遍歷所有棋子，給對應(yīng)數(shù)值的棋子涂上對應(yīng)的顏色
        let text = document.getElementById(i);
        text.style.backgroundColor = color_object[text.innerHTML];
        // 以棋子數(shù)值為8的棋子作為臨界給數(shù)值大于等于8和小于8的棋子數(shù)字分別設(shè)置不同的顏色
        if(text.innerHTML >= 8){
            text.style.color = "#fff";
        }else{
            text.style.color = "#6e6f71";
        }
        // 如果格子的數(shù)值不為空就把此格子上棋子的數(shù)值累加作為當(dāng)前得分
        if(text.innerHTML != ""){
            score += parseInt(text.innerHTML);
            count++;
        }
    }
    // 如果棋子數(shù)量為2時(shí)，即游戲剛初始化，此時(shí)分?jǐn)?shù)置零
    if(count == 2){
        document.getElementById("show_number").innerHTML = 0;
    }
    // 如果棋子數(shù)量不是二則正常累加得分
    else{
        document.getElementById("show_number").innerHTML = score;
    }
}

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

創(chuàng)建一個(gè)棋子移動的函數(shù)，并設(shè)兩個(gè)參數(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ù)值相等就將他們合并，同時(shí)將一個(gè)格子置空
    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 = "";
    }
}

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

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

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();
    // 判斷游戲是否結(jié)束
    gameOver();
    // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
    if(res) RandomNum();
    // 調(diào)用Result()函數(shù)，給棋子涂色并記錄當(dāng)前分?jǐn)?shù)
    Result();
}

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

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

e.preventDefault();
function touch_move(){
    // 定義滑動的起點(diǎn)和終點(diǎn)X、Y坐標(biāo)值
    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];
        // 在手指點(diǎn)擊屏幕時(shí)阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動起點(diǎn)坐標(biāo)
        startX = touch.pageX;
        startY = touch.pageY;
        
    });
    // 給棋盤綁定"touchmove"事件
    table.addEventListener("touchmove",function(e){
        let touch = event.targetTouches[0];
        // 在手指滑動屏幕時(shí)阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動屏幕的終點(diǎn)坐標(biāo)
        endX = touch.pageX;
        endY = touch.pageY;
        
    });
    // 給棋盤綁定"touchend"事件
    table.addEventListener("touchend",function(e){
        // 在手指滑動屏幕結(jié)束時(shí)阻止屏幕拖動事件
        e.preventDefault();
        //滑動結(jié)束，計(jì)算出手指分別在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("------------------------------------------------------------------------------");
        
        // 如果終點(diǎn)坐標(biāo)X、Y值都不為零則進(jìn)入下一步判斷滑動方向
        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();
            }
            // 判斷游戲是否結(jié)束
            gameOver();
            // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
            if(res){
                RandomNum();
            }
            // 將以上綁定事件獲取的起始點(diǎn)坐標(biāo)值置零
            startX = startY = endX = endY = 0;
        }
        // 調(diào)用Result()函數(shù)，給棋子涂色并記錄當(dāng)前分?jǐn)?shù)
        Result();
    });
}
touch_move();

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

// 控制棋盤是否產(chǎn)生隨機(jī)的棋子，當(dāng)res==true時(shí)產(chǎn)生新的棋子
let res = false;
/*移動棋子使相鄰并且相同數(shù)值的棋子合并，同時(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ù)值相等就將他們合并，同時(shí)將一個(gè)格子置空
    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();
    // 判斷游戲是否結(jié)束
    gameOver();
    // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
    if(res) RandomNum();
    // 調(diào)用Result()函數(shù)，給棋子涂色并記錄當(dāng)前分?jǐn)?shù)
    Result();
}

/*滑動手機(jī)屏幕使棋子移動*/
function touch_move(){
    // 定義滑動的起點(diǎn)和終點(diǎn)X、Y坐標(biāo)值
    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];
        // 在手指點(diǎn)擊屏幕時(shí)阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動起點(diǎn)坐標(biāo)
        startX = touch.pageX;
        startY = touch.pageY;
        
    });
    // 給棋盤綁定"touchmove"事件
    table.addEventListener("touchmove",function(e){
        let touch = event.targetTouches[0];
        // 在手指滑動屏幕時(shí)阻止屏幕拖動事件
        e.preventDefault();
        //獲取手指滑動屏幕的終點(diǎn)坐標(biāo)
        endX = touch.pageX;
        endY = touch.pageY;
        
    });
    // 給棋盤綁定"touchend"事件
    table.addEventListener("touchend",function(e){
        // 在手指滑動屏幕結(jié)束時(shí)阻止屏幕拖動事件
        e.preventDefault();
        //滑動結(jié)束，計(jì)算出手指分別在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("------------------------------------------------------------------------------");
        
        // 如果終點(diǎn)坐標(biāo)X、Y值都不為零則進(jìn)入下一步判斷滑動方向
        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();
            }
            // 判斷游戲是否結(jié)束
            gameOver();
            // 如果棋子移動了得到的res==true，就再次產(chǎn)生新的棋子
            if(res){
                RandomNum();
            }
            // 將以上綁定事件獲取的起始點(diǎn)坐標(biāo)值置零
            startX = startY = endX = endY = 0;
        }
        // 調(diào)用Result()函數(shù)，給棋子涂色并記錄當(dāng)前分?jǐn)?shù)
        Result();
    });
}
touch_move();

進(jìn)行游戲結(jié)束判斷（遍歷棋盤當(dāng)棋盤放滿棋子，并且每個(gè)棋子上下左右相鄰位置都不相同則游戲結(jié)束）

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

/*游戲結(jié)束判斷*/
function gameOver(){
    // 設(shè)置一個(gè)空格子計(jì)數(shù)器
    let count = 0;
    // 遍歷棋盤是否有空格子，如果有計(jì)數(shù)器就累加1
    for(let i = 1; i <= 16; i++){
        let piece_  = document.getElementById(i);
        if( piece_.innerHTML== ""){
            count++;
        }
    }
    // 判斷棋盤是否擺滿棋子
    if(count == 0){
        // 當(dāng)棋盤擺滿棋子時(shí)，遍歷所有棋子看其與相鄰的棋子數(shù)值是否相等，一旦有相等的計(jì)數(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;    
            }
        }
        // 當(dāng)遍歷所有棋子后與相鄰位置棋子數(shù)值都不相等，游戲結(jié)束
        if(count == 0){
            // 獲取當(dāng)前得分
            let score = document.getElementById("show_number").innerHTML;
            alert("瀟灑人生，極限挑戰(zhàn)。游戲結(jié)束！ 您的得分："+score+" 分");
            // 點(diǎn)擊確定按鈕后初始化游戲
            init();
        }
    }
}

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

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

完整項(xiàng)目訪問我的github倉庫

點(diǎn)擊此處體驗(yàn)我的2048小游戲
歡迎大家轉(zhuǎn)載此文章 但請注明出處 謝謝合作

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94503.html

相關(guān)文章

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

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

    sugarmo 評論0 收藏0

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

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

    JackJiang 評論0 收藏0

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

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

    xingpingz 評論0 收藏0

發(fā)表評論

0條評論

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