先来看看开始的界面图
实现思路：
1.打开页面，背景开始走动；
2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；
3.当敌人碰到子弹，敌人消失；
4.当敌人和飞机相遇，飞机死亡，结束游戏；
html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link type="text/css" href="https://www.jb51.net/飞机大战.css"> </head> <body> <div> <!-- 背景图片 --> <div></div> <div></div> <!-- 飞机 --> <div></div> <!-- 开始按钮 --> <div> <a href="#">Start</a> </div> <!-- 重新开始按钮 --> <div> <a href="#">Game Over!<br/>重新开始</a> </div> <!-- 敌人 --> <div></div> <div></div> <div></div> <div></div> <div></div> <!-- 子弹 --> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <script type="text/javascript" src="https://www.jb51.net/sunckBase.js"></script> <script type="text/javascript" src="https://www.jb51.net/飞机大战.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; } } } } }
打中怪物
用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失