對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，閑暇之余自己開(kāi)發(fā)個(gè)小游戲打發(fā)時(shí)間，也是對(duì)自己基礎(chǔ)技術(shù)的一種應(yīng)用考驗(yàn)。那么別踩白塊小游戲，相信大家并不陌生，這個(gè)小游戲我們可以通過(guò)原生js來(lái)實(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)擊開(kāi)始

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);

//顯示開(kāi)始游戲

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);

//顯示開(kāi)始游戲

go.children[0].innerHTML = '游戲結(jié)束';

go.style.display = "block";

}

//盒子加速

if (num % 10 == 0) {

speed++;

}

}

//松開(kāi)觸發(fā)停止

obj.onmouseup = function (event) {

}

}, 20)

}

go.children[0].onclick = function () {

if (main.children.length) {

//暴力清楚main里面所有盒子

main.innerHTML = '';

}

//清空計(jì)分

count.innerHTML = '游戲開(kāi)始';

//隱藏開(kāi)始盒子

this.parentNode.style.display = "none";

move(main);

}

前臺(tái)效果如下圖：

當(dāng)我們點(diǎn)擊開(kāi)始時(shí)，游戲開(kāi)始。點(diǎn)擊有顏色的方塊即可得分，并且隨著分?jǐn)?shù)的增加，頁(yè)面方塊移動(dòng)的速度也會(huì)加快。

點(diǎn)擊到白塊時(shí)，游戲結(jié)束。

本篇文章就是關(guān)于原生js實(shí)現(xiàn)別踩白塊小游戲的方法分享介紹，感興趣的朋友可以直接復(fù)制上述代碼，在本地進(jìn)行測(cè)試。那么在后期的文章中，會(huì)繼續(xù)為大家介紹別踩白塊小游戲具體的實(shí)現(xiàn)方法。

總結(jié)

以上是生活随笔為你收集整理的原生html小游戏,原生JS实现别踩白块小游戏（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。