简单游戏别踩小白块html,js实现一款简单踩白块小游戏(曾经很火)

效果图如下所示：

html

游戏开始

当前分数:0

js

// 先找到主体内容的盒子,添加到这个盒子中去

var zhuti = document.getElementsByClassName('zhuti')[0];

//找到计分 , 每点击一次, 就让分数++;

var jifen = document.getElementsByClassName('jifen')[0];

// 找到游戏开始按钮, 点击让它影藏,结束时显示并把里面的文字改变为'游戏结束'

var start = document.getElementsByClassName('start')[0];

// 找到遮罩层, 结束游戏的时候显示

var zhezhaoceng = document.getElementsByClassName('zhezhaoceng')[0];

// addbox('row')

//动态创建盒子的函数

function addbox(classname) {

// 思路:

// 1: 先封装一个函数动态的创建盒子;

// 2: 一个盒子里装了四个小盒子;

// 3: 随机一个数,让这四个小盒子的某一个的颜色改为黑色 ;

// 4: 给这个小盒子添加类名,设置样式;

// 5: 随机数作为下标, 给这个随机数的下标的小盒子添加一个类名;

// 6: 添加到'zhuti'里面去,显示在页面上(如果zhuti里面有内容了,就要添加到所有内容的最前面,如果没有,接直接添加)

// 生成随机数作为四个盒子的下标

var index = Math.floor(Math.random() * 4)

// console.log(index);

//创建一个盒子;

var bigdiv = document.createElement('div');

bigdiv.className = classname;

// 再依次创建四个小盒子;添加到刚刚创建的大盒子中;

for (var i = 0; i < 4; i++) {

var smallbox = document.createElement('div')

bigdiv.appendChild(smallbox)

}

// 判断主体里面有没有盒子 ;

// 如果已经存在盒子,就要添加到它们的最前面

// 如果没有,就可以直接添加到页面上

if (zhuti.children.length == 0) {

zhuti.appendChild(bigdiv)

} else {

zhuti.insertBefore(bigdiv, zhuti.children[0])

}

// 给随机下标的盒子添加样式的背景色为黑色;

bigdiv.children[index].style.backgroundColor = 'black';

// 再给这个随机的盒子添加一点东西,可以用来做判断

bigdiv.children[index].className = 'random_box';

}

//计分与控制速度的函数

function move(obj) {

// 封装一个计时器移动的方法, 让主体内的内容动起来;

// 思路:

// 1: 先获取元素的最终样式,距离顶部的top值;

// 2: 声明两个变量; 一个用来改变元素距离顶部的top值; 一个用来计分数;

var num = 0;

var sudu = 5;

// 创建一个计时器让它缓动显示到页面

//在样式里面就设置了top值为-150px；

//通过计时器让它的top值缓动到页面， 当它的top值等于0的时候，又让它的top值变为-150px；

//就调用创建元素的方法再创建一个盒子，让它插在这个显示在页面上的盒子的前面

obj.timeID = setInterval(function () {

var nowtop = parseInt(getComputedStyle(obj)['top']) + sudu;

// console.log(nowtop);

obj.style.top = nowtop + 'px';

if (parseInt(getComputedStyle(obj)['top']) >= 0) {

addbox('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 == 'random_box') {

jifen.innerHTML = '当前最高得分:' + num;

start.style.display = 'block'

start.innerHTML = '小朋友, 游戏结束';

start.style.display = 'block';

start.style.backgroundColor = 'green';

start.style.height = 60 + 'px';

start.style.fontSize = 30 + 'px';

zhezhaoceng.style.display = 'block';

clearInterval(obj.timeID)

}

}

// 让主体的内容的长度永远等于6,如果不等于6,就会出现按下第一个带'random_box'类名的小盒子,之后就不会再回到以上的判断里面了;

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

}

// console.log(obj.children.length);

// 判断用户点击的时候:条件:如果没有点中指定的盒子(类名为'random_box')的盒子,就结束游戏;不然就计分num++;

obj.onmousedown = function (event) {

// 根据事件对象里面的事件源来进行判断;

//当它的事件源的名字等于'random_box'的时候;

if (event.target.className == 'random_box') {

// 让这个事件源的的背景色变为红色;

event.target.style.backgroundColor = 'red';

//当用户点击了事件源时,把他的类名清空, 不然只变了颜色,到了第6个,判断类名还是'random_box'时, 就会结束游戏;

event.target.className = '';

// 计分

num++;

// 显示在当前得分的盒子里

jifen.innerHTML = '当前得分' + num;

} else {

// 结束游戏

clearInterval(obj.timeID)

start.style.display = 'block';

start.style.backgroundColor = 'green';

start.style.height = 60 + 'px';

start.style.fontSize = 30 + 'px';

start.innerHTML = '游戏结束!再来一局';

jifen.innerHTML = '最终得分' + num;

// 让遮罩层显示

zhezhaoceng.style.display = 'block';

}

// 加速(判断分数到了多少时,让主体下降的top值变大)

if (num % 5 == 0) {

sudu++;

}

}

}, 20)

}

// 当它点击开始按钮的时候,再调用函数;运行起来;

start.onclick = function () {

//如果事重新来一局,那就先把页面上已经创建的盒子先清除;

if (zhuti.children.length != 0) {

zhuti.innerHTML = ''

}

// 让遮罩层隐藏

zhezhaoceng.style.display = 'none';

// 让开始的按钮影藏

this.style.display = 'none';

jifen.innerHTML = '当前得分:0'

move(zhuti)

}

css

.bigbox {

width: 400px;

height: auto;

border: 1px solid #2d2d2d;

margin: 100px auto 0 auto;

}

.gamequyu {

width: 100%;

height: 600px;

position: relative;

overflow: hidden;

background-color: #fefefe;

/* background: url("./dog.png") no-repeat; */

background-size: 100%;

}

.start {

position: absolute;

width: 400px;

height: 50px;

color: white;

text-align: center;

line-height: 50px;

background-color: brown;

font-size: 30px;

cursor: pointer;

z-index: 9999;

}

.zhuti {

width: 100%;

height: 600px;

position: absolute;

top: -150px;

}

.jifen {

width: 400px;

height: 50px;

font-size: 30px;

text-align: center;

line-height: 50px;

color: white;

margin: 0 auto;

background-color: brown;

}

.row {

width: 400px;

height: 150px;

}

.row div {

width: 100px;

height: 150px;

border: 1px solid #343434;

border-top-width: 0;

border-left-width: 0;

float: left;

cursor: pointer;

box-sizing: border-box;

}

.zhezhaoceng {

width: 100%;

height: 100%;

position: absolute;

z-index: 999;

display: none;

}

总结

以上所述是小编给大家介绍的js实现一款简单踩白块小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！