完整文件及代码可以在网盘下载，下载链接为：https://pan.baidu.com/s/1hs7sBUs 密码: d83x
飞机大战css定义：
<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>
飞机大战： HTML代码如下：
<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>
飞机大战 ： 调用js
//中大型飞机射击次数未实现，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;
效果图如图所示：
