先来看看开始的界面图

实现思路：

1.打开页面，背景开始走动；

2.点击开始，飞机开始不断发射子弹，敌人随机出现在上方；

3.当敌人碰到子弹，敌人消失；

4.当敌人和飞机相遇，飞机死亡，结束游戏；

html页面

<Meta charset="UTF-8"> 飞机大战

502_33@

重新开始 @H_502_33@

502_33@

502_33@ @H_502_33@

@H_502_33@

css样式

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;
}
@H_502_33@

进入页面时，背景开始动

= 768) { jsBg1.style.top = "-768px"; } else { if (jsBg2.offsetTop >= 768) { jsBg2.style.top = "-768px"; } } } @H_502_33@

点击开始，进入游戏

游戏中

注：其实子弹和敌人的标签没有几个，但是我们使用定时器，开始之前，现将表现都放在屏幕外，进入游戏需要时候再改变标签定位，将其放入到页面中。

Box=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;
}
}
}
}
}
@H_502_33@

打中怪物

用页面上存在每一个敌人和每一个子弹的定位进行简则，如果相撞，那么怪物消失

jsEnemys[j].style.left = "-100px";
jsEnemys[j].style.top = "-100px";
jsEnemys[j]["isShow"] = false;
}
}
}
}
}
}
@H_502_33@

死亡检测

游戏结束

用页面上存在每一个敌人和飞机的定位进行检测，如果两者相遇，那么结束游戏。

注：检测时考虑取反，坦克在飞机上面，在飞机下面，在飞机左边，在飞机右边是没有碰到的时候，那么我们取反就是说明两者已经相遇了。

@H_502_33@

上述两步中用到的检测两者是否碰撞的函数

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;
}
@H_502_33@