轉載請注明出處http://www.cnblogs.com/Wxtrkbc/p/5687112.html
前端學習要告一段落了，也沒機會寫什么像樣的東西，然后無意中想起某人以前給我玩了一下別踩白塊的游戲，手殘還被嘲諷了下，現在想起來覺得這游戲實現起來也不難，於是上星期用jquery寫了一個別踩白塊的小游戲，就像當初學python的時候一樣寫了一個2048。然后今天正好抽個時間寫個博客紀錄下，算是對前一段時間學習的總結，沒有玩過的可以去下一個原版的來玩一下，游戲很簡單，就是從不斷下落的方塊中點擊黑快，如果點擊到百塊或者有黑塊沒被點擊到，游戲就算結束。游戲實現起來不難，都是一些小知識點。當時寫的時候，腦袋有點糊，有一bug看了半天沒解決，后來第二天早上腦袋清醒的時一看就看出來，順便在這里提醒自己一定不要在腦袋不清醒的時候寫代碼。好了說了這么多先來看一下效果圖，這里別吐槽我的css樣式設計就好。。。
一、游戲html頁面
游戲的html界面非常簡單，分為4部分，
- 得分標題欄，
- 游戲界面主題容器，開始的時候為一個div，然后用jquery動態生成黑白格子
- 開始暫停按鈕一欄
- 游戲結束時候顯示的模態框
下面是代碼部分
<!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容器要設置overflow: hidden，這一點需要注意下，然后其他的知識點也就是absolute，relative如何布局，模態框如何實現並居中，都不難，下面看下代碼就好
*{
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實現
游戲最核心的部分就是jquery實現了，主要的功能如下
- 游戲的初始化
- 如何動態插入一行div和刪除一行div
- 開始暫停按鈕的事件綁定
- 游戲過程中點擊百塊和黑快的事件委托
- 游戲如何移動以及如何得分
- 如何自動增加白塊下落速度
- 如何判定游戲結束
下面來看一下初始化代碼的實現，初始化之前寫了個函數，自動插入一行，並且在這一行4個div中某一個為隨機的黑塊供游戲中點擊，剩下3個白塊，怎么隨機生成，怎么動態創建div這里需要點小技巧，具體看下面。生成一行div的函數完成后只需在初始化函數里面調用4次即可
function insertDiv() {
var rand = Math.floor(Math.random() * 4); // 生成一個0到3 的隨機數，用來作為判斷生成黑塊的位置
$("#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();
});
}
初始化完成后，我們需要做的就是如何讓界面動起來，這里寫了一個函數，每次調用該函數的話，游戲內容會自動向下移動幾px，然后將該函數傳給定時器，就可以不斷的向下滑動，不過這里需要注意，下落過程中，如果下落的距離超過一行后，需要重新插入一行，然后將超出的那一行刪除，而且需要將偏移的距離恢復到原來的位置，如果需要加速白塊下落的速度，只需將每次向下移動加大即可，游戲后面的自動加速也是基於此來做的。下面來看一下這部分的代碼
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();
}
}
之后就是寫開始，暫停部分，這里主要是對計時器的使用，這里需要注意的是每次點擊的時候，都要先判斷定時器是否已經清除，否則這里會有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; //全局變量，是否開始標志位，只有開始了，才能點擊
})
}
function bindStop() {
$("#stop").mouseover(function () {
$(this).css("cursor", 'pointer');
}).click(function () {
clearInterval(window.globalT1);
window.globalStartClick = false;
window.globalIsClearT1 = true;
})
}
寫到這里，再就是看一下，每次點擊的時候如何操作，是否得分，還是點錯了游戲結束，下面來看一下代碼，界面上有4*4個格子，需要事件委托，來判斷是哪一個白塊被點擊，如果點擊的是黑快，將其變為白塊，並且加上一分即可，否則點錯的話，游戲就結束
function bindClick() {
$("#inner").click(function (e) {
if (window.globalStartClick) {
var current = $(e.target);
if (current.hasClass("black")) {
current.removeClass("black");
score();
} else {
gameOver();
}
}
})；
}
下面來看一下如何計算得分的代碼，以及如何實現自動的加速，比較簡單就不多說了
function score() {
var score = parseInt($("#score").text());
if(score%10 == 0){
window.globalSpeed += 1; //得到一定的分數后就自動加速
}
$("#score").text(score + 1);
}
最后來看一下，游戲結束的時候如何處理，游戲結束的話，先暫停游戲下落，然后彈出模態對話框，讓用戶選擇返回，還是重新來過，重新來過的話，分數清零，游戲界面清空，然后初始化再在自動觸發開始按鈕，開始下一輪游戲，
function gameOver() {
//暫停游戲，顯示模態框
$("#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)
});
到這里，基本整個游戲都算實現了，游戲不復雜，但是要完全運行起來，沒有bug也不是那么簡單，有興趣的也可以去寫寫，如果上面代碼有什么問題的話，可以向我提出來。