案例04：打飞机
打飞机小案例
玩法：键盘上下左右方向键控制飞机的移动，子弹打到敌机，敌机消失，计分板显示消灭敌机数量。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.dv {
width: 300px;
height: 600px;
margin: 20px auto;
position: relative;
}
.box {
width: 300px;
height: 500px;
/* margin: 20px auto; */
border: 2px solid #666;
position: relative;
overflow: hidden;
}
.me {
width: 49px;
height: 61px;
background: url("../images/me.png");
background-size: 49px 61px;
border: 1px solid green;
box-sizing: border-box;
position: absolute;
left: 125px;
top: 439px;
}
.zd {
width: 7px;
height: 18px;
background: url("../images/bullet.png");
background-size: 7px 18px;
position: absolute;
}
.plane {
width: 30px;
height: 18px;
background: url("../images/plane1.png");
background-size: 30px 18px;
border: 1px solid red;
box-sizing: border-box;
position: absolute;
}
p {
width: 300px;
height: 50px;
background-color: aqua;
position: absolute;
border: 2px solid #666;
top: 500px;
left: 0;
}
p span {
color: red;
font-size: 30px;
}
.over {
width: 300px;
height: 500px;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
top: 0;
display: none;
}
.over span {
width: 214px;
height: 52px;
position: absolute;
background-image: url("../images/logo.png");
background-size: 214px 52px;
left: 42px;
top: 250px;
}
</style>
</head>
<body>
<div class="dv">
<div class="box">
<div class="over"><span></span></div>
<div class="me"></div>
<!-- <div class="zd"></div> -->
<!-- <div class="plane"></div> -->
</div>
<p>你已击落敌机 <span>0</span> 架</p>
</div>
</body>
<script src="../js/daotin.js"></script>
<script>
var box = document.querySelector(".box");
// console.log(box);
var me = document.querySelector(".me");
var span = document.querySelector("p span");
var over = document.querySelector(".over");
var step = 5; // me 移动速度
var bulletSpeed = 20; // 子弹移动速度
var planeSpeed = 1;
var bulletCreatTimer = 0;
var planeCreatTimer = 0;
var boxWidth = getStyle(box, "width");
var boxHeight = getStyle(box, "height");
var meWidth = parseInt(getStyle(me, "width"));
var meHeight = parseInt(getStyle(me, "height"));
var bulletWidth = 0;
var bulletHeight = 0;
var planeWidth = 0;
var planeHeight = 0;
// 产生子弹
function creatBullet() {
var bullet = document.createElement("div");
bullet.className = "zd";
box.appendChild(bullet);
bulletWidth = parseInt(getStyle(bullet, "width"));
bulletHeight = parseInt(getStyle(bullet, "height"));
bullet.style.top = parseInt(getStyle(me, "top")) - parseInt(getStyle(bullet, "height")) + "px";
bullet.style.left = parseInt(getStyle(me, "left")) + parseInt(getStyle(me, "width")) / 2 - parseInt(getStyle(
bullet, "width")) / 2 + "px";
// 每个子弹都有自己独立的定时器，所以使用bullet.timer
bullet.timer = setInterval(function () {
bullet.style.top = parseInt(getStyle(bullet, "top")) - bulletSpeed + "px";
var planeAll = document.querySelectorAll(".plane");
if (parseInt(bullet.style.top) <= 0) {
clearInterval(bullet.timer);
bullet.remove();
}
// 每生成一颗子弹，判断子弹与敌机的位置
for (var i = 0; i < planeAll.length; i++) {
var planeItem = planeAll[i];
var tmpplaneLeft = parseInt(getStyle(planeItem, "left"));
var tmpplaneTop = parseInt(getStyle(planeItem, "top"));
var tmpbulletLeft = parseInt(getStyle(bullet, "left"));
var tmpbulletTop = parseInt(getStyle(bullet, "top"));
var meLeft = parseInt(getStyle(me, "left"));
var meTop = parseInt(getStyle(me, "top"));
// 敌机撞到了我方飞机，游戏结束
if ((tmpplaneLeft + planeWidth > meLeft) && (meLeft + meWidth > tmpplaneLeft) &&
(tmpplaneTop + planeHeight > meTop) && (meTop + meHeight > tmpplaneTop)) {
for (var i = 0; i < planeAll.length; i++) {
clearInterval(planeAll[i].timer);
}
document.onkeydown = document.onkeyup = null;
clearInterval(bullet.timer);
clearInterval(bulletCreatTimer);
clearInterval(planeCreatTimer);
over.style.display = "block";
}
// 子弹打到敌机，敌机消失
if ((tmpbulletLeft + bulletWidth > tmpplaneLeft) && (tmpplaneLeft + planeWidth > tmpbulletLeft) &&
(tmpbulletTop + bulletHeight > tmpplaneTop) && (tmpplaneTop + planeHeight > tmpbulletTop)) {
span.innerHTML = span.innerHTML * 1 + 1;
clearInterval(bullet.timer);
bullet.remove();
clearInterval(planeItem.timer);
planeItem.remove();
}
}
}, 100);
};
bulletCreatTimer = setInterval(creatBullet, 200);
// 产生敌机
function creatPlane() {
var plane = document.createElement("div");
plane.className = "plane";
box.appendChild(plane);
planeWidth = parseInt(getStyle(plane, "width"));
planeHeight = parseInt(getStyle(plane, "height"));
plane.style.left = Math.floor(Math.random() *
(parseInt(getStyle(box, "width")) - parseInt(getStyle(plane, "width")))) + "px";
plane.style.top = 0;
plane.timer = setInterval(function (e) {
plane.style.top = parseInt(plane.style.top) + planeSpeed + "px";
if (parseInt(plane.style.top) >= (parseInt(boxHeight) - parseInt(getStyle(plane,
"height")))) {
clearInterval(plane.timer);
plane.remove();
}
}, 10);
};
planeCreatTimer = setInterval(creatPlane, 1000);
// 键盘控制我方飞机移动
document.onkeydown = document.onkeyup = function (e) {
var evt = window.event || e;
var keyCode = evt.which || evt.keyCode;
switch (keyCode) {
case 37: //左
me.style.left = parseInt(getStyle(me, "left")) - step + "px";
parseInt(me.style.left) <= 0 ? me.style.left = 0 : me.style.left = me.style.left;
break;
case 38: //上
me.style.top = parseInt(getStyle(me, "top")) - step + "px";
parseInt(me.style.top) <= 0 ? me.style.top = 0 : me.style.top = me.style.top;
break;
case 39: //右
me.style.left = parseInt(getStyle(me, "left")) + step + "px";
parseInt(me.style.left) >= (parseInt(boxWidth) - parseInt(meWidth)) ?
me.style.left = (parseInt(boxWidth) - parseInt(meWidth)) + "px" :
me.style.left = me.style.left;
break;
case 40: //下
me.style.top = parseInt(getStyle(me, "top")) + step + "px";
parseInt(me.style.top) >= (parseInt(boxHeight) - parseInt(meHeight)) ?
me.style.top = (parseInt(boxHeight) - parseInt(meHeight)) + "px" :
me.style.top = me.style.top;
break;
default:
break;
}
}
</script>
</html
