js 飞机大战

<style>#container{　　width:320px;height:568px;background: url(images/start.png);margin:20px auto;position: relative;overflow: hidden;　　}#container input{width:120px;height: 38px;background: #ff6600;border:0;color:#fff;font-size:14px;font-family: 微软雅黑;position: absolute;left: 100px;bottom:50px;}#enddiv{position: absolute;top: 210px;left: 75px;border: 1px solid gray;border-radius: 5px;text-align: center;background-color:#d7ddde;display: none;z-index: 2;}.plantext{width: 160px;height: 30px;line-height: 30px;font-size: 16px;font-weight: bold;}#enddiv div{width: 160px;height: 50px;}#enddiv div button{margin-top:10px ;width: 90px;height: 30px;border: 1px solid gray;border-radius: 30px;}#scoretext{margin: 0;font-family: arial;font-size:12px;font-weight: bold;color:#ff6600;position: absolute;left: 4px;top: 4px;z-index: 100;}</style>

　　<div id="container"> ???????<p id="scoretext"></p> ???????<div id="enddiv"> ???????????<p class="plantext">游戏结束</p> ???????????<div><button onclick="restartGame()" id="restart">继续</button></div> ???????</div> ???????<input type="button" value="开始游戏" id="startBtn"> ???</div>

//中大型飞机射击次数未实现，gameover未实现 ???????function startGame(container){ ???????????var startBtn = document.getElementById("startBtn"); ???????????startBtn.onclick = function(){ ???????????????container.style.background = "url(images/background_1.png)"; ???????????????this.style.display = "none"; ???????????????bgMove(container); ???????????????var score = 0; ???????????????var myplan = new MyPlan(120,480,container); ???????????????var middleEnemy = new MiddleEnemy(container,myplan.bullets,myplan,score); //中型飞机对象实例 ???????????????var maxEnemy = new MaxEnemy(container,myplan.bullets,myplan,score);//大型飞机对象实例 ???????????????var enemy = new Enemy(container,myplan.bullets,myplan,middleEnemy,maxEnemy,score); ???????????????enemy.init(); ???????????????????????????????????} ???????} ???????var speed = 0; ???????function bgMove(container){ ???????????setInterval(function(){ ???????????????speed++; ???????????????container.style.backgroundPosition = "0 " + speed + "px"; ???????????????if(speed > 568){ ???????????????????speed = 0; ???????????????} ???????????},15); ???????????????????} ???????function gameOver(){ ???????????var enddiv = document.getElementById("enddiv"); ???????????var restart = document.getElementById("restart"); ???????????enddiv.style.display = "block"; ???????????restart.onclick = function(){ ???????????????location.reload(); ???????????} ???????} ???????var score = 0; ???????function getScore(num){ ???????????var scoretext = document.getElementById("scoretext"); ???????????score += num; ???????????scoretext.innerHTML = score + "分"; ???????} ???????onload = function(){ ???????????var container = document.getElementById("container"); ???????????????????????startGame(container); ???????}

Array.prototype.remove = function(value){ ???for(var i = 0; i < this.length; i++){ ???????if(this[i] == value){ ???????????this.splice(i,1); ???????} ???}}function MyPlan(x , y , container){ ???this.x = x; ???this.y = y; ???this.img = "images/my.gif"; ???this.container = container; ???this.bullets = []; ???this.createTimer; ???this.init();}MyPlan.prototype = { ???init:function(){ ???????this.create(); ???????this.planMove(); ???????this.bullets.push(this.plan); ???????var that = this; ???????this.createTimer = setInterval(function(){ ???????????that.createBullets(); ???????},200); ???????this.createBullets(); ???}, ???planMove:function(){ ???????var that = this; ???????this.container.onmousemove = function(e){ ???????????e = e || event; ???????????var maxLeft = that.container.offsetWidth - that.plan.offsetWidth; ???????????var maxTop = that.container.offsetHeight - that.plan.offsetHeight; ???????????var planX = Math.max(Math.min(e.clientX - that.container.offsetLeft - that.plan.offsetWidth / 2,maxLeft),0); ???????????var planY = Math.max(Math.min(e.clientY - that.container.offsetTop - that.plan.offsetHeight / 2,maxTop),0); ???????????that.plan.style.left = planX + "px"; ???????????that.plan.style.top = planY + "px"; ???????} ???}, ???create:function(){ ???????this.plan = document.createElement("img"); ???????this.plan.src = this.img; ???????this.plan.style.cssText = "position:absolute; top:" + this.y + "px; left:" + this.x + "px;"; ???????this.container.appendChild(this.plan); ???}, ???createBullets:function(){ ???????this.bull = document.createElement("img"); ???????this.bull.src = "images/bullet1.png"; ???????var bullX = this.plan.offsetLeft + this.plan.offsetWidth / 2 - 6 / 2; ???????var bullY = this.plan.offsetTop - 14; ???????this.bull.style.cssText = "position:absolute; top:" + bullY + "px; left:" + bullX + "px;"; ???????this.container.appendChild(this.bull); ???????this.bullets.push(this.bull); ???????var bull = this.bull; //不能用that = this 对象冒充 闭包问题 ???????var container = this.container; ???????var bullets = this.bullets; ???????this.bull.timer = setInterval(function(){ ???????????bull.style.top = bull.offsetTop - 3 + "px"; ???????????if(bull.offsetTop <= -14){ ???????????????bullets.remove(bull); ???????????????container.removeChild(bull); ???????????????clearInterval(bull.timer); ???????????} ???????},8); ???}}

function Enemy(container,bullets,myplan,middleEnemy,maxEnemy,score){ ???this.container = container; ???this.img = "images/enemy1_fly_1.png"; ???this.createTime = 600; //创建敌机的间隔时间 ???this.bullets = bullets; ???this.dieImg = "images/enemy1_fly_3.gif"; ???this.width = 34; //敌机的宽度 ???this.height = 24; ???//敌机的高度 ???this.myplan = myplan; ???this.count = 1; //小型敌机创建个数 ???this.dieCount = 1; //敌机消灭需子弹打击次数 ???this.middleEnemy = middleEnemy; ???this.maxEnemy = maxEnemy; ???this.score = score; ???}Enemy.prototype = { ???init:function(){ ???????var that = this; ???????var middleEnemy = this.middleEnemy; ???????var maxEnemy = this.maxEnemy; ???????var count = 0; ???????setInterval(function(){ ???????????that.create(); ???????????count++; ???????????if(count % 5 == 0){ ???????????????middleEnemy.create(); ???????????} ???????????if(count % 30 == 0){ ???????????????maxEnemy.create(); ???????????????count = 1; ???????????} ???????},this.createTime); ???????????}, ???create:function(){ ???????this.enemy = document.createElement("img"); ???????this.enemy.src = this.img; ???????var enemyX = Math.random() * (this.container.offsetWidth - this.width); ???????var enemyY = -1 * this.height; ???????this.enemy.style.cssText = "position:absolute; left:" + enemyX + "px; top:" + enemyY + "px;"; ???????this.container.appendChild(this.enemy); ???????var enemy = this.enemy; ???????this.data_hitCount = 0; ???????var container = this.container; ???????var bullets = this.bullets; ???????var dieImg = this.dieImg; ???????var myplan = this.myplan; ???????var plan = this.myplan.plan; ???????var createBullets = this.myplan.createBullets; ???????var dieCount = this.dieCount; ???????var isremove = true; //是否可以移除敌机 ???????var score = this.score; ???????var that = this; ???????this.enemy.timer = setInterval(function(){ ???????????enemy.style.top = enemy.offsetTop + 3 + "px"; ???????????????????????for(var i = 0; i < bullets.length; i++){ ???????????????????????????????if(bullets[i].offsetLeft + bullets[i].offsetWidth > enemy.offsetLeft && bullets[i].offsetLeft < enemy.offsetLeft + enemy.offsetWidth){ ???????????????????if(bullets[i].offsetTop + bullets[i].offsetHeight > enemy.offsetTop && bullets[i].offsetTop < enemy.offsetTop + enemy.offsetHeight && isremove){ ???????????????????????if(i == 0){ ???????????????????????????plan.src = "images/myover.gif"; ???????????????????????????container.onmousemove = null; ???????????????????????????clearInterval(myplan.createTimer); ???????????????????????????gameOver(); ???????????????????????} ???????????????????????else{ ???????????????????????????container.removeChild(bullets[i]); ???????????????????????????bullets.remove(bullets[i]); ???????????????????????????????that.data_hitCount++; ???????????????????????????if(that.data_hitCount == dieCount){ ???????????????????????????????isremove = false; ???????????????????????????????enemy.src = dieImg; ???????????????????????????????getScore(dieCount); ???????????????????????????????setTimeout(function(){ ???????????????????????????????????container.removeChild(enemy); ???????????????????????????????},300); ???????????????????????????} ???????????????????????????????} ???????????????????????????????????} ???????????????} ???????????} ???????????if(enemy.offsetTop >= container.offsetHeight){ ???????????????container.removeChild(enemy); ???????????????clearInterval(enemy.timer); ???????????} ???????},30); ???}}

function MiddleEnemy(container,bullets,myplan,score){ ???Enemy.call(this,container,bullets,myplan,score); ???this.img = "images/enemy2_fly_1.png"; ???this.dieImg = "images/enemy2_fly_3.gif"; ???this.width = 46; ?//敌机的宽度 ???this.height = 60; //敌机的高度 ???this.dieCount = 5;}MiddleEnemy.prototype = Enemy.prototype;function MaxEnemy(container,bullets,myplan,score){ ???Enemy.call(this,container,bullets,myplan,score); ???this.img = "images/enemy3_fly_1.png"; ???this.dieImg = "images/enemy3_fly_3.gif"; ???this.width = 110; //敌机的宽度 ???this.height = 164; //敌机的高度 ???this.dieCount = 10;}MaxEnemy.prototype = Enemy.prototype;