原生js實現(xiàn)2048小游戲

更新時間：2021年03月09日 08:03:50 作者：一個21歲的老同志

這篇文章主要為大家詳細介紹了原生js實現(xiàn)2048小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

首先2048小游戲離不開16個格子，我們通過html和css創(chuàng)建好對應(yīng)的標(biāo)簽和樣式，然后開始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>

設(shè)置對應(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)建一個二維的數(shù)組來接收這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 軸

這樣就便于我們后面的移動操作

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

function sj(){ //產(chǎn)生隨機數(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{ //如果該格子不為空我們在執(zhí)行函數(shù)
 sj();
 }
}

第二個就是要判斷游戲是否結(jié)束時的函數(shù)：當(dāng)格子你所有的值都不為空的時候結(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ù)：

以按上鍵為例子：

①如果上面一個數(shù)為空，下面一個不為空上下值交換；
②如果上面一個為數(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í)行
  // 不滿足了就不會進入到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個鍵的邏輯：

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; 
 }
 
 
 }
}

}

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

上的keyCode： 38
下的keyCode： 40
左的keyCode：37
右的keyCode： 39
沒按一次
①調(diào)用對應(yīng)方向的函數(shù)
②調(diào)用隨機參數(shù)一個數(shù)的函數(shù)
③調(diào)用判斷游戲是否結(jié)束的函數(shù)
④調(diào)用不同的值不同元素的函數(shù)
⑤游戲開始調(diào)用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個數(shù)
sj();

就完成了簡單的2048小游戲！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: