JS实现别踩白块小游戏
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序，但他给的源代码较麻烦，而且没有注释，理解起来很无力，我就以自己的想法自己做了这个小游戏，主要是应用JS对DOM和数组的操作。
程序思路：如图：将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着24块方格，黑色每行随机产生一个，“游戏板”向下滚动并交替显示，将每个操作板的黑块位置存入数组，每次点击时将数组pop出来进行比对（我觉得亮点在这……）。
这里是游戏的GitHub地址，大家可以到里点击中部菜单最右边的的Download ZIP按钮下载到桌面一试，HTML和JS，无需服务器。
以下是具体实现，关键部分有注释。
HTML部分:
<!DOCTYPE html> <html> <head><title>别踩白块</title></head> <body> <div id="gameZone"><div id="boardb" style="position: absolute;top: 0px;"></div></div>//初始化一个boardb,使ab同时存在 </body> </html>
CSS部分：
*{margin: 0px;padding: 0px;box-sizing: border-box;} //简单的reset一下,并用box-sizing设置盒子尺寸将边框也计算进去,便于后面计算小方块位置
#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //游戏区域，多两个像素是为了除去边框外还有足够的300*600的空间
.square{width: 75px;height: 100px;float: left;border: 1px solid black;}
.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//每个小方块为75*100，并且设置黑色小方块的背景色。
JS部分：
这里分函数介绍：
全局变量初始化
var loc=600;//黑块落地失败判定
var count=0;//初始化击中黑块总数
var locArr=[];//初始化游戏板上黑块位置的
var order=(function(){
var ord="A";
return function(){
if(ord=='boarda')ord='boardb';
else ord='boarda';
return ord;
}
})()//用闭包函数使每次创建的游戏板的ID为boarda与boardb，其实用一个全局变量也行，不过为了有点逼格。。。
每次点击判定结果的函数
function judge(){
var num=this.id.substr(3)//获取元素的ID号
if(num!=locArr.pop()){ //与位置数组pop出的对比
clearTimeout(timer);
alert("你的得分为："+count+"分！");
return; //失败清除定时器，结算分数。
}else{
loc+=100;
this.style.background="silver";
count+=1;//成功将落地标志加方格的高度，将方格背景色改变一下，击中数+1
}
if(count!=0&&count%15==0){
clearTimeout(timer);
newtimer=50-count/15*5;
timer=setInterval('fall()',newtimer);
}//每击中15个后将速度加快一点，这个式子可自行定义。
}
产生大框中小黑框位置的随机数，每次创建游戏板时调用此函数，根据产生数定义小黑块的位置
function generateRand(){
var numArr=[];
for(var j=0;j<6;j++){
var num=Math.floor(Math.random()*4)+j*4;
numArr.push(num);
}
return numArr;
}
每次调用在游戏区域的上方生成一个待往下滚动的游戏板，并将其黑色的部分的数字PUSH进locArr中
function drawBoard(){
var temArr=generateRand();//这里应用一个临时的位置数组，为了防止两块游戏板之间的位置冲突。
locArr=temArr.concat(locArr);//将临时数组相连到全局位置数组中
var board=document.createElement('div');
board.setAttribute('id',order());
board.style.position="absolute";
board.style.top='-600px';
for(var i=0;i<24;i++){
var ele=document.createElement('div');
ele.setAttribute('id',"ele"+i);
if(temArr.indexOf(i)>-1){ //判断当前创建的小方块的ID序列是否属于临时位置数组
ele.setAttribute('class','squareBlack')
}else{
ele.setAttribute('class','square');
}
ele.addEventListener('click',judge,false); //给每一个小方格添加点击判定函数judge
board.appendChild(ele);
}
var gameZone=document.getElementById('gameZone');
gameZone.appendChild(board);
}
找到脚本中存在的两个游戏板，使其往下滚动
function fall(){
gameZone=document.getElementById('gameZone');
var boarda=document.getElementById('boarda');//因为ab两个游戏板全局一直存在，所以不需要定义找不到时的逻辑
var anowtop=parseInt(boarda.style.top);//因为获取到的top位置是xxxpx类型，所以用一个parseInt()将其转换为整数便于处理。
if(anowtop==595){ //这里数目为595而不是600是因为在这一帧删除后，下一帧正好600px，刚好使两块游戏板衔接完好。
gameZone.removeChild(boarda);
drawBoard();//删除游戏区域的游戏板，并在最上方新生成一个。
}
anowtop+=5;
boarda.style.top=anowtop+"px";
var boardb=document.getElementById('boardb');
var bnowtop=parseInt(boardb.style.top);
if(bnowtop==595){
gameZone.removeChild(boardb);
drawBoard();
}
bnowtop+=5;
boardb.style.top=bnowtop+"px";
loc-=5;
if(loc==0){
clearTimeout(timer);
alert("你的得分为："+count+"分！");
return;
} //每一帧将落地判定减5，当落地判定为0时表示落地，结算分数。
}
将主体调用写在window.onload函数里，使得页面的游戏区域加载完成后再调用函数。
window.onload=function(){
drawBoard();
fall();
timer=setInterval('fall()',50);
}
游戏扩展:
增加页面UI：因为一开始的HTML特别简单，所以UI也很好修改，设置按钮，点击触发开始函数。
改变游戏难度：修改setInterval的值，也可以对judge函数内的间隔数目进行修改，或将下落加速的表达式优化一下。
增加比分排行等：用ajax连接服务器，在游戏结束后将结果写入数据库，并引用数据中的排行榜。
改为街机模式：去除定时，修改judge函数，使其每次点击游戏板下落一个小方格的高度。设置总数，开始计时，结束计时。
如果您觉得本博文对您有帮助，您可以推荐或关注我，如果您有什么问题，可以在下方留言讨论，谢谢。
JS实现别踩白块小游戏的更多相关文章
- jquery 简单的别踩白块小游戏
写写简单的东西,效果如图: 1.html代码 <div class="warp"> <div class="title"> <h3 ...
- C++ 别踩白块小游戏练习
#include <iostream> #include <stdio.h> #include <stdlib.h> #include <easyx.h> ...
- 用javascript做别踩白块游戏1
初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --&g ...
- jquery之别踩白块游戏的实现
转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html 前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游 ...
- ios-高仿别踩白块游戏的实现
先看下效果图片 前几天看到一个游戏叫别踩白块,下载量还挺大几百万了都,下载下来玩了玩看了看,这个游戏还挺简单的.俗话说想一千遍,一万遍不如动手做一遍来的实在.昨晚以及今天白天闲的没事就开搞了,下午六点 ...
- cocos2dx游戏开发——别踩白块学习笔记（二）——经典模式的实现
一.创建GameScene以及GameLayer 就是简单创建一个Scene而已,在此就不多说啦~,可以参照我的打飞机的学习笔记(2). 二.添加一个开始栏 很简单,就是调用Block中的create ...
- 用javascript做别踩白块游戏2
这一次做一个好一点的,要求黑块自动下落,且速度逐渐加快 <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --> &l ...
- C++用EGE简单实现别踩白块游戏
本项目已开源:https://github.com/wmpscc/AvoidBlank 关于EGE 介绍:EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似 ...
- Cocos2d-x 3.2 之 别踩白块（第三篇）
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
随机推荐
- AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- GJM ：JS + CSS3 打造炫酷3D相册 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- Struts2与Struts的区别
Struts2与Struts的区别 从Struts2的发展过程来看,Struts2继承了Struts与WebWork的血脉,Struts2取两者之精华,形成新德框架,但是struts2还是更多的继承了 ...
- 01Mybatis_课程安排
课程安排: mybatis和springmvc通过订单商品 案例驱动 第一天:基础知识(重点,内容量多) 对原生态jdbc程序(单独使用jdbc开发)问题总结 mybatis框架原理 (掌握) m ...
- WPF钟表效果实现
WPF在样式定义和UI动画上面相对于以前的技术有了不少的提升,下面给出WPF技术实现钟表的效果: 1.Visual Studio新建一个WPF应用程序,命名为WpfClock,新建一个images文件 ...
- MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...
- Windows安装apache2.4
The primary Windows platform for running Apache 2.4 is Windows 2000 or later. Always obtain and inst ...
- 通过gulp为requireJs引入的模块添加版本号
由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-col ...
- Javascript的历史
阅读了JavaScript dom简史,从网上看了下,学问很深啊. 首先简单说下网景公司(Netscape)的发展史:1993年,美国国家超级计算机应用中心(NCSA),发表了一个浏览器,命名为“Mo ...
- JavaScript学习笔记3之 数组 & arguments（参数对象）& 数字和字符串转换 & innerText/innerHTML & 鼠标事件
一.Array数组 1.数组初始化(Array属于对象类型) /*关于数组的初始化*/ //1.创建 Array 对象--方法1: var arr1=[]; arr1[0]='aa';//给数组元素赋 ...