-
编程思想：图：游戏区是CSS相对定位，设置隐藏溢出；两块分别安装在游戏板24方格中的每一行，黑色的随机生成的游戏板，向下滚动并显示，每个操作板的黑块的位置为一个数组，每个数组点击会弹出比较（我想在这......亮点）。
这里是游戏的GitHub地址。你可以点击中间菜单右边的下载zip按钮下载到桌面测试，HTML和js不需要服务器。
下载地址
下面是一个具体的实现，重点是注释。
HTML的一部分：
不要踩在白色的碎片上。
/ /初始化一个boardb，使AB同时存在
CSS部分：
复制下面的代码：* { margin: 0px；padding: 0px；盒尺寸：边界盒；} / /简单的复位，并用盒子大小的设置框的尺寸将被计算为框架，易于计算盒子后面的位置
#游戏地带{宽度：302px；身高：602px边框1px solid；绿色；保证金：20px汽车；位置：相对；溢出：隐藏；} / /游戏区，一个像素是为了消除边界有足够空间300×600
.square{width: 75px; height: 100px; float: left; border: 1px solid black;}
。squareblack {宽度：75px；身高：100px边框1px solid；黑；浮动：左；背景：黑色；} / /每一块是75×100，背景颜色，设置黑盒。
js的一部分：
这里介绍了这个子函数：
全局变量的初始化
var = 600；黑块着陆失败判断
var计数= 0；初始化命中黑块数
无功locarr = {}； / /黑块位置初始化一个游戏板
var =（函数（）{（））
VaR ORD = ；
返回函数（）{
如果（ORD = = 'boarda '）ORD = 'boardb；
其他的ORD = 'boarda；
返回奥德；
}
}）
与 / /关闭功能每次生成标识板和boardb游戏板，是一个全局变量也行，但是为了逼格点…
每次点击决定结果的功能
函数判断（）{
Num = this.id.substr VAR（3） / / ID元素
如果（Num！）（= locarr。流行）和流行{ / /阵列位置的比较
ClearTimeout（定时器）；
警告（您的分数是：+计数！；
/ /失败返回；清除定时器，结算分数。
其他{ }
100；
这个样式。背景=银色；
计数+ + 1；成功登陆标志加上方块高度，将改变背景色框，命中次数+ 1。
}
如果（计数）！= 0count % 15 = = 0）{
ClearTimeout（定时器）；
新的定时计数= 50 / 15 * 5；
定时器= setInterval（'fall（），新的定时）；
每个命中15将加速一点，这个公式可以定义。
}
产生一个大盒子的小的黑盒位置的随机数。每次创建游戏板时，都会调用函数，并根据生产数量定义小黑块的位置。
功能generaterand（）{
无功numarr = { }；
对于（var j＝0；j＜6；j + +）{
VaR Num = math.floor（Math.random（）* 4）+ J×4；
NumArr.push（努姆）；
}
返回numarr；
}
每次调用生成的游戏板，卷在游戏区，将数把黑色的部分为locarr。
功能的跳板（）{
Var（temarr = generaterand）； / /在这里使用一个临时位置的数组，为了防止游戏板的两个位置之间的冲突。
locarr = temarr.concat（locarr）； / /将连接到临时数组的全球定位
VaR板= document.createelement（'div）；
Board.setAttribute（'id'，阶（））；
板。样式。位置=绝对；
板。风格。最高的600px；
对于（var i = 0；i < 24；i + +）{
无功电= document.createelement（'div）；
Ele.setAttribute ('id', ele +i);
如果（temarr.indexof（我）> 1）{ / / ID序列创建高电流来判断是否属于一个临时位置阵列
ele.setattribute（' '，'squareblack）
其他{ }
ele.setattribute（' '，'square）；
}
ele.addeventlistener（听到咔哒声，法官，false）； / /单击添加到每个小正方形决策功能的判断
Board.appendChild（元）；
}
VaR游戏地带= document.getelementbyid（'gamezone）；
gamezone.appendchild（板）；
}
找到脚本中存在的两个游戏板并把它们滚下来。
函数秋天（）{
游戏地带= document.getelementbyid（'gamezone）；
VaR板= document.getelementbyid（'boarda '）； / / AB在全球两游戏一直存在，所以没有必要定义找不到逻辑
无功anowtop = parseInt（板。风格。顶部）； / /获得榜首的位置是xxxpx型，所以parseInt（）将被转换为整数的处理。
如果（anowtop = = 595）{ / /这里的595而不是600因为这架拆除后的下一帧为600px，只是两块游戏板连接好。
gamezone.removechild（板）；
（跳板）； / /删除游戏的游戏区，在新一代的顶。
}
anowtop + = 5；
Boarda。风格。最高anowtop +PX；
无功boardb = document.getelementbyid（'boardb）；
无功bnowtop = parseInt（委员会B.风格。顶部）；
如果（bnowtop = = 595）{
gamezone.removechild（boardb）；
DrawBoard（）；
}
bnowtop + = 5；
Boardb。风格。最高bnowtop +PX；
LOC = 5；
如果（LOC = 0）{
ClearTimeout（定时器）；
警告（您的分数是：+计数！；
返回；
每个帧将决定着陆5，当法官0说着陆着陆时，得分。
}
主要是用在window.onload函数使网页游戏区加载并调用函数。
窗口。指针函数（）{
DrawBoard（）；
秋天（）；
VaR（'fall定时器= setInterval（）'，50）；
}
游戏推广：
添加页面UI：因为HTML的开头非常简单，因此UI被很好地修改，设置按钮，单击以触发启动功能。
改变游戏难度：修改setInterval的值，修改间隔数在判断函数，或优化下落加速度的表达。
增加分数等：将服务器与ajax连接起来，在游戏结束后将结果写入数据库，并在数据中引用图表。
改变到街道机器模式：删除计时，修改判断功能，使每次点击游戏板时下降到一个小的平方高度。设置总数，开始时间，结束时间。