原生html小游戏,原生JS实现别踩白块小游戏（一）

对于前端开发人员来说，闲暇之余自己开发个小游戏打发时间，也是对自己基础技术的一种应用考验。那么别踩白块小游戏，相信大家并不陌生，这个小游戏我们可以通过原生js来实现，即便是前端初学者也可以轻松完成。

下面我们就给大家分享一个原生js实现别踩白块小游戏的方法。

代码实例如下：

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;

}

点击开始

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

//默认速度与计分

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') {

//游戏结束

obj.style.top = '-150px';

count.innerHTML = '游戏结束,最高得分: ' + num;

//关闭定时器

clearInterval(obj.timer);

//显示开始游戏

go.children[0].innerHTML = '游戏结束';

go.style.display = "block";

}

}

obj.removeChild(obj.children[obj.children.length - 1]);

}

//点击与计分

obj.onmousedown = function (event) {

//点击的不是白盒子

// 兼容IE

event = event || window.event;

if ((event.target ? event.target : event.srcElement).className == 'i') {

//点击后的盒子颜色

(event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";

//清除盒子标记

(event.target ? event.target : event.srcElement).className = '';

//计分

num++;

//显示得分

count.innerHTML = '当前得分: ' + num;

}

else {

//游戏结束

obj.style.top = 0;

count.innerHTML = '游戏结束,最高得分: ' + num;

//关闭定时器

clearInterval(obj.timer);

//显示开始游戏

go.children[0].innerHTML = '游戏结束';

go.style.display = "block";

}

//盒子加速

if (num % 10 == 0) {

speed++;

}

}

//松开触发停止

obj.onmouseup = function (event) {

}

}, 20)

}

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

if (main.children.length) {

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

main.innerHTML = '';

}

//清空计分

count.innerHTML = '游戏开始';

//隐藏开始盒子

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

move(main);

}

前台效果如下图：

当我们点击开始时，游戏开始。点击有颜色的方块即可得分，并且随着分数的增加，页面方块移动的速度也会加快。

点击到白块时，游戏结束。

本篇文章就是关于原生js实现别踩白块小游戏的方法分享介绍，感兴趣的朋友可以直接复制上述代码，在本地进行测试。那么在后期的文章中，会继续为大家介绍别踩白块小游戏具体的实现方法。