欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)別踩白塊兒小游戲程序

 更新時(shí)間：2015年11月22日 09:37:55   投稿：hebedich  
我們先看到的未開始的頁面黑色和白色方塊是隨機(jī)生成的，完了這么多把沒有發(fā)現(xiàn)時(shí)固定不變的。點(diǎn)擊一次方塊，程序需要判斷是黑色還是白色的。如果是黑色的，當(dāng)然程序也是實(shí)現(xiàn)了一次自減，在動畫中是實(shí)現(xiàn)一次下移的，下移的時(shí)候點(diǎn)擊的方塊到黃顏色的區(qū)域會變成灰色

最近有朋友找我用JS幫忙仿做一個(gè)別踩白塊的小游戲程序，但他給的源代碼較麻煩，而且沒有注釋，理解起來很無力，我就以自己的想法自己做了這個(gè)小游戲，主要是應(yīng)用JS對DOM和數(shù)組的操作。

程序思路：如圖：將游戲區(qū)域的CSS設(shè)置為相對定位、溢出隱藏;兩塊“游戲板”上分別排布著24塊方格，黑色每行隨機(jī)產(chǎn)生一個(gè)，“游戲板”向下滾動并交替顯示，將每個(gè)操作板的黑塊位置存入數(shù)組，每次點(diǎn)擊時(shí)將數(shù)組pop出來進(jìn)行比對（我覺得亮點(diǎn)在這……）。

這里是游戲的GitHub地址，大家可以到里點(diǎn)擊中部菜單最右邊的的Download ZIP按鈕下載到桌面一試，HTML和JS，無需服務(wù)器。

下載地址

以下是具體實(shí)現(xiàn)，關(guān)鍵部分有注釋。

HTML部分:

<!DOCTYPE html>

<html>

<head><title>別踩白塊</title></head>

<body>

<div id="gameZone"><div id="boardb" style="position: absolute;top: 0px;"></div></div>//初始化一個(gè)boardb,使ab同時(shí)存在

</body>

</html>

CSS部分：

復(fù)制代碼 代碼如下:
*{margin: 0px;padding: 0px;box-sizing: border-box;}  //簡單的reset一下,并用box-sizing設(shè)置盒子尺寸將邊框也計(jì)算進(jìn)去,便于后面計(jì)算小方塊位置

#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //游戲區(qū)域，多兩個(gè)像素是為了除去邊框外還有足夠的300*600的空間

.square{width: 75px;height: 100px;float: left;border: 1px solid black;}

.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//每個(gè)小方塊為75*100，并且設(shè)置黑色小方塊的背景色。

JS部分：

 這里分函數(shù)介紹：

全局變量初始化

var loc=600;//黑塊落地失敗判定

var count=0;//初始化擊中黑塊總數(shù)

var locArr=[];//初始化游戲板上黑塊位置的

var order=(function(){

　　　　var ord="A";

　　　　return function(){

　　　　if(ord=='boarda')ord='boardb';

　　　　else ord='boarda';

　　　　return ord;

}

})()

//用閉包函數(shù)使每次創(chuàng)建的游戲板的ID為boarda與boardb，其實(shí)用一個(gè)全局變量也行，不過為了有點(diǎn)逼格。。。

每次點(diǎn)擊判定結(jié)果的函數(shù)

function judge(){

　　　　var num=this.id.substr(3)//獲取元素的ID號

　　　　if(num!=locArr.pop()){ //與位置數(shù)組pop出的對比

　　　　　　　　clearTimeout(timer);

　　　　　　　　alert("你的得分為："+count+"分！");

　　　　　　　　return; //失敗清除定時(shí)器，結(jié)算分?jǐn)?shù)。

　　　　}else{

　　　　　　　　loc+=100; 

　　　　　　　　this.style.background="silver";

　　　　　　　　count+=1;//成功將落地標(biāo)志加方格的高度，將方格背景色改變一下，擊中數(shù)+1

　　　　}

　　　　if(count!=0&&count%15==0){

　　　　　　　　clearTimeout(timer);

　　　　　　　　newtimer=50-count/15*5;

　　　　　　　　timer=setInterval('fall()',newtimer);

　　　　}//每擊中15個(gè)后將速度加快一點(diǎn)，這個(gè)式子可自行定義。

}

產(chǎn)生大框中小黑框位置的隨機(jī)數(shù)，每次創(chuàng)建游戲板時(shí)調(diào)用此函數(shù)，根據(jù)產(chǎn)生數(shù)定義小黑塊的位置

function generateRand(){

　　　　var numArr=[];

　　　　for(var j=0;j<6;j++){

　　　　　　　　var num=Math.floor(Math.random()*4)+j*4;

　　　　　　　　numArr.push(num);

　　　　}

　　　　return numArr;

}

每次調(diào)用在游戲區(qū)域的上方生成一個(gè)待往下滾動的游戲板，并將其黑色的部分的數(shù)字PUSH進(jìn)locArr中

function drawBoard(){

　　　　var temArr=generateRand();//這里應(yīng)用一個(gè)臨時(shí)的位置數(shù)組，為了防止兩塊游戲板之間的位置沖突。

　　　　locArr=temArr.concat(locArr);//將臨時(shí)數(shù)組相連到全局位置數(shù)組中

　　　　var board=document.createElement('div');

　　　　board.setAttribute('id',order());

　　　　board.style.position="absolute";

　　　　board.style.top='-600px';

　　　　for(var i=0;i<24;i++){

　　　　　　　　var ele=document.createElement('div');

　　　　　　　　ele.setAttribute('id',"ele"+i);

　　　　　　　　if(temArr.indexOf(i)>-1){  //判斷當(dāng)前創(chuàng)建的小方塊的ID序列是否屬于臨時(shí)位置數(shù)組

　　　　　　　　　　　　ele.setAttribute('class','squareBlack')

　　　　　　　　}else{

　　　　　　　　　　　　ele.setAttribute('class','square');

　　　　　　　　}

　　　　　　　　ele.addEventListener('click',judge,false); //給每一個(gè)小方格添加點(diǎn)擊判定函數(shù)judge

　　　　　　　　board.appendChild(ele);

　　　　}

　　　　var gameZone=document.getElementById('gameZone');

　　　　gameZone.appendChild(board);

}

找到腳本中存在的兩個(gè)游戲板，使其往下滾動

function fall(){

　　　　gameZone=document.getElementById('gameZone');

　　　　var boarda=document.getElementById('boarda');//因?yàn)閍b兩個(gè)游戲板全局一直存在，所以不需要定義找不到時(shí)的邏輯

　　　　var anowtop=parseInt(boarda.style.top);//因?yàn)楂@取到的top位置是xxxpx類型，所以用一個(gè)parseInt()將其轉(zhuǎn)換為整數(shù)便于處理。

　　　　if(anowtop==595){ //這里數(shù)目為595而不是600是因?yàn)樵谶@一幀刪除后，下一幀正好600px，剛好使兩塊游戲板銜接完好。

　　　　　　　　gameZone.removeChild(boarda);

　　　　　　　　drawBoard();//刪除游戲區(qū)域的游戲板，并在最上方新生成一個(gè)。

　　　　}

　　　　anowtop+=5;

　　　　boarda.style.top=anowtop+"px";

　　　　var boardb=document.getElementById('boardb');

　　　　var bnowtop=parseInt(boardb.style.top);

　　　　if(bnowtop==595){

　　　　　　　　gameZone.removeChild(boardb);

　　　　　　　　drawBoard();

　　　　}

　　　　bnowtop+=5;

　　　　boardb.style.top=bnowtop+"px";

　　　　loc-=5;

　　　　if(loc==0){

　　　　　　　　clearTimeout(timer);

　　　　　　　　alert("你的得分為："+count+"分！");

　　　　　　　　return;

　　　　} //每一幀將落地判定減5，當(dāng)落地判定為0時(shí)表示落地，結(jié)算分?jǐn)?shù)。

}

將主體調(diào)用寫在window.onload函數(shù)里，使得頁面的游戲區(qū)域加載完成后再調(diào)用函數(shù)。

window.onload=function(){

　　　　drawBoard();

　　　　fall();

　　　　var timer=setInterval('fall()',50);

}

游戲擴(kuò)展:

增加頁面UI：因?yàn)橐婚_始的HTML特別簡單，所以UI也很好修改，設(shè)置按鈕，點(diǎn)擊觸發(fā)開始函數(shù)。

改變游戲難度：修改setInterval的值，也可以對judge函數(shù)內(nèi)的間隔數(shù)目進(jìn)行修改，或?qū)⑾侣浼铀俚谋磉_(dá)式優(yōu)化一下。

增加比分排行等：用ajax連接服務(wù)器，在游戲結(jié)束后將結(jié)果寫入數(shù)據(jù)庫，并引用數(shù)據(jù)中的排行榜。

改為街機(jī)模式：去除定時(shí)，修改judge函數(shù)，使其每次點(diǎn)擊游戲板下落一個(gè)小方格的高度。設(shè)置總數(shù)，開始計(jì)時(shí)，結(jié)束計(jì)時(shí)。

相關(guān)文章

  • LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法

    LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法

    今天小編就為大家分享一篇LayUi使用switch開關(guān),動態(tài)的去控制它是否被啟用的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理詳解

    JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理詳解

    這篇文章主要介紹了JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理的知識，文章內(nèi)容非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • js中for in的用法示例解析

    js中for in的用法示例解析

    使用js的朋友對其中for in的并不陌生吧，下面用示例為大家介紹下其具體使用方法
    2013-12-12
  • 原生js實(shí)現(xiàn)簡單的模態(tài)框示例

    原生js實(shí)現(xiàn)簡單的模態(tài)框示例

    下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)簡單的模態(tài)框示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • 兼容IE FF Opera的javascript最短的拖動代碼

    兼容IE FF Opera的javascript最短的拖動代碼

    關(guān)于拖動的代碼太多了要么復(fù)雜要么不兼容,在這就不多說了. 這里提供個(gè)簡潔的。
    2008-01-01
  • 詳解vue-cli+es6引入es5寫的js(兩種方法)

    詳解vue-cli+es6引入es5寫的js(兩種方法)

    本文通過兩種方法給大家介紹vue-cli+es6引入es5寫的js，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2019-04-04
  • JS實(shí)現(xiàn)的在線調(diào)色板實(shí)例(附demo源碼下載)

    JS實(shí)現(xiàn)的在線調(diào)色板實(shí)例(附demo源碼下載)

    這篇文章主要介紹了JS實(shí)現(xiàn)的在線調(diào)色板,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動態(tài)改變調(diào)色板顏色的功能,涉及JavaScript針對頁面元素屬性的動態(tài)操作與計(jì)算技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2016-03-03
  • 微信小程序文章詳情頁跳轉(zhuǎn)案例詳解

    微信小程序文章詳情頁跳轉(zhuǎn)案例詳解

    這篇文章主要介紹了微信小程序文章詳情頁跳轉(zhuǎn)案例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-07-07
  • JS動態(tài)增刪表格行的方法

    JS動態(tài)增刪表格行的方法

    這篇文章主要介紹了JS動態(tài)增刪表格行的方法,涉及JavaScript針對表格元素動態(tài)操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2016-03-03
  • 微信小程序?qū)崿F(xiàn)2048小游戲的詳細(xì)過程

    微信小程序?qū)崿F(xiàn)2048小游戲的詳細(xì)過程

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)2048小游戲的相關(guān)資料,文中將實(shí)現(xiàn)的代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2021-09-09

最新評論