jQuery實(shí)現(xiàn)別踩白塊兒網(wǎng)頁(yè)版小游戲

大致介紹

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)龍圩免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

終于結(jié)束了考試，放假回家了。這次的別踩白塊兒網(wǎng)頁(yè)版要比之前做的 jQuery編寫網(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層

◆最底下的一層是基本的樣式（可見的）

◆中間的層是最主要的，是一個(gè)4x3的二維數(shù)組，游戲中我們都是對(duì)這個(gè)二維數(shù)組進(jìn)行操作（不可見的）

◆最上面的一層也是一個(gè)4x3的二維數(shù)組，是用戶能最終看見的

我們通過(guò)最底下的一層顯示最基本的12個(gè)小方格，不同的顏色，每個(gè)格子對(duì)應(yīng)的中間的層有不同的值，最上面的一層負(fù)責(zé)顯示樣式

基本結(jié)構(gòu)與樣式

基本的結(jié)構(gòu)和樣式都挺簡(jiǎn)單，直接看代碼

結(jié)構(gòu)：

<body>
 <div id="header">
 <h2>別踩白塊兒</h2>
 <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 h2 {
 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;
 }

這里并沒有設(shè)置每個(gè)格子的位置，位置由js代碼來(lái)設(shè)置，以及第二層的二維數(shù)組、第三層的顯示層都由js來(lái)設(shè)置，這里和 jQuery編寫網(wǎng)頁(yè)版2048小游戲并沒有什么大的區(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;
}

初始化

游戲開始時(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開始游戲');
 $('#block-3-1').text('按K開始游戲');
 $('#block-3-2').text('按L開始游戲');

基本操作

我們通過(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ù)是在游戲開始后，將最下面一行的提示信息去掉

代碼：

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)，所以我們要從最下面開始遍歷二維數(shù)組，如果該格子是黑色的并且是最下面一行的，就只是簡(jiǎn)單的把該格子的顏色變回白色，如果該格子是黑色的并且是第一行至第三行的，這個(gè)格子變?yōu)榘咨?，并且它的正下方的一個(gè)格子變?yōu)楹谏?，最后，在第一行的隨機(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">重新開始</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編寫網(wǎng)頁(yè)版2048小游戲，就會(huì)覺得這個(gè)挺簡(jiǎn)單的，基本的思想和方法都大同小異，如果有任何的建議如果或者想看比較整齊的源碼或者視頻的可以QQ聯(lián)系我(免費(fèi))(找共同學(xué)習(xí)的伙伴)

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！

文章題目：jQuery實(shí)現(xiàn)別踩白塊兒網(wǎng)頁(yè)版小游戲
URL網(wǎng)址：http://m.rwnh.cn/article12/jdijgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

jQuery實(shí)現(xiàn)別踩白塊兒網(wǎng)頁(yè)版小游戲