寫一個4X4的白塊兒
步驟：一、創(chuàng)建一個大的div或者form表單包裹16個img
二、每一行隨機出現(xiàn)一個黑色方塊
三、綁定鍵盤事件，按下的鍵位與黑色方塊所在的位置相一致的話，就消除這一列的黑色方塊，然后上一列的方塊往下走
①：找兩張寬度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');
④：創(chuàng)建一個隨機數(shù)，用來隨機生成黑色方塊
function ran(min,max){
return parseInt(Math.random()*(max - min ))+min;
}
⑤：從上往下看，總共有四行，第一行（line1）的下標(biāo)為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:
⑦：當(dāng)我按到（A）的時候，也就是所有圖片中下標(biāo)為12的圖片。拿到它的src，然后判斷一下 i的路徑是否等于（1.png：黑色方塊），如果是就生產(chǎn)方塊（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;
}
}
⑧：需要刪除所有黑塊，當(dāng)我按中了一個黑色方塊是，需要把所有的圖片都變成白色。不變成白色的話會有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
