效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>踩砖块</title>
<style>
body{
margin:0;
background: url("image/6421482_154553076000_2.jpg") no-repeat center/cover;
}
#frame{
width:416px;
height:406px;
border-top:4px solid blue;
border-bottom:2px dashed blue;
margin:-210px auto auto auto;
overflow:hidden;
}
#moveblock{
position:relative;
top:-100px;
width:416px;
height:416px;
}
.row{
width:416px;
height:104px;
}
.row div{
width:100px;
height:100px;
float:left;
border:2px solid gray;
}
.black{
background-color: black;
}
#lefttop{
width:200px;
height:200px;
margin:0px 350px;
}
.defen{
font-size:30px;
}
#grade{
font-size:30px;
padding:50px;
}
.aqua{
background-color: aqua;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
#instruction{
width:50px;
height:50px;
margin:60px 10px 10px 500px;
}
</style>
</head>
<body>
<div id="instruction" class="red"></div>
<div id="lefttop">
<p class="defen">得分：</p>
<p id="grade">0</p>
</div>
<div id="frame">
<div id="moveblock">
<div class="row">
<div class="yellow"></div>
<div class="black"></div>
<div class="red"></div>
<div class="aqua"></div>
</div>
<div class="row">
<div class="aqua"></div>
<div class="yellow"></div>
<div class="red"></div>
<div class="black"></div>
</div>
<div class="row">
<div class="black"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="aqua"></div>
</div>
<div class="row">
<div class="aqua"></div>
<div class="black"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
</div>
</div>
<script>
var instruction=document.getElementById("instruction");
var moveblock=document.getElementById("moveblock");
var grade=document.getElementById("grade");
var count=0;
var pxs=1;
var block_colors=["yellow","aqua","red","blue","black"];
var index_color=[];
var times=0;
var grades=0;
var randon_func=function(){
var rf=Math.floor(Math.random()*5);
return block_colors[rf];
}
var move=setInterval(function(){
var movetop=getComputedStyle(moveblock).top;
var movetop_int=parseInt(movetop);
if(movetop_int>=0) {
var divrow = document.createElement("div");
divrow.className = "row";
var random_data = Math.floor(Math.random() * 4);
for (var i = 0; i < 4; i++) {
var div = document.createElement("div");
if (i == random_data) {
div.className = "black";
}
else{
var ran=Math.floor(Math.random() * 4);
for(var j=0;j<index_color.length;j++) {
while(ran==index_color[j]||ran==random_data) {
ran=Math.floor(Math.random() * 4);
}
}
index_color[times]=ran;
console.log(index_color)
times++;
div.className=block_colors[ran];
}
divrow.appendChild(div);//div作为divrow的孩子
}
times=0;
// divrow[random_data].className="black";
//将新增的divrow作为moveblock的第一个孩子（放在最顶端）
moveblock.insertBefore(divrow, moveblock.firstChild);
movetop_int = -100;
}
moveblock.style.top=movetop_int+pxs+"px";
grade.innerHTML=grades;
},30)
moveblock.οnclick=function(ev){
var catch_target=ev.target;
if(catch_target.className!=instruction.className){ //catch_target.hasAttribute("class")判断是否含有class选择器
clearInterval(move);
alert("总得分："+grades+"分，游戏结束！")
// grade.innerHTML=count;
}else{
catch_target.style.backgroundColor="white"
count++;
if(count!=0&&count%5==0){
pxs+=2;
if(pxs>=30){
pxs=30; //持续时间越长，div块下拉速度越快
}
}
if(instruction.className=="black"){
grades+=20;
}else if(instruction.className=="aqua"){
grades+=5;
}else if(instruction.className=="blue"){
grades+=10;
}else if(instruction.className=="yellow"){
grades+=2;
}else grades+=1;
instruction.className=randon_func();
}
}
</script>
</body>
</html>