大致介紹
終于結(jié)束了考試，放假回家了。這次的別踩白塊兒網(wǎng)頁(yè)版要比之前做的 jQuery編寫(xiě)網(wǎng)頁(yè)版2048小游戲 要簡(jiǎn)單一點(diǎn)，基本的思路都差不多。
這篇博客并不是詳細(xì)的講解，只是大致介紹函數(shù)的作用，其中實(shí)現(xiàn)的細(xì)節(jié)注釋中有解釋，網(wǎng)上的這個(gè)源碼有點(diǎn)亂，如果想看比較整齊的源碼或者視頻的可以QQ聯(lián)系我(免費(fèi))(找共同學(xué)習(xí)的伙伴)
思路
這個(gè)小游戲可以抽象化分為3層
◆最底下的一層是基本的樣式（可見(jiàn)的）
◆中間的層是最主要的，是一個(gè)4x3的二維數(shù)組，游戲中我們都是對(duì)這個(gè)二維數(shù)組進(jìn)行操作（不可見(jiàn)的）
◆最上面的一層也是一個(gè)4x3的二維數(shù)組，是用戶能最終看見(jiàn)的
我們通過(guò)最底下的一層顯示最基本的12個(gè)小方格，不同的顏色，每個(gè)格子對(duì)應(yīng)的中間的層有不同的值，最上面的一層負(fù)責(zé)顯示樣式
基本結(jié)構(gòu)與樣式
基本的結(jié)構(gòu)和樣式都挺簡(jiǎn)單，直接看代碼
結(jié)構(gòu)：
<body> <div id="header"> <h1>別踩白塊兒</h1> <div id="timer" >0.0000</div> </div> <div id="container"> <div class="grid" id="grid-0-0"></div> <div class="grid" id="grid-0-1"></div> <div class="grid" id="grid-0-2"></div> <div class="grid" id="grid-1-0"></div> <div class="grid" id="grid-1-1"></div> <div class="grid" id="grid-1-2"></div> <div class="grid" id="grid-2-0"></div> <div class="grid" id="grid-2-1"></div> <div class="grid" id="grid-2-2"></div> <div class="grid" id="grid-3-0"></div> <div class="grid" id="grid-3-1"></div> <div class="grid" id="grid-3-2"></div> </div></body>
樣式：
body{ background-color: #008694; font: 12px/20px "黑體" ,arial;}#header { display: block; margin: 0 auto; width: 500px; text-align: center;}#header h1 { font-family: Arial; font-size: 40px; font-weight: bold;}#timer { z-index: 4; font-size: 24px; color: #fa3c3c; font-weight: 700; text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)}#container{ width: 302px; height: 402px; margin: 50px auto; background-color: #55d769; border: 5px solid #000; position: relative;}.grid { width: 100px; height: 100px; background-color: #fff; border: 1px solid #000; position: absolute;}.block { width: 100px; height: 100px; border: 1px solid #000; font-family: Arial; font-weight: bold; font-size: 20px; color: #fff; text-align: center; position: absolute;}.coBlock{ background-color: #000;}.gameover { display: block; margin: 0 auto; width: 300px; text-align: center; vertical-align: middle; position: absolute;}.gameover p { font-family: Arial; font-size: 50px; color: white; margin: 50px auto; margin-top: 150px; } .gameover span { font-family: Arial; font-size: 50px; color: white; margin: 50px auto; } .restartGame { display: block; margin: 20px auto; width: 180px; padding: 10px 10px; background-color: #8f7a66; font-family: Arial; font-size: 30px; color: white; border-radius: 10px; text-decoration: none; } .restartGame:hover { background-color: #9f8b77; }這里并沒(méi)有設(shè)置每個(gè)格子的位置，位置由js代碼來(lái)設(shè)置，以及第二層的二維數(shù)組、第三層的顯示層都由js來(lái)設(shè)置，這里和 jQuery編寫(xiě)網(wǎng)頁(yè)版2048小游戲 并沒(méi)有什么大的區(qū)別
代碼：
function init(){ timerRan = 0.000; keyDown = true; for(var i=0;i<4;i++){ board[i] = []; for(var j=0;j<3;j++){ board[i][j] = []; var grid = $('#grid-'+ i +'-'+ j); grid.css({ 'top':getPosTop(i,j), 'left':getPosLeft(i,j) }); $('#container').append('<div class="block" id="block-'+ i +'-'+ j +'"></div>'); var block = $('#block-'+ i +'-'+ j); block.css({ 'top':getPosTop(i,j), 'left':getPosLeft(i,j) }); board[i][j] = 0; } }function getPosTop(i,j){ return i*100;}function getPosLeft(i,j){ return j*100;}初始化
游戲開(kāi)始時(shí)，要在每一行隨機(jī)的位置顯示一個(gè)黑色的方塊，并且在最下面的那一行的黑色方塊上要有提示信息
代碼：
for(var i=0;i<4;i++){ var randj = parseInt(Math.floor(Math.random() * 3)); if(i >0 && board[i-1][randj] == 1){ randj = parseInt(Math.floor(Math.random() * 3)); } $('#block-'+ i +'-'+ randj).addClass('coBlock'); board[i][randj] = 1; } $('#block-3-0').text('按J開(kāi)始游戲'); $('#block-3-1').text('按K開(kāi)始游戲'); $('#block-3-2').text('按L開(kāi)始游戲');基本操作
我們通過(guò)switch循環(huán)，來(lái)根據(jù)用戶不同的輸入進(jìn)行不同的操作
代碼：
$(document).keydown(function(event) { switch(event.keyCode){ case 74: if(board[3][0] == 1 && keyDown){ timeRan(); clearText(); moveDown(); }else{ isgameover(); } break; case 75: if(board[3][1] == 1 && keyDown){ timeRan(); clearText(); moveDown(); }else{ isgameover(); } break; case 76: if(board[3][2] == 1 && keyDown){ timeRan(); clearText(); moveDown(); }else{ isgameover(); } break; }});在這里設(shè)置 keyDown 這個(gè)全局變量的目的是為了防止用戶在游戲結(jié)束時(shí)，繼續(xù)按鍵。
timeRan()這個(gè)函數(shù)是顯示游戲時(shí)間的
代碼：
function timeRan(){ clearTimeout(timer); timerRan += 0.001; $('#timer').text(timerRan.toString().slice(0,5)); timer = setTimeout(function(){ timeRan(); },1);}clearText()這個(gè)函數(shù)是在游戲開(kāi)始后，將最下面一行的提示信息去掉
代碼：
function clearText(){ $("#block-3-0").text(""); $("#block-3-1").text(""); $("#block-3-2").text("");}moveDown()這個(gè)函數(shù)是方塊移動(dòng)的最主要函數(shù)，因?yàn)榉綁K要向下移動(dòng)，所以我們要從最下面開(kāi)始遍歷二維數(shù)組，如果該格子是黑色的并且是最下面一行的，就只是簡(jiǎn)單的把該格子的顏色變回白色，如果該格子是黑色的并且是第一行至第三行的，這個(gè)格子變?yōu)榘咨⑶宜恼路降囊粋€(gè)格子變?yōu)楹谏詈螅诘谝恍械碾S機(jī)位置上顯示一個(gè)黑色的格子
代碼：
function moveDown(){ for(var i=3;i>=0;i--){ for(var j=2;j>=0;j--){ if(board[i][j] == 1){ if(i == 3){ $('#block-'+ i +'-'+ j).removeClass('coBlock'); board[i][j] = 0; }else{ $('#block-'+ i +'-'+ j).removeClass('coBlock'); board[i][j] = 0; $('#block-'+ (i+1) +'-'+ j).addClass('coBlock'); board[i+1][j] = 1; } } } } var randj = parseInt(Math.floor(Math.random() * 3)); $('#block-0-'+ randj).addClass('coBlock'); board[0][randj] = 1;}isgameover()是顯示游戲結(jié)束樣式的函數(shù)，比較簡(jiǎn)單
代碼：
function isgameover(){ keyDown = false; clearTimeout(timer); $('#container').append('<div id="gameover" class="gameover"><p>本次用時(shí)</p><span>'+ timerRan.toString().slice(0,5) +'</span><a href="javascript:restartGame()" class="restartGame">重新開(kāi)始</a></div>'); var gameover = $("#gameover"); gameover.css("width", "300px"); gameover.css("height", "400px"); gameover.css("background-color", "rgba(0, 0, 0, 0.5)");}function restartGame(){ $('#timer').text('0.000'); $('#gameover').remove(); $('.block').remove(); init();}總結(jié)
這個(gè)小游戲，如果學(xué)會(huì)了之前的 jQuery編寫(xiě)網(wǎng)頁(yè)版2048小游戲，就會(huì)覺(jué)得這個(gè)挺簡(jiǎn)單的，基本的思想和方法都大同小異，如果有任何的建議如果或者想看比較整齊的源碼或者視頻的可以QQ聯(lián)系我(免費(fèi))(找共同學(xué)習(xí)的伙伴)
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
