介绍

属于简化版别踩白块，代码相对较为简单易学，主要涉及通过 javascript 操作元素节点的增删以及属性节点（class）的操作。

页面布局

可以用 div+css 布局来实现别踩白块的静态效果展示，直接上 HTML 代码，我来简要说下 HTML 思路，将主界面分解成一个 4x4 的大矩形格子，每一个方块代表其中一个小的矩形格，其中每一行的四个白块中有一个黑块，每一行中黑块位于哪一列是随机生成的，但是我们这里现在是静态页面就自己确定了，然后通过 css 控制样式。

创建 index.html 文件，并输入以下代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>别踩白块</title><link rel="stylesheet" href="css/index.css" /></head><body><div id="main"><div id="con"><div class="row"><div class="cell"></div>/*白块*/<div class="cell black"></div>/*黑块*/<div class="cell"></div><div class="cell"></div></div><div class="row"><div class="cell"></div><div class="cell black"></div><div class="cell"></div><div class="cell"></div></div><div class="row"><div class="cell"></div><div class="cell"></div><div class="cell black"></div><div class="cell"></div></div><div class="row"><div class="cell black"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div></div></div></body><script src="js/index.js"></script>
</html>

添加样式

下面是 css 代码，这里有一个要注意的地方，我将 div#con 块级元素向上提了 100 px，这样在游戏的开始就出现了最底一行的空白，隐藏最上面那行，为什么要这样呢，继续往下看就知道了。设置黑白块的样式，为 js 部分动态插入黑白块做准备。

创建 css/index.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: rgb(54, 74, 129) 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;
}

如果以上部分你都能够理解并且对应着代码实现的话，那么我们看到的应该是一个空格子，我们设置 id 为 con 的 div 的 top 属性为 0 px: #con {top: 0px;}，这样我们就可以看见：

是不是很像别踩白块的界面了呢，我们已经成功了一大步，然后就是通过 js 来实现动态的插入黑块或白块，以及操作。

游戏初始化

根据前面的 HTML 部分我们可以知道，每个

就代表一个白块，

就代表一个黑块，每点击一个黑块消失其实是删除了一个

然后从上面添加一个新的

所以我们首先要通过 js 来控制

的创造和生成（记得删除在编写静态页面时候指定生成的 4 个 div.row）。具体方法如下：

删除之前写的 4 个 div.row，将 index.html 文件改为以下代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>别踩白块</title><link rel="stylesheet" href="css/index.css" /></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><script src="js/index.js"></script>
</html>

对游戏进行初始化，在 js/index.js 文件中写入以下代码：

// 创建div, className是其类名
function creatediv(className) {var div = document.createElement("div");div.className = className;return div;
}// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {var con = $("con");var row = creatediv("row"); //创建div className=rowvar arr = creatcell(); //定义div cell的类名,其中一个为cell blackcon.appendChild(row); // 添加row为con的子节点for (var i = 0; i < 4; i++) {row.appendChild(creatediv(arr[i])); //添加row的子节点 cell}if (con.firstChild == null) {con.appendChild(row);} else {con.insertBefore(row, con.firstChild);}
}//删除div#con的子节点中最后那个<div class="row">
function delrow() {var con = $("con");if (con.childNodes.length == 6) {con.removeChild(con.lastChild);}
}// 创建一个类名的数组，其中一个为cell black, 其余为cell
function creatcell() {var temp = ["cell", "cell", "cell", "cell"];var i = Math.floor(Math.random() * 4); //随机产生黑块的位置 Math.random()函数参数 0~1的随机数temp[i] = "cell black";return temp;
}

让黑块动起来

在可以通过 js 来创造和销毁 div 后，我们就要让黑块动起来，这个时候我们就用到了之前 css 提到的设定

隐藏了一行的

，我们通过 js 的 DOM 操作使其向下方移动，并设置定时器每 30 毫秒移动一次，这样就实现了黑块的平滑移动，在黑块移动的同时，我们要判断黑块是否已经触底，触底则游戏失败，停止调用 move()，触底后调用函数 fail() 游戏失败，具体方法如下：

//让黑块动起来
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"; //不断移动top值，使它动起来over();if (top == 0) {createrow();con.style.top = "-102px";delrow();}
}// 加速函数
function speedup() {speed += 2;if (speed == 20) {alert("你超神了");}
}// 判断游戏是否结束function over() {var rows = con.childNodes;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";
}

点击黑块事件

让黑块动起来之后呢，我们就来考虑怎么判断用户有没有点击到黑块呢，同时用户若点击到黑块，我们要让所在那一行消失，那么我们需要一个 judge 方法，具体如下：

// 判断是否点击黑块、白块
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();}
}

其实程序写到这里，几个核心的功能点都已经实现了，是不是感觉很简单呢。剩下来的就是将这些方法组合起来，组成完整的逻辑关系，在我给出的源码里添加有一个记分器记录用户分数的功能，同时设置加速方法，使黑块的移动越来越快等等。有兴趣的的同学可以尝试着添加事件按钮，使这个游戏更接近 APP 版本。

完整的 js 代码

// 工具封装
// 根据id来获取元素
function $(id) {return document.getElementById(id);
}// 创建div, className是其类名
function creatediv(className) {var div = document.createElement("div");div.className = className;return div;
}
var clock = null;
var state = 0;
var speed = 6;
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);};// 定时器 每30毫秒调用一次move()clock = window.setInterval("move()", 30);
}// 判断是否点击黑块、白块
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 over() {var rows = con.childNodes;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";
}// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {var con = $("con");var row = creatediv("row"); //创建div className=rowvar arr = creatcell(); //定义div cell的类名,其中一个为cell blackcon.appendChild(row); // 添加row为con的子节点for (var i = 0; i < 4; i++) {row.appendChild(creatediv(arr[i])); //添加row的子节点 cell}if (con.firstChild == null) {con.appendChild(row);} else {con.insertBefore(row, con.firstChild);}
}// 创建一个类名的数组，其中一个为cell black, 其余为cell
function creatcell() {var temp = ["cell", "cell", "cell", "cell"];var i = Math.floor(Math.random() * 4); //随机产生黑块的位置 Math.random()函数参数 0~1的随机数temp[i] = "cell black";return temp;
}//让黑块动起来
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"; //不断移动top值，使它动起来over();if (top == 0) {createrow();con.style.top = "-102px";delrow();}
}// 加速函数
function speedup() {speed += 2;if (speed == 20) {alert("你超神了");}
}//删除某行
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();}
}

制作别踩白块网页小游戏相关推荐

JS高级-分享一个别踩白块的小游戏（源码）
"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风." 本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究, ...
C语言实现《别碰白块》小游戏！全部代码+思路注释
今天我们将用C语言实现一个小球跳跃躲避方块的游戏. 就像闯关游戏一样,小球闯关类游戏是休闲游戏的一种,玩家在游戏中需要控制各种不同的小球展开不同的挑战,尽情的闯过重重的关卡,努力的操作小球躲避障碍物以 ...
前端《别踩白块儿》小游戏源码分享
源码样式查看源码领取方式 1.微信打开"扫一扫" 更多源码特效尽在公众号 2. 微信搜索"渔夫小猿"
java别踩白块_jquery之别踩白块游戏的简单实现
前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏 ...
javascript小游戏_javaScript小游戏——网页版别踩白块
一项目简介主要知识点:JavaScript.HTML.CSS 这是一个主要用JS实现的网页版小游戏,游戏规则很简单,通过点击不断下落的黑块来消灭它并获取分数,如果不幸黑块掉落下来或点到了白色区域那 ...
解决闲人的简单JS别踩白块（简易版）小游戏啦!
别踩白块这个游戏相信很多人都在手机上玩过,今天我们就来做一个网页版的. 制作要点: HTML/CSS JavaScript 元素节点增删属性节点操作编程原理在开始编程之前,让我们先来分析下整个游 ...
jQuery实现别踩白块小游戏(简易版)
别踩白块分享这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...
CSS和js和HTML一起做出网页版别踩白块游戏
CSS和js和HTML一起做出网页版别踩白块游戏文章目录 CSS和js和HTML一起做出网页版别踩白块游戏下面我们要用到的知识点: 页面布局添加样式游戏初始化让黑块动起来点击黑块事件 js ...
原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...

制作别踩白块网页小游戏

介绍