jquery之別踩白塊游戲的簡單實現(xiàn)

更新時間：2016年07月25日 08:46:38 投稿：jingxian

下面小編就為大家?guī)硪黄猨query之別踩白塊游戲的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧

前端學(xué)習(xí)要告一段落了，也沒機(jī)會寫什么像樣的東西，然后無意中想起某人以前給我玩了一下別踩白塊的游戲，手殘還被嘲諷了下，現(xiàn)在想起來覺得這游戲?qū)崿F(xiàn)起來也不難，于是上星期用jquery寫了一個別踩白塊的小游戲，就像當(dāng)初學(xué)python的時候一樣寫了一個2048。然后今天正好抽個時間寫個博客紀(jì)錄下，算是對前一段時間學(xué)習(xí)的總結(jié)，沒有玩過的可以去下一個原版的來玩一下，游戲很簡單，就是從不斷下落的方塊中點擊黑快，如果點擊到百塊或者有黑塊沒被點擊到，游戲就算結(jié)束。游戲?qū)崿F(xiàn)起來不難，都是一些小知識點。當(dāng)時寫的時候，腦袋有點糊，有一bug看了半天沒解決，后來第二天早上腦袋清醒的時一看就看出來，順便在這里提醒自己一定不要在腦袋不清醒的時候?qū)懘a。好了說了這么多先來看一下效果圖，這里別吐槽我的css樣式設(shè)計就好。。。

一、游戲html頁面

游戲的html界面非常簡單，分為4部分，

得分標(biāo)題欄，

游戲界面主題容器，開始的時候為一個div，然后用jquery動態(tài)生成黑白格子

開始暫停按鈕一欄

游戲結(jié)束時候顯示的模態(tài)框

下面是代碼部分

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
  <link href="../css/game.css" rel="stylesheet" type="text/css"> 
</head> 
 
<body> 
<div class="main"> 
  <h3>Score:<span id="score">0</span></h3> 
  <div id="content" class="content"> 
    <div id="inner"></div> 
  </div> 
  <div class="btn"> 
    <div class="container"> 
      <button id="begin">開始</button> 
      <button id="stop">暫停</button> 
    </div> 
  </div> 
 
  <div class="shadow hide"></div> 
  <div class="alert-box hide"> 
    <div class="game-over"> 
      <img style="opacity: 0.8" src="../pic/gg.jpg"> 
    </div> 
    <div class="btn"> 
      <button id="again">重新開始</button> 
      <button id="back">返回</button> 
    </div> 
  </div> 
</div> 
 
<script src="../js/jquery-1.12.4.js"></script> 
<script src="../js/game.js"></script> 
 
</body> 
</html>

二、css布局　　

寫完了html然后就是css，這里主要用到 absolute布局，然后需要注意的是就是游戲過程由于需要不停的生成一欄新div，所以div容器要設(shè)置overflow: hidden，這一點需要注意下，然后其他的知識點也就是absolute，relative如何布局，模態(tài)框如何實現(xiàn)并居中，都不難，下面看下代碼就好

*{ 
  margin: 0; 
  padding: 0; 
} 
 
.main{ 
  width: 808px; 
  margin: 50px auto; 
  background: gray; 
  min-height: 544px; 
  position: relative; 
} 
.content{ 
  width: 408px; 
  margin: 0 auto; 
  height:408px; 
  border: 2px solid green; 
  background-color: white; 
  position: relative; 
  top:0; 
  overflow: hidden; 
} 
#inner{ 
  position: relative; 
  top:-102px; 
} 
.item{ 
  height: 102px; 
} 
.item *{ 
  float: left; 
  height: 100px; 
  width: 100px; 
  background-color: white; 
  border: 1px solid black; 
} 
.black{ 
  background-color: black; 
} 
 
h3{ 
  text-align: center; 
  padding-top: 20px; 
  padding-bottom: 20px; 
} 
h3 span{ 
  color:brown; 
} 
.hide{ 
  display: none; 
} 
 
.shadow{ 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  right: 0; 
  top: 0; 
  background-color: gray; 
  opacity: 0.6; 
} 
.alert-box{ 
  position: absolute; 
  width: 300px; 
  height: 300px; 
  left: 50%; 
  top:50%; 
  margin-left: -150px; 
  margin-top: -150px; 
  background-color: white; 
} 
.alert-box .game-over{ 
  margin-left: 20px; 
  margin-top: 30px; 
} 
.alert-box .btn{ 
  width: 150px; 
  position: relative; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 20px; 
} 
.main .btn .container{ 
  width: 150px; 
  margin: 20px auto; 
} 
button{ 
  cursor: pointer; 
  border: 0; 
  display: inline-block; 
  width: 70px; 
  height: 30px; 
  line-height: 30px; 
  text-align: center; 
  background-color: cyan; 
}

三、jquery實現(xiàn)　

游戲最核心的部分就是jquery實現(xiàn)了，主要的功能如下

•游戲的初始化
•如何動態(tài)插入一行div和刪除一行div
•開始暫停按鈕的事件綁定
•游戲過程中點擊百塊和黑快的事件委托
•游戲如何移動以及如何得分
•如何自動增加白塊下落速度
•如何判定游戲結(jié)束

下面來看一下初始化代碼的實現(xiàn)，初始化之前寫了個函數(shù)，自動插入一行，并且在這一行4個div中某一個為隨機(jī)的黑塊供游戲中點擊，剩下3個白塊，怎么隨機(jī)生成，怎么動態(tài)創(chuàng)建div這里需要點小技巧，具體看下面。生成一行div的函數(shù)完成后只需在初始化函數(shù)里面調(diào)用4次即可

function insertDiv() { 
  var rand = Math.floor(Math.random() * 4);　　　　　　　　// 生成一個0到3 的隨機(jī)數(shù)，用來作為判斷生成黑塊的位置 
  $("#inner").prepend("<div class='item'></div>");  
  $.each([0, 1, 2, 3], function (k, v) { 
    if (v == rand) { 
      $("#inner .item").first().append("<div class='black col'></div>"); 
    } else { 
      $("#inner .item").first().append("<div class='col'></div>"); 
    } 
  }) 
} 
 
 
function init() {　　　　　　　　　　　　　　　　// 初始生成4*4的div 
  $.each([0, 1, 2, 3], function () { 
    insertDiv(); 
  }); 
}

初始化完成后，我們需要做的就是如何讓界面動起來，這里寫了一個函數(shù)，每次調(diào)用該函數(shù)的話，游戲內(nèi)容會自動向下移動幾px，然后將該函數(shù)傳給定時器，就可以不斷的向下滑動，不過這里需要注意，下落過程中，如果下落的距離超過一行后，需要重新插入一行，然后將超出的那一行刪除，而且需要將偏移的距離恢復(fù)到原來的位置，如果需要加速白塊下落的速度，只需將每次向下移動加大即可，游戲后面的自動加速也是基于此來做的。下面來看一下這部分的代碼

function move() { 
  var ctop = parseInt($("#inner").offset().top); 
  ctop += window.globalSpeed;　　　　　　　　　　　　// 自定義的全局變量， 每次下落偏移的距離 
  $("#inner").offset({top: ctop}); 
  if (ctop >= 114) { 
    insertDiv(); 
    $("#inner").offset({top: 12}); 　　　　　　 // 剛好移動一個item后在上移一個item 
    delDiv(); 
  } 
}

之后就是寫開始，暫停部分，這里主要是對計時器的使用，這里需要注意的是每次點擊的時候，都要先判斷定時器是否已經(jīng)清除，否則這里會有bug，下面來直接看一下代碼

function bindStart() { 
  $("#begin").mouseover(function () { 
    $(this).css("cursor", 'pointer'); 
  }).click(function () { 
    if(window.globalIsClearT1){　　 　　　　// 自定義的全局變量，看定時器是否清楚 
 
    }else { 
      clearInterval(window.globalT1); 　　//沒有清除的話，先清除，避免兩次按下開始按鈕 
    } 
    window.globalT1 = setInterval(move, 30); 
    window.globalStartClick = true;　　　　　　//全局變量，是否開始標(biāo)志位，只有開始了，才能點擊 
  }) 
} 
 
function bindStop() { 
  $("#stop").mouseover(function () { 
    $(this).css("cursor", 'pointer'); 
  }).click(function () { 
    clearInterval(window.globalT1); 
    window.globalStartClick = false; 
    window.globalIsClearT1 = true; 
  }) 
}

寫到這里，再就是看一下，每次點擊的時候如何操作，是否得分，還是點錯了游戲結(jié)束，下面來看一下代碼，界面上有4*4個格子，需要事件委托，來判斷是哪一個白塊被點擊，如果點擊的是黑快，將其變?yōu)榘讐K，并且加上一分即可，否則點錯的話，游戲就結(jié)束　

function bindClick() { 
  $("#inner").click(function (e) { 
    if (window.globalStartClick) { 
      var current = $(e.target); 
      if (current.hasClass("black")) { 
        current.removeClass("black"); 
        score(); 
      } else { 
        gameOver(); 
      } 
    } 
  })； 
}

下面來看一下如何計算得分的代碼，以及如何實現(xiàn)自動的加速，比較簡單就不多說了

function score() { 
  var score = parseInt($("#score").text()); 
  if(score%10 == 0){ 
    window.globalSpeed += 1;        //得到一定的分?jǐn)?shù)后就自動加速 
  } 
  $("#score").text(score + 1); 
}

最后來看一下，游戲結(jié)束的時候如何處理，游戲結(jié)束的話，先暫停游戲下落，然后彈出模態(tài)對話框，讓用戶選擇返回，還是重新來過，重新來過的話，分?jǐn)?shù)清零，游戲界面清空，然后初始化再在自動觸發(fā)開始按鈕，開始下一輪游戲，

function gameOver() { 
  //暫停游戲，顯示模態(tài)框 
  $("#stop").trigger('click'); 
  window.globalIsClearT1 = true; 
  $(".shadow").removeClass('hide').next().removeClass('hide'); 
 
  $("#again").click(function () { 
    clearInterval(window.globalT1); 
    $(".shadow").addClass('hide').next().addClass('hide'); 
    $("#score").text(0); 
    clearAll(); 
    init(); 
    $("#begin").trigger('click'); 
    // window.globalT1 = setInterval(move, 30) 
  });

到這里，基本整個游戲都算實現(xiàn)了，游戲不復(fù)雜，但是要完全運行起來，沒有bug也不是那么簡單，有興趣的也可以去寫寫，如果上面代碼有什么問題的話，可以向我提出來。

以上這篇jquery之別踩白塊游戲的簡單實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: