鲁达 还记得你疯了吗？不要踩白色的块状物！今天主编给大家写了一个网页版！
整个程序有100多行代码。很简单！我可以写完一个记事本！
代码映射
里面的JS代码都有详细的注释，一眼就能看出来！
效果图
如果你是白人，可以将句子后面的源代码直接复制到笔记本上，然后另存为HTML文件！下图！最后用浏览器打开即可！
操作过程
当然，源代码给你。你可以自己修改！
！DOCTYPE html
Html
头(电影)
meta charset=' gbk '
风格(音乐)
* {
background-color : aqua；margin : 0；padding : 0；
}
.方框{
Margin: 0px auto 0 auto
Width: 500px
海特：自动；
Border: solid 2px # 222
}
.rowlist {
Width: 500px
海特： 150px
}
.rowlist div {
Width: 124px
海特： 149px
Float :左侧；
background-color : white；
Border: solid 1px # 222
border-top-width 3360 0；
border-left-width : 0；
Cursor: pointer
}
/style
/head
菩提
H6样式=' font-size 3360 60px；文字-align :中心'不要踩白色街区/h6
div style=' text-align : center；font-size : 50 px’
Span游戏速度：/spanselect id='speed '
Option value='15 '初级/选项
option value=' 10 ' medium/option
Option value='5' advanced /option
/select
/div
div style=' text-align : center；font-size : 50 px’
span id=' sgame ' style=' cursor : pointer；'是游戏开始/粉丝
/div
divstyle=' margin 3360 0px auto 0 auto；Width: 500px海特：自动；border : solid 2px # 222；’
div id=' list ' style=' width 3360 500 px；海特： 600pxposition : relative:overflow : hidden；border-top : solid；'
div id=' main list ' style=' width : 500 px；海特： 600pxposition : relative:top :-150 px；’是/div
/div
Div id='statesdiv '
style=" border-top: solid 1px #222;width: 500px;height: 50px;font: 700 35px '微软雅黑';text-align: center;"></div></div>
<script type="text/javascript">
//得当前样式
function getStyle(obj,arrt){
return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
}
//定义全局变量
var mainlist = document.getElementById('mainlist'), startbt = document.getElementById('sgame'),statesdiv = document.getElementById('statesdiv');
//动态创建新行
function creatediv() {
//生成一个行的DIV
var listdiv = document.createElement('div');
li = 'rowlist';
//生成一个随机数，决定哪个是黑块
var tag = Ma() * 4);
for (var i = 0; i < 4; i++){
//这里是生成4个小的DIV，添加到一行里面，如果你一行设置多个方块就在这里改，当然样式也得改了
var minidiv = document.createElement('div');
if (i == tag) {
//随机添加一个黑块
minidiv. = '#000';
//这里是加的标识，如果我们点击了黑块就会把这个class去掉
minidiv.className = "imblack";
}
li(minidiv);
}
//插入新的行
mainli(listdiv, mainli[0]);
}
//移动div
function movediv(obj){
//清除定时器
clearInterval);
//获取速度以及初始化分数
var speed = 5,num = 0;
//定时器管理与开启定时器
obj.timer = setInterval(function() {
//获取
var cspx = parseInt(getStyle(obj, 'top')) + speed;
//移动
obj. = cspx + 'px';
//判断并创建新的行
if (parseInt(getStyle(obj, 'top')) >= 0) {
creatediv();
obj. = -150 + 'px';
}
//删除边多余的行
if == 6) {
//如果有黑块没有点击则结束游戏
for (var i = 0; i < 4; i++) {
if [5].children[i].className == 'imblack') {
//如果第6行里面有未点击的黑块则游戏结束
obj. = '-150px';
= '最高得分: ' + num;
//关闭定时器
clearInterval);
//显示开始游戏
= '重新开始';
}
}
obj.removeChild[obj.c - 1]);
}
//点击事件判断与计分
obj.onmousedown = function(event) {
//如果正确点击
event = event || window.event;
if ? event.target : event.srcElement).className == 'imblack') {
if ( == '重新开始') {
return;
}
//点击后的盒子颜色
? event.target : event.srcElement). = "#ab9f9f";
//清除黑块标记
? event.target : event.srcElement).className = '';
//加分
num++;
= '当前得分: ' + num;
} else {
if ( == '重新开始') {
return;
}
//游戏结束
obj. = 0;
= '最高得分: ' + num;
clearInterval);
= '重新开始';
}
//加速
if (num % 10 == 0) {
speed++;
}
}
},
parseIn('speed').value));
}
//开始游戏
= function(){
if(mainli.length){
//清空mainlist
mainli = '';
}
= '游戏开始';
movediv(mainlist);
}
</script>
</body>
</html>