生活随笔
收集整理的這篇文章主要介紹了
别踩白块小游戏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用H5新特性實現別踩白塊小游戲。
功能分析：
1.游戲開始按鈕
2.每點中一個記一分
3.分數達到二十彈出鼓勵彈框
4.點擊錯誤則游戲結束
效果演示
看了效果有沒有急迫的心情呢？
代碼演示
body內容
<body
><h2
>本次得分
</h2
><h2 id
="score">0</h2
><div id
="main"><div id
="con"><div
class="row"><div
class="fang"></div
><div
class="fang one"></div
><div
class="fang"></div
><div
class="fang"></div
></div
><div
class="row"><div
class="fang"></div
><div
class="fang one"></div
><div
class="fang"></div
><div
class="fang"></div
></div
><div
class="row"><div
class="fang"></div
><div
class="fang"></div
><div
class="fang one"></div
><div
class="fang"></div
></div
><div
class="row"><div
class="fang one"></div
><div
class="fang"></div
><div
class="fang"></div
><div
class="fang"></div
></div
></div
></div
><div
class="start">開始游戲
</div
></body
>
CSS演示
<style type
="text/css">#score {text
-align
: center
;}h2
{text
-align
: center
;}div
{margin
: 0 auto;width
: 100px
;height
: 100px
;}#main {width
: 400px
;height
: 600px
;background
: blanchedalmond
;border
: 2px solid gray
;margin
: 0 auto;position
: relative
;overflow
: hidden
;}#con {width
: 100%;height
: 400px
;position
: relative
;top
: -100px
;border
-collapse
: collapse
;}.row
{height
: 100px
;width
: 100%;}.fang
{height
: 100px
;width
: 100px
;float: left
;}.one
{background
: blueviolet
;}.start
{margin
-top
: 20px
;width
: 150px
;height
: 50px
;border
-radius
: 10px
;background
: yellowgreen
;line
-height
: 50px
;text
-align
: center
;color
: #fff
;}</style
>
JavaScript內容
<script
>function $
(id
) {return document
.getElementById(id
);}var clock
= null
;var state
= 0;var speed
= 4;function
init() {for (var i
= 0; i
< 4; i
++) {createrow();}$
('main').onclick
= function(ev
) {ev
= ev
|| event
judge(ev
);}clock
= window
.setInterval('move()', 50);}function
judge(ev
) {if (state
== 3) {alert('請刷新此頁面，重新開始游戲')return;}if (ev
.target
.className
.indexOf('one') == -1) {fail();} else {ev
.target
.className
= 'fang';ev
.target
.parentNode
.pass
= 1;score();}}function
fail() {clearInterval(clock
);state
= 3;confirm('你的最終得分為' + parseInt($
('score').innerHTML
));}function
creatediv(className
) {var div
= document
.createElement('div');div
.className
= className
;return div
;}function
createrow() {var con
= $
('con');var row
= creatediv('row');var arr
= createcell();con
.appendChild(row
);for (var i
= 0; i
< 4; i
++) {row
.appendChild(creatediv(arr
[i
]));}if (con
.firstChild
== null
) {con
.appendChild(row
);} else {con
.insertBefore(row
, con
.firstChild
);}}function
createcell() {var temp
= ['fang', 'fang', 'fang', ];var i
= Math
.floor(Math
.random() * 4);temp
[i
] = 'fang one';return temp
;}function
move() {var con
= $
('con');var top
= parseInt(window
.getComputedStyle(con
, null
)['top']);if (speed
+ top
> 0) {top
= 0;} else {top
+= speed
;}con
.style
.top
= top
+ 'px';if (top
== 0) {createrow();con
.style
.top
= '-100px';delrow();} else if (top
== (-100 + speed
)) {var rows
= con
.childNodes
;if ((rows
.lenth
== 5) && (rows
[rows
.length
- 1].pass
!== 1)) {fail();}}}function
speedup() {speed
+= 2;if (speed
== 20) {alert('你真厲害，繼續加油呦！');}}function
delrow() {var con
= $
('con');if (con
.childNodes
.length
== 6) {con
.removeChild(con
.lastChild
);}}function
score() {var newscore
= parseInt($
('score').innerHTML
) + 1;$
('score').innerHTML
= newscore
;if (newscore
% 10 == 0) {speedup();}}document
.querySelector('.start').addEventListener('click', init
)</script
>
總結
以上是生活随笔為你收集整理的别踩白块小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
