还记得以前玩疯的时候，不要踩白块！今天，边肖为大家写了一个网页版！
整个程序只有100多行代码，非常简单！可以写记事本！
里面的JS代码都有详细的注释，大家一看就懂！
如果你是小白，只需将文章后面的源代码直接复制到记事本中，然后保存为HTML文件。如下图！最后用浏览器打开就行了！
当然，源代码是给你的，你可以自己修改！
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta charset="gbk " >
& ltstyle & gt
* {
背景色:浅绿色；边距:0；填充:0；
}
。方框{
边距:0px auto 0 auto
宽度:500px
高度:自动；
边框:纯色2px # 222
}
。列表{
宽度:500px
高度:150px
}
。列表分区{
宽度:124px
身高:149px
浮动:左；
背景色:白色；
边框:纯色1px # 222
边框顶部宽度:0；
边框左侧宽度:0；
光标:指针；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& lth6 style = " font-size:60px；text-align:center " >不要踩在白色的积木上
& ltdiv style = " text-align:center；font-size: 50px " >
& ltspan & gt游戏速度:
& ltoption value="15 " >基本的
& ltoption value="10 " >中间的
& ltoption value="5 " >先进的
& lt/select & gt；
& lt/div & gt；
& ltdiv style = " text-align:center；font-size: 50px " >
& ltspan id = " sgame " style = " cursor:pointer；"& gt开始游戏
& lt/div & gt；
& ltdiv style = " margin:0px auto 0 auto；宽度:500px高度:自动；边框:纯色2px # 222"& gt
& ltdiv id = " list " style = " width:500 px；高度:600px位置:相对；溢出:隐藏；边框顶部:实心；"& gt
& ltdiv id = " main list " style = " width:500 px；高度:600px位置:相对；顶部:-150 px；"& gt& lt/div & gt；
& lt/div & gt；
& ltdiv id = " States div " style = " border-top:solid 1px # 222；宽度:500px高度:50px字体:700 35px微软雅黑’；文本对齐:居中；"& gt& lt/div & gt；
& lt/div & gt；
& ltscript type = " text/JavaScript " & gt；
//的当前样式。
函数getStyle(obj，arrt){
返回obj.currentStyle？obj . current style[arrt]:getComputedStyle(obj，null)[arrt]；
}
//定义全局变量
var main list = document . getelementbyid(' main list ')，start Bt = document . getelementbyid(' sgame ')，States div = document . getelementbyid(' States div ')；
//动态创建新行
函数creatediv() {
//生成一行的DIV
var list div = document . createelement(' div ')；
list div . class name = ' rowlist '；
//生成一个随机数来决定哪个是黑块。
var tag = math . floor(math . random()* 4)；
for(var I = 0；我& lt4;i++){
//下面是生成并添加到一行的四个小div。如果您在一行中设置了多个方块，您可以在此处更改它们。当然，风格还得改。
var minidiv = document . createelement(' div ')；
if (i == tag) {
//随机添加一个黑色块。
minidiv . style . background color = ' # 000 '；
//这里是添加的logo。如果我们点击黑色块，这个类将被删除。
minidiv . class name = " im black "；
}
list div . appendchild(minidiv)；
}
//插入新行
mainlist.insertBefore(listdiv，main list . children[0])；
}
//移动分区
函数movediv(obj){
//清除计时器
clear interval(obj . timer)；
//获取速度和初始化分数
var speed = 5，num = 0；
//定时器管理和启动定时器
obj . timer = setInterval(function(){
//获取
var cspx = parseInt(getStyle(obj，' top ')+speed；
//移动
obj . style . top = cspx+' px '；
//确定并创建一个新行
if (parseInt(getStyle(obj，' top '))& gt；= 0) {
create div()；
obj . style . top =-150+' px '；
}
//删除有多余边的线
if (obj.children.length == 6) {
//如果有一个黑色方块没有被点击，结束游戏。
for(var I = 0；我& lt4;i++) {
if (obj.children[5]。孩子[我]。){
//如果第6行有未点击的黑块，游戏结束。
obj . style . top = '-150 px '；
Statesdiv.innerHTML = '最高分:'+num；
//关闭计时器
clear interval(obj . timer)；
//显示开始游戏
Startbt.innerHTML = ' restart
}
}
obj . remove child(obj . children[obj . children . length-1])；
}
//点击事件判断和评分
obj . onmousedown = function(event){
//如果你点击正确
event = event | | window.event
if ((event.target？event.target : event.srcElement)。){
if(startbt . innerhtml = = ' restart '){
返回；
}
//单击框颜色。
(event.target？event . target:event . src element). style . background color = " # ab9f "；
//清除黑色块标记
(event.target？event.target : event.srcElement)。class name =“”；
//加分
num++；
Statesdiv.innerHTML = '当前分数:'+num；
}否则{
if(startbt . innerhtml = = ' restart '){
返回；
}
//游戏结束
obj . style . top = 0；
Statesdiv.innerHTML = '最高分:'+num；
clear interval(obj . timer)；
Startbt.innerHTML = ' restart
}
//加速
if (num % 10 == 0) {
speed++；
}
}
},
parse int(document . getelementbyid(' speed ')。值))；
}
//开始游戏
startbt.onclick = function(){
if(mainlist.children.length){
//Clear 空mainlist
main list . innerhtml =“”；
}
Startbt.innerHTML = '游戏开始'；
movediv(main list)；
}
& lt/script & gt；
& lt/body & gt；
& lt/html & gt；
