javascript
javascript小游戏_javaScript小游戏——网页版别踩白块
一 項目簡介
主要知識點：JavaScript、HTML、CSS
這是一個主要用JS實現(xiàn)的網(wǎng)頁版小游戲，游戲規(guī)則很簡單，通過點擊不斷下落的黑塊來消滅它并獲取分?jǐn)?shù)，如果不幸黑塊掉落下來或點到了白色區(qū)域那么游戲就會終止。
游戲截圖如下：
二 游戲框架
整個游戲可分為以下幾個步驟實現(xiàn)：
1. HTML和CSS畫出靜態(tài)的游戲框架；
2. DOM結(jié)構(gòu)說明：
游戲元素使用嵌套的div元素來實現(xiàn)，是一個4*4的方格地圖：最外層容器main(一個) > 次外層容器container(一個) > 行容器row(四行) > 方塊cell(每行4塊)
3. JS邏輯：
1)圖形的繪制：用js來動態(tài)創(chuàng)建div元素，并逐級添加到上層節(jié)點當(dāng)中；
2)實現(xiàn)下落：通過動態(tài)增加包裹所有方塊的container容器的top的值來實現(xiàn)下落效果；
3)持續(xù)下落：動態(tài)在最上層創(chuàng)建一行方塊，同時刪除最下層一行方塊；隔一段時間調(diào)用一次；
4)用戶交互：用戶通過點擊事件，綁定到整個動畫中，通過改變屬性名來使黑塊轉(zhuǎn)變?yōu)榘讐K，實現(xiàn)視覺上的“消滅黑塊”；
5)加分規(guī)則：用戶成功點擊黑塊，則調(diào)用一次加分函數(shù)，并將分?jǐn)?shù)實時寫入頁面中；
6)犯規(guī)處理：A. 通過判斷方塊元素屬性名來判斷用戶是否點擊白塊從而終止游戲；B. 通過判斷最后下落的一行是否含有黑塊從而判斷是否應(yīng)該終止游戲；
7)游戲加成：當(dāng)分?jǐn)?shù)達(dá)到某個階段可通過增加下落的像素值的大小來加快下落速度從而增加游戲難度，增加趣味性；
8)結(jié)束游戲：犯規(guī)后，清除調(diào)用函數(shù)，來終止游戲運行。
三 完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>別踩白塊</title>
<style>
#main{ /*游戲背景板的樣式*/
width:400px;
height:400px;
background:white;
border:1px solid green;
margin:0 auto;
position:relative; /*position 屬性規(guī)定元素的定位類型。relative：生成相對定位的元素，相對于其正常位置進(jìn)行定位。*/
overflow:hidden;
} /*overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。hidden:：內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。*/
#container{ /*下落方塊所在的容器樣式*/
width:100%;
height:400px;
position:relative;
top:-100px; /*黑塊最開始不能出現(xiàn)在最下面，否則游戲直接結(jié)束，因此容器整體上移100px*/
}
.row{ /*一行容器的樣式*/
height:100px;
width:100%;
}
.cell{ /*單個方塊的樣式*/
height:100px;
width:100px;
float:left; /*float 屬性定義元素在哪個方向浮動*/
}
.black{ /*黑塊的樣式*/
background:black;
}
h1{
text-align:center;
}
p{
display:inline-block; /*display 屬性規(guī)定元素應(yīng)該生成的框的類型，inline-block為行內(nèi)塊元素。*/
}
</style>
</head>
<body>
<h1>Score: <p id="score">0</p></h1>
<div id="main">
<div id="container"></div>
</div>
<script>
var clock=null; //定時器操作句柄
var state=0; //定義游戲當(dāng)前狀態(tài)：0初始化，1進(jìn)行中，2暫停，3失敗
var speed=2; //方塊下落的速度，初始值為2像素
//初始化
function init(){
for(var i=0; i<4; i++){ //創(chuàng)建4行row
crow();
}
$('main').οnclick=function(ev){ //向main添加點擊事件
judge(ev); //調(diào)用判斷函數(shù)來判斷用戶的點擊行為是否合規(guī)，參數(shù)為事件對象
}
}
//start()啟動
function start(){
clock=window.setInterval('move()',30); //每30毫秒調(diào)用一次移動函數(shù)
//下落動畫
function move(){
var con=$('container'); //通過自定義函數(shù)$()找到container
var top=parseInt(window.getComputedStyle(con,null)['top']); //window.getComputedStyle(element, [pseudoElt]);方法給出應(yīng)用活動樣式表后的元素的所有CSS屬性的值，并解析這些值可能包含的任何基本計算。element用于獲取計算樣式的Element,pseudoElt(可選)指定一個要匹配的偽元素的字符串。必須對普通元素省略（或null）。返回的樣式是一個實時的 CSSStyleDeclaration 對象，當(dāng)元素的樣式更改時，它會自動更新本身。CSSStyleDeclaration 表示一個CSS屬性鍵值對的集合。此處初始值為-100
if(speed + top >0){ //當(dāng)最上面一行row走過頭了，無法與main上邊緣重合時
top=0; //直接將row的坐標(biāo)置為0
}else{
top += speed;//調(diào)節(jié)每次下降的像素，必須是100的約數(shù)，這樣才能移動若干次后剛好為100px，因為一個方塊為100px*100px，剛好能夠與main上下兩邊重合
}
con.style.top=top + 'px';
if(top==0){ //當(dāng)最上面一行row剛好落進(jìn)main內(nèi)
crow(); //調(diào)用函數(shù)在最上方插入一行row
con.style.top='-100px'; //并使其位于main上面隱藏的部分
drow(); //當(dāng)上下中間共有6行row時調(diào)用函數(shù)，刪除最下面一行row，避免游戲過程中堆積太多元素，給瀏覽器增加負(fù)擔(dān)
}else if(top==(-100+speed)){ //一輪剛好進(jìn)行第一次下落，此時最下面一行row剛好準(zhǔn)備和main的下邊緣觸碰
var rows=con.children; //ParentNode.children 是一個只讀屬性，返回 一個Node的子elements ，是一個動態(tài)更新的 HTMLCollection。
if((rows.length==5) && (rows[rows.length-1].pass !==1)){ //如果此時有5行row，并且最后一行未成功點擊黑塊
fail(); //游戲失敗
}
}
}
//加速
function speedup(){
speed +=2;
if(speed==20){
alert('Excellent!');
}
}
//游戲失敗
function fail(){
clearInterval(clock); //clearInterval() 方法可取消由 setInterval() 函數(shù)設(shè)定的定時執(zhí)行操作。
state=3; //另游戲狀態(tài)等于3，最開始定義的3為失敗
alert('Game Over!');
}
//計分
function score(){
var newscore=parseInt($('score').innerHTML)+1; //獲取score的innerHTML值并轉(zhuǎn)化為整數(shù)，再加一分
$('score').innerHTML=newscore; //增加后的分?jǐn)?shù)寫入score
if(newscore % 10 == 0){ //分?jǐn)?shù)每增加10分
speedup(); //游戲加速
}
}
//判斷玩家點擊事件是否需合規(guī)
function judge(ev){
if(state==3){ //上文設(shè)定游戲失敗時state為3，此處判斷游戲是否已經(jīng)結(jié)束
return;
}
if(ev.target.className.indexOf('black')==-1){ //如果點擊的元素的屬性名不含black，也就是點中了白塊
fail();
}else{
ev.target.className='cell'; //否則點中了黑塊，重寫屬性名，將其改為白塊
ev.target.parentNode.pass=1;//用js獲取DOM節(jié)點對象后，可以增加一個自定義屬性，這里的pass是自定義的，也就是說：當(dāng)點中黑塊的時候，黑塊所在的row的pass屬性值是1
score(); //加分
}
}
//創(chuàng)建行row
function crow(){
var con=$('container');
var row=cdiv('row'); //創(chuàng)建屬性名為row的div
var classes=createSn(); //一個row下面的屬性的數(shù)組
for(var i=0; i<4; i++){
row.appendChild(cdiv(classes[i])); //創(chuàng)建4個div添加給row，4個div的屬性名中隨機產(chǎn)生一個cell black，得到一個含有隨機位置黑塊的row
}
if(con.firstChild==null){ //如果con沒有子元素
con.appendChild(row); //那就添加row
}else{
con.insertBefore(row,con.firstChild); //否則將這個row插入到子元素前面
}
}
//刪除最后一行
function drow(){
var con=$('container');
if(con.childNodes.length==6){
con.removeChild(con.lastChild); //當(dāng)有6行row時刪除最后一行
}
}
//創(chuàng)建一個div，className是其類名
function cdiv(className){
var div=document.createElement('div');
div.className=className;
return div;
}
//返回一個數(shù)組，隨機其中一個單元，值為'cell black'，其余皆為'cell'
function createSn(){
var arr=['cell','cell','cell','cell'];
var i=Math.floor(Math.random()*4); //Math.random()隨機產(chǎn)生范圍為[0,1)之間的小數(shù)，Math.floor()向下取整，此處為0,1,2,3,
arr[i]='cell black';
return arr;
}
//按照id獲取對象，取代反復(fù)用到的document.getElementById()
function $(id){
return document.getElementById(id);
}
init();
start();
</script>
</body>
</html>
四 知識點整理
1. CSS：
-position:relative：position 屬性規(guī)定元素的定位類型。relative：生成相對定位的元素，相對于其正常位置進(jìn)行定位。
-overflow:hidden：overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。hidden:：內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
-float:left：float屬性定義元素在哪個方向浮動。
-display:inline-block：display屬性規(guī)定元素應(yīng)該生成的框的類型，inline-block為行內(nèi)塊元素。
2. JS：
-window.setInterval('move()',30);setInterval()方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。
-parseInt(window.getComputedStyle(con,null)['top'])：window.getComputedStyle(element, [pseudoElt])方法給出應(yīng)用活動樣式表后的元素的所有CSS屬性的值，并解析這些值可能包含的任何基本計算。element用于獲取計算樣式的Element,pseudoElt(可選)指定一個要匹配的偽元素的字符串。必須對普通元素省略（或null）。返回的樣式是一個實時的 CSSStyleDeclaration對象，當(dāng)元素的樣式更改時，它會自動更新本身。CSSStyleDeclaration表示一個CSS屬性鍵值對的集合。
-con.children：ParentNode.children 是一個只讀屬性，返回 一個Node的子elements，是一個動態(tài)更新的 HTMLCollection。
-ev.target.parentNode.pass=1：用js獲取DOM節(jié)點對象后，可以增加一個自定義屬性，這里的pass是自定義的，也就是說：當(dāng)點中黑塊的時候，黑塊所在的row的pass屬性值是1。
-Math.random()：隨機產(chǎn)生范圍為[0,1)之間的小數(shù)。
-Math.floor()：向下取整。
五 相關(guān)資源
剛開始是在實驗樓找的項目，看完之后有的地方不是很明白，百度的時候發(fā)現(xiàn)網(wǎng)易云課堂剛好有現(xiàn)成的課，就跟著老師看完敲了一邊，收獲還是蠻大的，畢竟之前學(xué)習(xí)方式基本是“光看不練”，這算是第一個完整敲完整理完的項目。
其實這個游戲還有很大的優(yōu)化空間，比如實驗樓提出的那幾個問題都挺有價值的，之后如果有空了會嘗試一下吧：）
1. 給這個游戲增加開始/暫停按鈕；
2. 用JQuery重寫一遍；
3. 最佳分?jǐn)?shù)記錄（可能需要用到H5新增的web存儲）
最后貼一下鏈接：
實驗樓：https://www.shiyanlou.com/courses/306
網(wǎng)易云課堂：http://study.163.com/course/courseMain.htm?courseId=652005
總結(jié)
以上是生活随笔為你收集整理的javascript小游戏_javaScript小游戏——网页版别踩白块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 内存测试软件大揭秘：为何aida64成为
- 下一篇： spring 扫描所有_从Spring的