<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>别踩白块儿</title>
<link href="baikuai.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 style="text-align:center">总分</h1><h2 id="score"></h2>
<div id="main">
<div id="container"></div>
</div>
</body>
</html>
<script>
var clock = null; //定时器操作句柄
var state = ; //0初始化，1进行中，2暂停，3失败
var speed = ;
/*
创建div,className是其类名
*/
function cdiv(className)
{
var div = document.createElement('div');
div.className = className;
return div;
}
/*
创建div.row
*/
function crow()
{
var row = cdiv('row');
var classes = createSn();
var con = $('container'); for(var i=;i<;i++)
{
row.appendChild(cdiv(classes[i]));
} if(con.firstChild == null)
{
con.appendChild(row); //刚开始添加一行
}
else
{
con.insertBefore(row,con.firstChild);//以后从上往下添加行
}
}
/*
按id获取对象
*/
function $(id)
{
return document.getElementById(id)
}
/*
返回一个数组，随机其中1个单元值为‘cell black’，其他3个为cell
*/
function createSn()
{
var arr = ['cell','cell','cell','cell'];
var i = Math.floor(Math.random()*);
arr[i] = 'cell black';
return arr;
}
/*
初始化，自动添加row
*/
function init()
{
for(var i =; i<;i++)
{
crow();
}
//委托事件--点击
$('main').onclick = function (ev)
{
judge(ev);
}
} function judge(ev)//判断输赢，加分
{
if(state == )
{ alert('您失败了，请重新开始游戏！');
return;
}
if(ev.target.className.indexOf('black') == -)
{
fail();
}
else
{
ev.target.className = 'cell';
ev.target.parentNode.pass = ;
score();
}
}
/*
动画
*/
function move()
{
var con = $('container');
var top = parseInt(window.getComputedStyle(con,null)['top']);
if(speed + top > )
{ top = ;} //top走过头，直接top=0
else
{
top += speed; //调节每次下降的像素
}
con.style.top = top + 'px'; if(top == )
{
crow();
con.style.top = '-100px';
drow();
}
else if(top == (- + speed))
{
var rows = con.childNodes;
if((rows.length == ) && (rows[rows.length-].pass !== ))
{
fail();
}
}
}
/*
失败，结束
*/
function fail()
{
clearInterval(clock);
state = ;
alert('game over!');
}
/*
start() 启动
*/
function start()
{
clock = window.setInterval('move()',);
}
/*
删除最后一行
*/
function drow()
{
var con = $('container');
if(con.childNodes.length == )
{
con.removeChild(con.lastChild);
}
}
/*
计分
*/
function score()
{
var newscore = parseInt($('score').innerHTML)+;
$('score').innerHTML = newscore;
if(newscore % == )
{
jiasu();
}
}
/*
加速函数
*/
function jiasu()
{
speed += ;
if(speed == )
{ alert('加油哦！');}
else if(speed == )
{ alert('你太厉害了！');}
else if(speed == )
{ alert('你快超神了！');}
} init();
start();
</script>
css样式表代码：
@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#main
{
width:400px;
height:400px;
border: 2px solid #;
margin: auto;
position:relative;
overflow:hidden;
}
#container
{
width:%;
height:400px;
position:relative;
top:-100px;
background:#FFF;
}
.row
{
width:%;
height:100px;
}
.cell
{
width:100px;
height:100px;
float:left;
}
.black
{
background:#;
}
#score
{
text-align:center;
}