基于JS的别踩白块游戏

本文主要是介绍基于JS的别踩白块游戏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

想做一个小项目，但是知识有限，那么来做一个基于html，css以及js的小游戏。该小游戏的所以小方块都是基于盒子来实现的，打开时的界面比较简单，用了定位，隐藏了盒子，点击”开始游戏“，”白格“将开始向下移动，此后再每一行上开始出现一个“黑格”，这个黑格是随机的，对应列上按下对应的键即可消除黑格。
界面如下：
在这里插入图片描述

运行时界面如下：
在这里插入图片描述
代码：
html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>别踩白块</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head><body><h2>score</h2><h2 id="score">0</h2><div id="main"><div id="con"></div></div><div class="btn"><button class="start" onclick="start()">开始游戏</button></div>
</body></html>

css：

#main {width: 408px;height: 408px;background: white;border: 2px solid gray;margin: 0 auto;overflow: hidden;
}h2 {text-align: center;
}#con {width: 100%;height: 400px;position: relative;
/*隐藏所有格子*/top: -408px; border-collapse:collapse;
}
/* 行 */
.row{height: 100px;width: 100%;
}
/* 一个块 */
.cell{height: 100px;width: 100px;float: left;border: 1px solid;
}.black {background: black;
}.btn {width: 100%;text-align: center;
}.start {margin: 20px auto;width: 150px;height: 50px;border-radius: 10px;background: yellowgreen;line-height: 50px;color: #fff;
}

js：

function $(id) {return document.getElementById(id);
}function creatediv(className) {var div = document.createElement('div');div.className = className;return div;
}
var speed = 6;
var clock = null;
var flag = false
// 点击开始游戏按钮
function start() {if(!flag) {init()}else {alert('游戏已经开始，无需再次点击');}
}
// 初始化init
function init() {flag = true;for(var i = 0; i < 4; i++) {createrow();}// 添加onclick事件$('main').onclick = function (ev) {ev = ev || event;judge(ev);}clock = window.setInterval('move()', 30);
}
// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {var con = $('con');var row = creatediv('row');var arr = creatcell();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 creatcell() {var temp = ['cell', 'cell', 'cell', 'cell'];var i = Math.floor(Math.random() * 4);temp[i] = 'cell black';return temp;
}
function judge(ev) {if (ev.target.className.indexOf('black') == -1 && ev.target.className.indexOf('cell') !== -1) {ev.target.parentNode.pass1 = 1; //定义属性pass，表示此行row的白块已经被点击}if (ev.target.className.indexOf('black') !== -1) {//点击目标元素 类名中包含 black 说明是黑块ev.target.className = 'cell';ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击score();}
}
// 让黑块动起来
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';over();if(top == 0) {createrow();con.style.top = '-102px';delrow();}
}
function over() {var rows = con.children;if ((rows.length == 5) && (rows[rows.length - 1].pass !== 1)) {fail();}for(let i = 0; i < rows.length; i++) {if(rows[i].pass1 == 1) {fail();}}
}function fail() {clearInterval(clock);flag = false;confirm('你最终的得分是' + parseInt($('score').innerHTML));var con = $('con');con.innerHTML = '';$('score').innerHTML = 0;con.style.top = '-408px';
}//删除某行
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) {//当分数是10 的倍数时使用加速函数，越来越快speedup();}
}
// 加速函数
function speedup () {speed += 2;if (speed == 20) {alert('你超神了');}
}