先来看看开始的界面图
实现思路：
1.打开页面，背景开始走动；
2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；
3.当敌人碰到子弹，敌人消失；
4.当敌人和飞机相遇，飞机死亡，结束游戏；
html页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>飞机大战</title> <link rel="stylesheet" type="text/css" href="飞机大战.css"></head><body> <div id="mainScreen"><!-- 背景图片 --> <div id="bgImg1" class="bg"></div> <div id="bgImg2" class="bg"></div><!-- 飞机 --> <div id="airplane"></div><!-- 开始按钮 --> <div id="startMenu"> <a href="#" id="start">Start</a> </div><!-- 重新开始按钮 --> <div id="restartMenu"> <a href="#" id="restart">Game Over!<br/>重新开始</a> </div><!-- 敌人 --> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div> <div class="enemy"></div><!-- 子弹 --> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> <div class="bullet"></div> </div> <script type="text/javascript" src="sunckBase.js"></script> <script type="text/javascript" src="飞机大战.js"></script></body></html>
css样式
*{ margin: 0; padding: 0; font-family: "微软雅黑";}#mainScreen{ width: 512px; height: 768px; margin:0 auto; position: relative; overflow: hidden;}.bg{ width: 512px; height:768px; position: absolute; background: url(bg.jpg);}#bgImg2{ top:-768px;}#airplane{ width: 109px; height: 82px; position: absolute; background: url(hero.png); left: 215px; top: 668px;}.enemy{ position: absolute; width: 30px; height: 30px; left: -100px; top: 0px; background: url(enemy.png); background-size: 30px 30px;}.bullet{ position: absolute; width: 5px; height: 10px; left: -100px; top: -100px; background: url(bullet.png); background-size: 5px 10px;}#startMenu, #restartMenu{ position: absolute; width: 512px; text-align: center; left: 0; top: 300px;}#start, #restart{ line-height:50px; font-size:30px; font-weight:bold; color:#F00; display:block; text-decoration:none;}#restartMenu{ display: none;}进入页面时，背景开始动
//给背景设置定时器，让背景不停的动，形成动感var bgTimer = setInterval(bgRun, 10);function bgRun() { jsBg1.style.top = jsBg1.offsetTop + 1 + "px"; jsBg2.style.top = jsBg2.offsetTop + 1 + "px"; if (jsBg1.offsetTop >= 768) { jsBg1.style.top = "-768px"; } else { if (jsBg2.offsetTop >= 768) { jsBg2.style.top = "-768px"; } }}点击开始，进入游戏
游戏中
注：其实子弹和敌人的标签没有几个，但是我们使用定时器，开始之前，现将表现都放在屏幕外，进入游戏需要时候再改变标签定位，将其放入到页面中。
var jsStartBox=document.getElementById("startMenu")jsStart.onclick = function startGame(){ jsStartBox.style.display="none"; var baseX = 0; var baseY = 0; var moveX = 0; var moveY = 0; jsAirplane.onmousedown = function(e) { var evt = e || window.event; baseX = evt.pageX; baseY = evt.pageY; jsDivBox.onmousemove = function(v) { var vt = v || window.event; moveX = vt.pageX - baseX; baseX = vt.pageX; moveY = vt.pageY - baseY; baseY = vt.pageY; jsAirplane.style.left = jsAirplane.offsetLeft + moveX + "px"; jsAirplane.style.top = jsAirplane.offsetTop + moveY + "px"; }; }; jsAirplane.onmouseup = function() { mainScreen.onmousemove = null; } //找到可用的子弹 var findBulletTimer = setInterval(findBullet, 300); function findBullet() { for (var i = 0; i < jsBullets.length; i++) { if (jsBullets[i]["isShow"] == false) { jsBullets[i]["isShow"] = true; //将子弹移动到飞机头 jsBullets[i].style.left = jsAirplane.offsetLeft + jsAirplane.offsetWidth / 2 + "px"; jsBullets[i].style.top = jsAirplane.offsetTop + "px"; break; } } } // //让子弹飞 var bulletFlyTimer = setInterval(bulletFlay, 100); function bulletFlay() { for (var j = 0; j < jsBullets.length; j++) { if (jsBullets[j]["isShow"] == true) { if (jsBullets[j].offsetTop > -20) { jsBullets[j].style.top = jsBullets[j].offsetTop - 20 + "px"; } else { jsBullets[j].style.left = "-100px"; jsBullets[j].style.top = "-100px"; jsBullets[j]["isShow"] = false; } } } } //找到可用敌人 var findEnemyTimer = setInterval(findEnemy, 500); function findEnemy(){ //找到一个没有在屏幕中的敌人 for (var i = 0; i < jsEnemys.length; i++) { if (jsEnemys[i]["isShow"] == false) { //标记敌人已经使用 jsEnemys[i]["isShow"] = true; //将敌人移动到屏幕 var left = randomNum(0, 482); jsEnemys[i].style.left = left + "px"; jsEnemys[i].style.top = 0 + "px"; break; } } } // //让敌人下落 var enemyLandTimer = setInterval(enemyLand, 100); function enemyLand() { for (var j = 0; j < jsEnemys.length; j++) { if (jsEnemys[j]["isShow"] == true) { var a = randomNum(4, 20); if (jsEnemys[j].offsetTop <= 768) { jsEnemys[j].style.top = jsEnemys[j].offsetTop + a + "px"; } else { jsEnemys[j].style.left = "-100px"; jsEnemys[j].style.top = "0px"; jsEnemys[j]["isShow"] = false; } } } } }打中怪物
用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失
var perishEnemyTimer = setInterval(perishEnemy, 50);function perishEnemy() { for (var i = 0; i < jsBullets.length; i++) { if (jsBullets[i]["isShow"] == true) { for (var j = 0; j < jsEnemys.length; j++) { if (jsEnemys[j]["isShow"] == true) { var ret = pzjcFunc(jsBullets[i], jsEnemys[j]); if (ret) { jsBullets[i].style.left = "-100px"; jsBullets[i].style.top = "-100px"; jsBullets[i]["isShow"] = false; jsEnemys[j].style.left = "-100px"; jsEnemys[j].style.top = "-100px"; jsEnemys[j]["isShow"] = false; } } } } }}死亡检测
游戏结束
用页面上存在每一个敌人和飞机的定位进行检测，如果两者相遇，那么结束游戏。
注：检测时考虑取反，坦克在飞机上面，在飞机下面，在飞机左边，在飞机右边是没有碰到的时候，那么我们取反就是说明两者已经相遇了。
//死亡检测var dieTimer = setInterval(die, 50);var jsStop = document.getElementById("restartMenu")function die() { for (var i = 0; i < jsEnemys.length; i++) { if (jsEnemys[i]["isShow"] == true) { var isDie = pzjcFunc(jsAirplane, jsEnemys[i]); if (isDie) { jsStop.style.display="block"; jsAirplane.onmouseup = function() { mainScreen.onmousemove = null; } } } }}上述两步中用到的检测两者是否碰撞的函数
//死亡检测的函数function pzjcFunc(obj1, obj2){ var obj1Left = obj1.offsetLeft; var obj1Width = obj1Left + obj1.offsetWidth; var obj1Top = obj1.offsetTop; var obj1Height = obj1Top + obj1.offsetHeight; var obj2Left = obj2.offsetLeft; var obj2Width = obj2Left + obj2.offsetWidth; var obj2Top = obj2.offsetTop; var obj2Height = obj2Top + obj2.offsetHeight; if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) { return true; } return false;}点击重新开始之后刷新页面
var jsRestart=document.getElementById("restart");jsRestart.onclick=function(){ jsStop.style.display="none"; window.location.reload();//刷新页面}好的，现在我们的游戏就可以玩了，这个游戏的有些写作思想有些是我们在以后的项目中可以学习的。比如，页面之外的空间的运用；比如，检测碰撞。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Javascript能带来一定的帮助，如果有疑问大家可以留言交流。
新闻热点
疑难解答
