<!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>
图片见文件中js 面向对象 打气球小游戏
原文地址：https://www.cnblogs.com/moon-yyl/p/9844950.html