javascript
原生html小游戏,原生JS实现别踩白块小游戏（一）
對于前端開發(fā)人員來說，閑暇之余自己開發(fā)個(gè)小游戲打發(fā)時(shí)間，也是對自己基礎(chǔ)技術(shù)的一種應(yīng)用考驗(yàn)。那么別踩白塊小游戲，相信大家并不陌生，這個(gè)小游戲我們可以通過原生js來實(shí)現(xiàn)，即便是前端初學(xué)者也可以輕松完成。
下面我們就給大家分享一個(gè)原生js實(shí)現(xiàn)別踩白塊小游戲的方法。
代碼實(shí)例如下：
Title* {
margin: 0;
padding: 0;
}
.box {
margin: 50px auto 0 auto;
width: 400px;
height: auto;
border: solid 1px #222;
}
#cont {
width: 400px;
height: 600px;
position: relative;
overflow: hidden;
}
#go {
width: 100%;
height: 600px;
position: absolute;
top: 0;
font: 700 60px '微軟雅黑';
text-align: center;
z-index: 99;
}
#go span {
cursor: pointer;
background-color: #fff;
border-bottom: solid 1px #222;
}
#main {
width: 400px;
height: 600px;
position: relative;
top: -150px;
}
.row {
width: 400px;
height: 150px;
}
.row div {
width: 99px;
height: 149px;
border: solid 1px #222;
float: left;
border-top-width: 0;
border-left-width: 0;
cursor: pointer;
}
#count {
border-top: solid 1px #222;
width: 400px;
height: 50px;
font: 700 36px/50px '微軟雅黑';
text-align: center;
}
點(diǎn)擊開始
var main = document.getElementById('main')
go = document.getElementById('go')
count = document.getElementById('count');
cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];
function CDiv(classname) {
var Div = document.createElement('div')
index = Math.floor(Math.random() * 4)
Div.className = classname
for (var i = 0; i < 4; i++) {
var iDiv = document.createElement('div')
Div.appendChild(iDiv)
}
if (main.children.length == 0) {
main.appendChild(Div);
} else {
main.insertBefore(Div, main.children[0]);
}
Div.children[index].style.backgroundColor = cols[index];
Div.children[index].className = "i";
}
function move(obj) {
//默認(rèn)速度與計(jì)分
var speed = 5, num = 0;
obj.timer = setInterval(function () {
//速度
var step = parseInt(getComputedStyle(obj, null)['top']) + speed;
obj.style.top = step + 'px'
if (parseInt(getComputedStyle(obj, null)['top']) >= 0) {
CDiv('row');
obj.style.top = -150 + 'px';
}
if (obj.children.length == 6) {
for (var i = 0; i < 4; i++) {
if (obj.children[obj.children.length - 1].children[i].className == 'i') {
//游戲結(jié)束
obj.style.top = '-150px';
count.innerHTML = '游戲結(jié)束,最高得分: ' + num;
//關(guān)閉定時(shí)器
clearInterval(obj.timer);
//顯示開始游戲
go.children[0].innerHTML = '游戲結(jié)束';
go.style.display = "block";
}
}
obj.removeChild(obj.children[obj.children.length - 1]);
}
//點(diǎn)擊與計(jì)分
obj.onmousedown = function (event) {
//點(diǎn)擊的不是白盒子
// 兼容IE
event = event || window.event;
if ((event.target ? event.target : event.srcElement).className == 'i') {
//點(diǎn)擊后的盒子顏色
(event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";
//清除盒子標(biāo)記
(event.target ? event.target : event.srcElement).className = '';
//計(jì)分
num++;
//顯示得分
count.innerHTML = '當(dāng)前得分: ' + num;
}
else {
//游戲結(jié)束
obj.style.top = 0;
count.innerHTML = '游戲結(jié)束,最高得分: ' + num;
//關(guān)閉定時(shí)器
clearInterval(obj.timer);
//顯示開始游戲
go.children[0].innerHTML = '游戲結(jié)束';
go.style.display = "block";
}
//盒子加速
if (num % 10 == 0) {
speed++;
}
}
//松開觸發(fā)停止
obj.onmouseup = function (event) {
}
}, 20)
}
go.children[0].onclick = function () {
if (main.children.length) {
//暴力清楚main里面所有盒子
main.innerHTML = '';
}
//清空計(jì)分
count.innerHTML = '游戲開始';
//隱藏開始盒子
this.parentNode.style.display = "none";
move(main);
}
前臺效果如下圖：
當(dāng)我們點(diǎn)擊開始時(shí)，游戲開始。點(diǎn)擊有顏色的方塊即可得分，并且隨著分?jǐn)?shù)的增加，頁面方塊移動的速度也會加快。
點(diǎn)擊到白塊時(shí)，游戲結(jié)束。
本篇文章就是關(guān)于原生js實(shí)現(xiàn)別踩白塊小游戲的方法分享介紹，感興趣的朋友可以直接復(fù)制上述代碼，在本地進(jìn)行測試。那么在后期的文章中，會繼續(xù)為大家介紹別踩白塊小游戲具體的實(shí)現(xiàn)方法。
總結(jié)
以上是生活随笔為你收集整理的原生html小游戏,原生JS实现别踩白块小游戏（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 语音聊天室 html,聊天室 - HTM
- 下一篇： html中after伪类原理,css :