原生js一步一步实现《别踩白块儿》小游戏
2019-02-02 本文已影响0人
天之蓝源69
d3133f8a-dbd5-4013-a4f0-679ccede23b7.png
前言：今天我们就一起来实现一个小游戏——《别踩白块儿》。这篇文章不管是新手老手都适合，新手可以利用这篇文章刚好练习一下刚学的知识，老手可以就此文章查漏补缺，看看自己是否与刚开始学的时候有进步。本游戏由简简单单一百多行js代码就实现了，只要跟着文章一步一步动手操作，我相信到最后一定会有所收获的。
一.了解游戏规则
既然我们的目的是要简单的实现这个游戏，那么我们就要先知道这个游戏是怎么玩的，没有玩过的小伙伴可以下下来玩一下，会上瘾的哦！先来简单看几张游戏截图：
image
image
看了这两张游戏截图应该就很容易知道这个游戏咋玩的了。
游戏规则：
《别踩白块儿 Don't Tap The White Tile》，这就是这个游戏的一个规则，我们只需要不断踩着黑色方块前进即可，很简单吧！
二.一步一步来实现
（一）搭建好骨架——HTML
<body>
//在最外层的盒子
<div class="box">
//上层游戏区域
<div id="cont">
<div id="go">
<span>点击开始</span>
</div>
</div>
//显示得分的区域
<div id="count"></div>
</div>
</body>
这样看起来我们的页面结构是不是超级简单，简简单单的几个盒子就搞定了，我们来分析一些这个结构是咋回事：
- 首先是最外层的包裹区——box
- 然后里面分为了一个内容区和一个计数区——cont、count
- 我们可以看到cont区域里面有两个div，一个#go，一个#main，游戏内容区域实际上是在id为main的div中。当我们点击开始游戏时，移动的是整个内容区域，而并非单独一行。具体是怎样的后面详细解释。
- 内容区就是游戏的部分，计数区就是显示游戏分数的地方，我们可以参照一下游戏最后成果的截图：
image
（二）穿上华丽的外衣——CSS
* {
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区域 */
#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;
}
我们的CSS写得很简单，都是一些简单的样式，我们新增了一个类row，这是游戏区域里面也就是#main里面的每一行，高度我们设置的为600px，设置了四行，所以每一个row的高度我们设为的150px。
注意：我们在#cont里面设置了两个大小一样的div：#go和#main，并且给#main设置了一个top值-150px，向上移150px原因也很简单，因为要制造从上往下掉的效果，所以第一行最开始是看不见的，得慢慢移入可视区里面来，正是我们不断改变top值，从而产生下落的效果，那么#go和#main的同时设置，也是为了判断游戏进行地成功或失败（是否点击了白块）。
此时我们的效果大概是这样的：
image
（三）捏造它的灵魂——JavaScript
1.我们先来获取一下我们得DOM节点：
(function() {
//获取内容区里面得#main和#go，以及获取计数区。
var main = document.getElementById('main');
var go = document.getElementById('go');
var count = document.getElementById('count');
})()
２.添加动态创建div节点的方法：
仔细想一想，当我们点击开始游戏的时候，就有方块从上往下移动，这些方块是包含在#main元素里面的，而这些方块是冬天添加的，所以，点击开始我们就要创建div元素，所以我们再来写一个创建div的函数：
//动态创建div
function CDiv(classname) {
//创建div节点，为一行
var Div = document.createElement('div')
//生成随机数，Math.floor()是四舍五入的作用，产生的数永远不会大于4，产生的随机数表示那个有颜色的那一个
index = Math.floor(Math.random() * 4)
//设置class
Div.className = classname
//在一行里面动态添加四个div，一行里面的四块
for (var i = 0; i < 4; i++) {
var iDiv = document.createElement('div')
Div.appendChild(iDiv)
}
//判断#main里面是否有元素
if (main.children.length == 0) {
main.appendChild(Div);
} else {
//如果有元素，则在该元素之前插入
main.insertBefore(Div, main.children[0]);
}
//随机的设置四个div块的背景颜色
Div.children[index].style.backgroundColor = cols[index];
Div.children[index].className = "i";
}
解释：
- random() 方法可返回介于 0 ~ 1 之间的一个随机数。该Math.random()函数返回0-1范围内的浮点伪随机数（包括0，但不包括1），在该范围内具有近似均匀的分布 ，然后你可以将其缩放到所需范围，它不能被用户选择或重置。
- appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
- insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
注意：这里动态创建的Div则表示游戏中的行，添加的iDiv则表示一行中的四个方块。最后通过产生随机数，给一行中的方块随机添加背景颜色并添加class为"i"。
3.添加移动效果的方法：
此段代码就是用于实现游戏区域移动的功能效果。这里我们定义了两个变量，速度speed和分数num，并设置初始值分别为5和0。然后又通过setInterval() 方法设置了一个定时器。在setInterval() 方法中，存在两个参数，第一个参数则是要执行的函数循环体，第二个参数则表示间隔多少毫秒来调用此函数（这里是20毫秒）。
在第一个参数的函数中，getComputedStyle(obj, null)['top']方法就是用来实现给main获取设置top属性。
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)
}
解释：
- setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
- getComputedStyle()方法返回的是一个CSS样式声明对象。
４.全部的js代码：
window.onload =function(){
//获取内容区里面得#main和#go，以及获取计数区。
var main = document.getElementById('main');
var go = document.getElementById('go');
var count = document.getElementById('count');
//设置四种颜色
cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];
//动态创建div
function CDiv(classname) {
//创建div节点，为一行
var Div = document.createElement('div')
//生成随机数，Math.floor()是四舍五入的作用，产生的数永远不会大于4，产生的随机数表示那个有颜色的那一个
index = Math.floor(Math.random() * 4)
//设置class
Div.className = classname
//在一行里面动态添加四个div，一行里面的四块
for (var i = 0; i < 4; i++) {
var iDiv = document.createElement('div')
Div.appendChild(iDiv)
}
//判断#main里面是否有元素
if (main.children.length == 0) {
main.appendChild(Div);
} else {
//如果有元素，则在该元素之前插入
main.insertBefore(Div, main.children[0]);
}
//随机的设置四个div块的背景颜色
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);
}
}
总结：
通过网上搜寻以及个人的理解和总结，也对整个代码有了更加深入的理解，下面我们就来理一理整个实现思路：
- 首先创建了一个外层盒子#box，然后在里面创建了上下两个盒子#cont和#count，然后在#cont里面创建了两个相同的盒子#go和#main。
- 我们已进入程序首先是赋予了#go一个点击事件，用来清除#main里面的所有元素，然后启动move()方法。
- 我们通过move()方法调用CDiv方法，以此来动态创建块，然后通过定时器来让里面的小的div块运动起来。
更详细的解释可以看代码里面的注释
更多源代码：
Hacker233/JavaScriptgithub.com
图标
