2048小游戲，供大家參考，具體內(nèi)容如下

首先2048小游戲離不開16個(gè)格子，我們通過html和css創(chuàng)建好對(duì)應(yīng)的標(biāo)簽和樣式，然后開始js邏輯

<div id='box'>//一個(gè)盒子里面16個(gè)小div <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div> <div id='son'></div></div>

設(shè)置對(duì)應(yīng)的樣式： (僅供參考)

#box{ width: 450px; height: 450px; background-color: brown; display: flex; flex-wrap: wrap; justify-content: space-evenly; border: 1px solid #000; margin: 100px auto; border-radius: 10px; } div>div{ margin-top: 5px; width: 100px; height: 100px; border-radius: 5px; background-color: bisque; text-align: center; line-height: 100px; font-size: 40px; }

效果如下：

然后真正的js部分真正開始了先使用 css選擇器 獲取所有小格子的div

var divs = document.querySelectorAll(’[id ==son]’);

然后創(chuàng)建一個(gè)二維的數(shù)組 來接收這16個(gè)小格子div的dom對(duì)象

var arr = [[],[],[],[]];var a = 0;for(var i=0 ;i < 4; i ++){ for(var j=0 ;j < 4; j++){ arr[i][j] = divs[a]; a++ ; }}

這就形成了:i 和 j 軸

這樣就便于我們后面的移動(dòng)操作

現(xiàn)在我們寫一個(gè)在該16各種里隨機(jī)產(chǎn)生一個(gè)隨機(jī)數(shù)2和4 填入一個(gè)空格子里，我們后面在調(diào)用！

function sj(){ //產(chǎn)生隨機(jī)數(shù) var a = Math.floor(Math.random() * 4); var b = Math.floor(Math.random() * 4); if(arr[a][b].innerHTML == ''){ if(Math.random()>0.5){ arr[a][b].innerHTML = 2; }else{ arr[a][b].innerHTML = 4; } }else{ //如果該格子不為空我們?cè)趫?zhí)行函數(shù) sj(); }}

第二個(gè)就是要判斷游戲是否 結(jié)束時(shí)的函數(shù)：當(dāng)格子你所有的值都不為空的時(shí)候結(jié)束游戲！（后面在調(diào)用）

function js(){ //游戲是否結(jié)束 var bool = true; for(var i=0 ;i < 4; i ++){ for(var j=0 ;j < 4; j++){ if(arr[i][j].innerHTML == ''){ bool = false; }else{ } } } if(bool){ alert('游戲結(jié)束'); for(var i=0 ;i < 4; i ++){ for(var j=0 ;j < 4; j++){ arr[i][j] = null; } } }}

然后我們分別寫如按下上下左右鍵執(zhí)行的函數(shù)：

以按上鍵為例子：

①如果上面一個(gè)數(shù)為空，下面一個(gè)不為空上下值交換；②如果上面一個(gè)為數(shù)字且和下面的相等，那么上面數(shù) * 2 下面的改值為空。其他情況不變。

function downtop(){ //按上 執(zhí)行的函數(shù) for(var i=0 ;i < 4; i ++){ for(var j=0 ;j < 4; j++){ if(arr[i][j].innerHTML == '' && i<3 &&arr[i+1][j].innerHTML != ''){ arr[i][j].innerHTML = arr[i+1][j].innerHTML ; arr[i+1][j].innerHTML = ''; downtop(); // 如果條件滿足就執(zhí)行 // 不滿足了就不會(huì)進(jìn)入到if里了 }else if(i<3&&arr[i][j].innerHTML !='' && arr[i+1][j].innerHTML !='' &&arr[i][j].innerHTML == arr[i+1][j].innerHTML){ arr[i][j].innerHTML = 2*arr[i+1][j].innerHTML ; arr[i+1][j].innerHTML = ''; }else{ } } }}

同理只需要改變 （一些參數(shù)） 就完成另外3個(gè)鍵的邏輯：

function downbottom(){ for(var i=3 ;i > 0 ; i--){ for(var j=0 ;j < 4; j++){ if(arr[i-1][j].innerHTML != '' && i>0 &&arr[i][j].innerHTML == '' ){ arr[i][j].innerHTML = arr[i-1][j].innerHTML ; arr[i-1][j].innerHTML = ''; downbottom(); } else if(arr[i-1][j].innerHTML !=''&& arr[i][j].innerHTML !='' && i>0 &&arr[i-1][j].innerHTML == arr[i][j].innerHTML){ arr[i][j].innerHTML = 2*arr[i-1][j].innerHTML ; arr[i-1][j].innerHTML = ''; } } }}function downleft(){ for(var i=0 ;i < 4; i ++){ for(var j=0 ;j < 4; j++){ if(arr[i][j].innerHTML == '' && j<3 &&arr[i][j+1].innerHTML != ''){ arr[i][j].innerHTML = arr[i][j+1].innerHTML ; arr[i][j+1].innerHTML = ''; downleft(); }else if( j<3&& arr[i][j].innerHTML !=''&& arr[i][j+1].innerHTML !='' &&arr[i][j].innerHTML == arr[i][j+1].innerHTML){ arr[i][j].innerHTML = 2*arr[i][j+1].innerHTML ; arr[i][j+1].innerHTML = ''; } } }}function downright(){ for(var i=0 ;i < 4; i ++){ for(var j = 3 ;j > 0; j--){ if(j > 0 && arr[i][j].innerHTML == ''&&arr[i][j-1].innerHTML != ''){ arr[i][j].innerHTML = arr[i][j-1].innerHTML ; arr[i][j-1].innerHTML = ''; downright(); }else if( j>0 && arr[i][j].innerHTML !=''&& arr[i][j-1].innerHTML !='' &&arr[i][j].innerHTML == arr[i][j-1].innerHTML){ arr[i][j].innerHTML = 2*arr[i][j-1].innerHTML ; arr[i][j-1].innerHTML = ''; } } } }

為不同的值添加不同的背景顏色：(可要可不要)

function color(){for(var i=0 ;i < 4; i ++){ for(var j=0 ;j < 4; j++){ switch(arr[i][j].innerHTML){ case '': arr[i][j].style.backgroundColor = 'bisque';break; case '2': arr[i][j].style.backgroundColor = 'red';break; case '4': arr[i][j].style.backgroundColor = 'orange';break; case '8': arr[i][j].style.backgroundColor = 'yellow';break; case '16': arr[i][j].style.backgroundColor = 'green';break; case '32': arr[i][j].style.backgroundColor = 'blue';break; case '64': arr[i][j].style.backgroundColor = '#000';break; case '128': arr[i][j].style.backgroundColor = 'aqua';break; case '256': arr[i][j].style.backgroundColor = 'pink';break; } }}}

然后整個(gè)窗口設(shè)置鍵盤監(jiān)聽事件：

上 的keyCode： 38下 的keyCode： 40左 的keyCode：37右 的keyCode： 39沒按一次①調(diào)用 對(duì)應(yīng)方向的函數(shù)②調(diào)用 隨機(jī)參數(shù)一個(gè)數(shù)的函數(shù)③調(diào)用 判斷游戲是否結(jié)束的函數(shù)④調(diào)用 不同的值不同元素的函數(shù)⑤游戲開始調(diào)用2次（默認(rèn)有2個(gè)）

window.onkeydown = function(e){ switch(e.keyCode){ case 37: downleft(); sj(); color(); js(); break; //左 case 38: downtop(); sj(); color(); js(); break; //上 case 39: downright(); sj(); color(); js(); break; //右 case 40: downbottom(); sj(); color(); js(); break; //下 }}sj(); //開局自動(dòng)有默認(rèn)的2個(gè)數(shù)sj();

就完成了簡(jiǎn)單的2048小游戲！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。