<!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=gb2312" />
<title>无标题文档</title>
<style>
* {
margin:0;
padding:0;
}
html，body {
height:100%;
background-color:#ccc;
}
div {
width:250px;
height:333px;
position:absolute;
background: url(img/ballons.png) no-repeat 0px 0;
}
</style>
</head>
<body>
<!--<div></div>-->
<h2></h2>
<h2></h2>
<script>
var balloons = [];
var allScore = 0;
/*面向对象创建气球的构造函数*/
function Balloon(){
this.dom = null;
this.x = 0;
this.y = 0;
this.score = 0;
this.init();
balloons.push(this);
this.bindEvent();
}
Balloon.prototype.init = function(){
this.dom = document.createElement('div');
document.body.appendChild(this.dom);
this.x = parseInt(Math.random()*(document.documentElement.clientWidth-250));
this.y = document.documentElement.clientHeight;
this.score = parseInt(Math.random()*12)+1; //[1~13);
this.dom.style.left = this.x+"px";
this.dom.style.top = this.y+"px";
var curX = -((this.score-1)%4)*250;
var curY = -parseInt(((this.score-1)/4))*333;
this.dom.style.backgroundPosition = curX+"px "+curY+"px";
/*
1 2 3 4 (0 -250 -250*2 250*3) 0
5 6 7 8 (0 -250 -250*2 250*3) -333
9 10 11 12 (0 -250 -250*2 250*3) -333*2
*/
};
Balloon.prototype.bindEvent = function(){
var _this = this;
this.dom.onclick = function(){
/*每次点击计算分数，下树，从数组中下线*/
allScore += _this.score;
_this.goDied();
};
}
Balloon.prototype.update = function(){
this.y -= this.score*3;
if(this.y < -333){
this.goDied();
}
this.dom.style.top = this.y+"px";
};
Balloon.prototype.goDied = function(){
document.body.removeChild(this.dom);
for(var i=0;i<balloons.length;i++){
if(balloons[i] == this){
balloons.splice(i,1);
}
}
};
var allTime = 20;
var iframe = 0;
/*给new 出来的每一个this对象添加对应的属性
每秒创建4个气球 */
var timer = setInterval(function(){
iframe++;
if(iframe %10 == 0){
allTime--;
for(var i=0;i<4;i++){
new Balloon();
}
}
for(var i=0;i<balloons.length;i++){
balloons[i]&&balloons[i].update();
}
document.getElementsByTagName('h2')[0].innerHTML = "你剩余的时间为："+allTime+"秒";
document.getElementsByTagName('h2')[1].innerHTML = "你目前的分数："+allScore+"分";
if(!allTime){
alert("Game over ，你的总分数为："+allScore+"分");
clearInterval(timer);
}
},100);
</script>
</body>
</html>
图片见文件中