打气球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 231.25px;
height: 300.7px;
background: url(star/ball.png);
position: absolute;
}
</style>
</head>
<body>
<h1 id="info"></h1>
<h2 id="e"></h2>
<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
<script>
var allTime = 20;
var allScore = 0;
function Ballon() {
this.dom = null;
this.x = _.random(0,document.documentElement.clientWidth - 236);
this.y = document.documentElement.clientHeight;
this.score = _.random(1,12);
this.init();
this.bindEvent();
array.push(this);
}
Ballon.prototype.init = function() {
this.dom = document.createElement("div");
document.body.appendChild(this.dom);
this.dom.style.left = this.x + "px";
this.dom.style.top = this.y + "px";
this.dom.style.backgroundPosition = -((this.score-1)%4)*231.25 + "px " +(-parseInt((this.score-1)/4)*300.7) +"px";
}
Ballon.prototype.move = function() {
this.y -= this.score;
this.dom.style.top = this.y + "px";
}
Ballon.prototype.bindEvent = function() {
var _this = this;
this.dom.onmousedown = function() {
allScore += _this.score;
_this.goDie();
}
}
Ballon.prototype.goDie = function() {
document.body.removeChild(this.dom);
for(var i=0; i<array.length; i++) {
if (array[i] === this) {
array.splice(i,1);
}
}
}
var array = [];
var frame = 0;
var timer = setInterval(function() {
frame++;
if (frame%100==0) {
allTime--;
}
if (allTime==0) {
alert("游戏结束");
clearInterval(timer);
}
if(frame%10==0) {
new Ballon();
}
document.getElementById("info").innerHTML = allScore;
_.each(array,function(item) {
item.move();
})
},10);
</script>
</body>
</html>