2222
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#content{
width:400px;
height:420px;
position:relative;
/*border:1px solid red;*/
overflow:hidden;
}
#main{
position:relative;
top:-100px;
}
.row{
width:400px;
height:100px;
}
.row div{
width:98px;
height:98px;
border:1px solid gray;
float:right;
}
.black{
background-color:black;
}
</style>
</head>
<body>
<h3 id='fen'>0</h3>
<hr>
<div id="content">
<div id="main"></div>
</div>
<script>
//main写错，没加分号
var main = document.getElementById('main');
//div工厂
function cdiv(classname){
var div = document.createElement('div');
if(classname){
div.setAttribute('class',classname);
}
return div;
}
function crow(){
var row = cdiv('row');//创建行div
//通过随机数决定谁是黑块
var index = Math.floor(Math.random()*4);
//创建小div
for(var i=0;i<4;i++){
if(i==index){
//创建黑块
row.appendChild(cdiv('black'));
}else{
//创建普通小块
row.appendChild(cdiv(''));
}
}
if(main.firstChild){
//如果有第一个元素，说明已经初始化过，将新增的行放最上面
main.insertBefore(row,main.firstChild);
}else{
main.appendChild(row);
}
}
//初始化函数
var flag = true;
var speed = 2; //加速的变量
var dingshiqi;
function init(){
//循环调用crow创建游戏界面
for(var i=0;i<4;i++){
crow();
}
//设置定时器，反复调用move函数
var dingshiqi = setInterval('move()',50);
//var flag = true;//设置一个旗帜；
main.onclick = function(e){
//事件委托
var dj = e.target;
if(flag==false){
alert('游戏结束1！点到白块');
}
//如果点击白块，停止定时器，游戏失败
//className 必须大写N
else if(dj.className==''){
clearInterval(dingshiqi);
flag = false;
alert('游戏结果2，点到白块！');
}else{ //点击黑块
dj.className = '';
//点击黑块对了加分
dj.parentNode.pass =true;
//如果点击黑块则增加属性pass对应138行
var fen =document.getElementById('fen');
var fenshu = parseInt(fen.innerHTML)+1;
fen.innerHTML = fenshu;
//根据分值实现加速
if(fenshu%10 == 0){
//速度变快
speed +=2;
}
}
}
}
//动起来
function move(){
//通过修改main的top值实现向下移动
var top = parseInt(getComputedStyle(main).top);
top += speed;//加速变量
main.style.top = top+'px';
if(top>=0){
crow(); //最下面div移动下去后，新建一个div
main.style.top='-100px';
if(main.children.length>5){
//大于5行，删除最后一行
main.removeChild(main.lastChild);
}
//判断用户是否点击，没有点击停止游戏对应107行
if(main.lastChild.pass == undefined){
clearInterval(dingshiqi);
flag = false;
alert('游戏结束3，黑块到底！');
}
}
}
init();
</script>
</body>
</html>555566