原生js實現2048小遊戲
阿新 • • 發佈:2021-03-11
2048小遊戲,供大家參考,具體內容如下
首先2048小遊戲離不開16個格子,我們通過html和css建立好對應的標籤和樣式,然後開始js邏輯
<div id="box">//一個盒子裡面16個小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>
設定對應的樣式: (僅供參考)
#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]');
然後建立一個二維的陣列 來接收這16個小格子div的dom物件
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 軸
這樣就便於我們後面的移動操作
現在我們寫一個在該16各種裡隨機產生一個隨機數2和4 填入一個空格子裡,我們後面在呼叫!
function sj(){ //產生隨機數 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{ //如果該格子不為空我們在執行函式 sj(); } }
第二個就是要判斷遊戲是否 結束時的函式:當格子你所有的值都不為空的時候結束遊戲!(後面在呼叫)
function js(){ //遊戲是否結束 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("遊戲結束"); for(var i=0 ;i < 4; i ++){ for(var j=0 ;j < 4; j++){ arr[i][j] = null; } } } }
然後我們分別寫如按下上下左右鍵執行的函式:
以按上鍵為例子:
①如果上面一個數為空,下面一個不為空上下值交換;
②如果上面一個為數字且和下面的相等,那麼上面數 * 2 下面的改值為空。其他情況不變。
function downtop(){ //按上 執行的函式 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(); // 如果條件滿足就執行 // 不滿足了就不會進入到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{ } } } }
同理只需要改變 (一些引數) 就完成另外3個鍵的邏輯:
function downbottom(){ for(var i=3 ;i > 0 ; i--){ for(var j=0 ;j &程式設計客棧lt; 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][NUmtUqnj].innerHTML ; arr[i-1][j].innerHTML = ""; } } } } function downleft(){ for(var i=0 ;i <www.cppcns.com 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 !="" &http://www.cppcns.com&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 = http://www.cppcns.com"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;
}
}
}
}
然後整個視窗設定鍵盤監聽事件:
上 的keyCode: 38
下 的keyCode: 40
左 的keyCode:37
右 的keyCode: 39
沒按一次
①呼叫 對應方向的函式
②呼叫 隨機引數一個數的函式
③呼叫 判斷遊戲是否結束的函式
④呼叫 不同的值不同元素的函式
⑤遊戲開始呼叫2次(預設有2個)
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(); //開局自動有預設的2個數 sj();
就完成了簡單的2048小遊戲!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。