您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)使用JavaScript編寫一個(gè)2048小游戲,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
1.可以使網(wǎng)頁(yè)具有交互性,例如響應(yīng)用戶點(diǎn)擊,給用戶提供更好的體驗(yàn)。 2.可以處理表單,檢驗(yàn)用戶的輸入,并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作,動(dòng)態(tài)的創(chuàng)建頁(yè)面。 4使用JavaScript可以通過(guò)設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。
首先2048小游戲離不開16個(gè)格子,我們通過(guò)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ù)組 來(lái)接收這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)聽(tīng)事件:
上 的keyCode: 38
下 的keyCode: 40
左 的keyCode:37
右 的keyCode: 39
沒(méi)按一次
①調(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();
看完上述內(nèi)容,你們對(duì)使用JavaScript編寫一個(gè)2048小游戲有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。