写一个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>
<script>
③：获取div（这里声明为 x）&img（声明为 img）
var x = document.getElementById('wrap');
var img = document.getElementsByTagName('img');
④：创建一个随机数，用来随机生成黑色方块
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>
bg.png
