前言:今天我们就一起来实现一个小游戏——《别踩白块儿》。这篇文章不管是新手老手都适合,新手可以利用这篇文章刚好练习一下刚学的知识,老手可以就此文章查漏补缺,看看自己是否与刚开始学的时候有进步。本游戏由简简单单一百多行js代码就实现了,只要跟着文章一步一步动手操作,我相信到最后一定会有所收获的。
一.了解游戏规则
既然我们的目的是要简单的实现这个游戏,那么我们就要先知道这个游戏是怎么玩的,没有玩过的小伙伴可以下下来玩一下,会上瘾的哦!先来简单看几张游戏截图:
看了这两张游戏截图应该就很容易知道这个游戏咋玩的了。
游戏规则:
《别踩白块儿 Don't Tap The White Tile》,这就是这个游戏的一个规则,我们只需要不断踩着黑色方块前进即可,很简单吧!
二.一步一步来实现
(一)搭建好骨架——HTML
//在最外层的盒子
//上层游戏区域
点击开始
//显示得分的区域
这样看起来我们的页面结构是不是超级简单,简简单单的几个盒子就搞定了,我们来分析一些这个结构是咋回事:
- 首先是最外层的包裹区——box
- 然后里面分为了一个内容区和一个计数区——cont、count
- 我们可以看到cont区域里面有两个div,一个#go,一个#main,游戏内容区域实际上是在id为main的div中。当我们点击开始游戏时,移动的是整个内容区域,而并非单独一行。具体是怎样的后面详细解释。
- 内容区就是游戏的部分,计数区就是显示游戏分数的地方,我们可以参照一下游戏最后成果的截图:
(二)穿上华丽的外衣——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的同时设置,也是为了判断游戏进行地成功或失败(是否点击了白块)。
此时我们的效果大概是这样的:
(三)捏造它的灵魂——JavaScript
1.我们先来获取一下我们得DOM节点:
(function() {
//获取内容区里面得#main和#go,以及获取计数区。
var main = document.getElementById('main');
var go = document.getElementById('go');
var count = document.getElementById('count');
})()
2.添加动态创建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样式声明对象。
4.全部的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