最近有朋友找我用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实现别踩白块小游戏的更多相关文章

  1. jquery 简单的别踩白块小游戏

    写写简单的东西,效果如图: 1.html代码 <div class="warp"> <div class="title"> <h3 ...

  2. C++ 别踩白块小游戏练习

    #include <iostream> #include <stdio.h> #include <stdlib.h> #include <easyx.h> ...

  3. 用javascript做别踩白块游戏1

    初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --&g ...

  4. jquery之别踩白块游戏的实现

    转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html 前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游 ...

  5. ios-高仿别踩白块游戏的实现

    先看下效果图片 前几天看到一个游戏叫别踩白块,下载量还挺大几百万了都,下载下来玩了玩看了看,这个游戏还挺简单的.俗话说想一千遍,一万遍不如动手做一遍来的实在.昨晚以及今天白天闲的没事就开搞了,下午六点 ...

  6. cocos2dx游戏开发——别踩白块学习笔记（二）——经典模式的实现

    一.创建GameScene以及GameLayer 就是简单创建一个Scene而已,在此就不多说啦~,可以参照我的打飞机的学习笔记(2). 二.添加一个开始栏 很简单,就是调用Block中的create ...

  7. 用javascript做别踩白块游戏2

    这一次做一个好一点的,要求黑块自动下落,且速度逐渐加快 <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --> &l ...

  8. C++用EGE简单实现别踩白块游戏

    本项目已开源:https://github.com/wmpscc/AvoidBlank 关于EGE 介绍:EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似 ...

  9. Cocos2d-x 3.2 之 别踩白块（第三篇）

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

随机推荐

  1. 标签栏使用Demo二

    // //  PHTagViewFrame.m //  标签的使用二 // //  Created by 123 on 16/9/6. //  Copyright © 2016年 彭洪. All ri ...

  2. 初学C++之自定义类型名简化

    说明:本人使用的是vc++ IDE:vs2013 我在自定义一些类时,有时会取一些很长的名字,但是这不利于使用,这个时候就可以使用类型名简化. class MathAddBBBB { }; using ...

  3. 「Ionic」设置开发环境

    轉載請一定註明地址:http://www.cnblogs.com/surge/p/5983024.html 謝謝! 濤叔是在mac環境下進行的,涉及android環境的配置不保證成功. 少废话,跟着濤 ...

  4. Android提升篇系列：Android项目代码优化实践

    Android开发中,不同的开发团队,不同的开发人员,在实际编码中会有一些不同的地方.但是,具有一定的更普适性的编码习惯,无疑还是相当重要的.本文主要罗列项目中常见的一些编码片段,并给出相关建议. 1 ...

  5. 在selenium2.0中使用selenium1.0的API

    Selenium2.0中使用WeDriver API对页面进行操作,它最大的优点是不需要安装一个selenium server就可以运行,但是对页面进行操作不如selenium1.0的Selenium ...

  6. 性能测试学习之三—— PV->TPS转换模型&TPS波动模型

    PV->TPS转换模型 由上一篇“性能测试学习之二 ——性能测试模型(PV计算模型)“ 得知 TPS = ( (80%*总PV)/(24*60*60*(T/24)))/服务器数量 转换需要注意: ...

  7. Java经典实例：使用正则表达式：测试模式

    import java.util.regex.Pattern; /** * Created by Frank * 在Java中使用正则表达式:测试模式 */ public class RESimple ...

  8. ubuntu 安装配置ssh

    1.安装ssh-server sudo apt-get install openssh-server 2.设置管理员密码访问 sudo vim /etc/ssh/sshd_config 将“Permi ...

  9. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  10. JavaScript实战（原生range和自定义特效）

    今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: #tip{ position: absolute; top: 30px; left: ...