写一写曾经风靡一时的《别踩白块儿》街机版

image.png

写一个4X4的白块儿
步骤：一、创建一个大的div或者form表单包裹16个img
二、每一行随机出现一个黑色方块
三、绑定键盘事件，按下的键位与黑色方块所在的位置相一致的话，就消除这一列的黑色方块，然后上一列的方块往下走

①：找两张宽度150的白色（0.png）&黑色（1.png）的图片
②：用一个div包裹16张图片；宽度给620px就行了
<body>
<div id="wrap">
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
img src = 图片路径
</div>
</body>

④：创建一个随机数，用来随机生成黑色方块
function ran(min,max){
return parseInt(Math.random()*(max - min ))+min;
}

⑤：从上往下看，总共有四行，第一行（line1）的下标为0-4，所以黑色方块在0-4之间随机生成，以此类推；

//随机黑色方块
var line1 = ran(12,15);
var line2 = ran(8,12);
var line3 = ran(4,8);
var line4 = ran(0,4);

img[line4].src = '1.png';
img[line3].src = '1.png';
img[line2].src = '1.png';
img[line1].src = '1.png';

⑥：绑定键盘事件（以 A S K L ）为例子。
//键盘事件
document.onkeydown = function(e){
var e = e||window.event;
//var code = e.keyCode;
switch(e.keyCode){
case 65:

⑦：当我按到（A）的时候，也就是所有图片中下标为12的图片。拿到它的src，然后判断一下 i的路径是否等于（1.png：黑色方块），如果是就生产方块（newblock）；不是就跳出；下面同理。
var i = img[12].getAttribute('src');
if(i == '1.png'){
newblock();
}
break;

        case 83:
        var i = img[13].getAttribute('src');
        if(i == '1.png'){
            newblock();
        }           
        break;

        case 75:
        var i = img[14].getAttribute('src');
        if(i == '1.png'){
            newblock();
        }           
        break;

        case 76:
        var i = img[15].getAttribute('src');
        if(i == '1.png'){
            newblock();
        }           
        break;
    }
}

⑧：需要删除所有黑块，当我按中了一个黑色方块是，需要把所有的图片都变成白色。不变成白色的话会有bug的。
//删除所有黑块
function deblock(){
for (var i = 0; i < img.length; i++) {
img[i].src = '0.png';
}
}

//生成新方块
function newblock(){
⑨：先让全部图片变成白色（deblock）；
deblock();
⑩：清掉之后再让第二行方块往下走变成第一行，第三行往下走变成第二行。。。。
然后再让每一行随机生成一个黑色方块。
line1=line2+4;
line2=line3+4;
line3=line4+4;
line4=ran(0,4);
img[line1].src="1.png";
img[line2].src="1.png";
img[line3].src="1.png";
img[line4].src="1.png";
}
</script>

嗯，这样就基本完成了，这里少了一些判断条件，例如（按错了就游戏结束）。
这个我能玩一个下午，哈哈哈哈。

写一写曾经风靡一时的《别踩白块儿》街机版

推荐阅读更多精彩内容