jQuery實現(xiàn)別踩白塊兒網(wǎng)頁版小游戲
大致介紹
終于結(jié)束了考試，放假回家了。這次的別踩白塊兒網(wǎng)頁版要比之前做的 jQuery編寫網(wǎng)頁版2048小游戲 要簡單一點，基本的思路都差不多。
這篇博客并不是詳細的講解，只是大致介紹函數(shù)的作用，其中實現(xiàn)的細節(jié)注釋中有解釋，網(wǎng)上的這個源碼有點亂，如果想看比較整齊的源碼或者視頻的可以QQ聯(lián)系我(免費)(找共同學(xué)習(xí)的伙伴)
思路
這個小游戲可以抽象化分為3層
◆最底下的一層是基本的樣式（可見的）
◆中間的層是最主要的，是一個4x3的二維數(shù)組，游戲中我們都是對這個二維數(shù)組進行操作（不可見的）
◆最上面的一層也是一個4x3的二維數(shù)組，是用戶能最終看見的
我們通過最底下的一層顯示最基本的12個小方格，不同的顏色，每個格子對應(yīng)的中間的層有不同的值，最上面的一層負責(zé)顯示樣式
基本結(jié)構(gòu)與樣式
基本的結(jié)構(gòu)和樣式都挺簡單，直接看代碼
結(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;
}
這里并沒有設(shè)置每個格子的位置，位置由js代碼來設(shè)置，以及第二層的二維數(shù)組、第三層的顯示層都由js來設(shè)置，這里和 jQuery編寫網(wǎng)頁版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;
}
初始化
游戲開始時，要在每一行隨機的位置顯示一個黑色的方塊，并且在最下面的那一行的黑色方塊上要有提示信息
代碼：
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開始游戲');
基本操作
我們通過switch循環(huán)，來根據(jù)用戶不同的輸入進行不同的操作
代碼：
$(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 這個全局變量的目的是為了防止用戶在游戲結(jié)束時，繼續(xù)按鍵。
timeRan()這個函數(shù)是顯示游戲時間的
代碼：
function timeRan(){
clearTimeout(timer);
timerRan += 0.001;
$('#timer').text(timerRan.toString().slice(0,5));
timer = setTimeout(function(){
timeRan();
},1);
}
clearText()這個函數(shù)是在游戲開始后，將最下面一行的提示信息去掉
代碼：
function clearText(){
$("#block-3-0").text("");
$("#block-3-1").text("");
$("#block-3-2").text("");
}
moveDown()這個函數(shù)是方塊移動的最主要函數(shù)，因為方塊要向下移動，所以我們要從最下面開始遍歷二維數(shù)組，如果該格子是黑色的并且是最下面一行的，就只是簡單的把該格子的顏色變回白色，如果該格子是黑色的并且是第一行至第三行的，這個格子變?yōu)榘咨⑶宜恼路降囊粋€格子變?yōu)楹谏?，最后，在第一行的隨機位置上顯示一個黑色的格子
代碼：
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ù)，比較簡單
代碼：
function isgameover(){
keyDown = false;
clearTimeout(timer);
$('#container').append('<div id="gameover" class="gameover"><p>本次用時</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é)
這個小游戲，如果學(xué)會了之前的 jQuery編寫網(wǎng)頁版2048小游戲，就會覺得這個挺簡單的，基本的思想和方法都大同小異，如果有任何的建議如果或者想看比較整齊的源碼或者視頻的可以QQ聯(lián)系我(免費)(找共同學(xué)習(xí)的伙伴)
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了jquery與js實現(xiàn)全選功能的區(qū)別,需要的朋友可以參考下2017-06-06
操作select下拉框的jquery插件，以后再涉及select時，利用這個插件就簡單多了。2009-08-08
jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單的方法,實例分析了jQuery操作css及setTimeout等實現(xiàn)導(dǎo)航菜單的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
javascript loadScript異步加載腳本示例講解
本文講解了javascript異步加載腳本并觸發(fā)回調(diào)函數(shù)的方法，在加載遠程數(shù)據(jù)的時候可以用到，下面提供代碼示例和源碼2013-11-11
jQuery過濾HTML標簽并高亮顯示關(guān)鍵字的方法
這篇文章主要介紹了jQuery過濾HTML標簽并高亮顯示關(guān)鍵字的方法,實例分析了jquery遍歷html標簽并進行替換的相關(guān)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了jQuery多選框選擇數(shù)量限制方法，最多選擇 三項 的上限已滿, 其他選項將會變?yōu)椴豢蛇x2017-02-02
很多網(wǎng)站的首頁都有廣告輪播，今天閑來看了一網(wǎng)站的首頁廣告輪播方式，是通過 jQuery的blockSlide插件實現(xiàn)的，然后自己測試了一下，很好。2010-11-11
jquery簡單瀑布流實現(xiàn)原理及ie8下測試代碼
可以將分頁獲取的內(nèi)容依次填入四個div中，瀑布流的分頁可以以多頁（比如5頁）為單位二次分頁，這樣可以減少后臺算法的復(fù)雜度;測試環(huán)境：ie8 ff13.0.1 chrome22有興趣的朋友可以了解下2013-01-01
jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效
這篇文章主要介紹了jQuery實現(xiàn)仿Alipay支付寶首頁全屏焦點圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
jQuery基于$.ajax設(shè)置移動端click超時處理方法
這篇文章主要介紹了jQuery基于$.ajax設(shè)置移動端click超時處理方法,分析了click事件與touchstart事件的原理與處理技巧,需要的朋友可以參考下2016-05-05