效果图
CSS代码
.bcc {
width: 440px;
height: 600px;
background-color: white;
margin: 0 auto;
position: relative;
border: 2px solid black;
background: url(./bcc.png);
background-size: 100%;
}
.plane {
width: 40px;
height: 30px;
position: absolute;
left: 200px;
top: 570px;
}
.bcc .blt {
width: 5px;
height: 10px;
background-color: red;
position: absolute;
}
.enemy {
position: absolute;
left: 200px;
}
.lose{
color: red;
width: 140px;
height: 40px;
background-color: white;
line-height: 40px;
position: absolute;
left: 150px;
top: 250px;
z-index: 99;
}
HTML代码
<div class="bcc">
<p class="lose" style="display: none;">游戏结束哈哈哈哈</p>
<div class="blt" style="display: none;"></div>
<div class="plane">
<img src="./plane.png" alt="">
</div>
<div class="enemy"><img src="./enemy.png" alt=""></div>
</div>
JS代码
var bcc = document.querySelector('.bcc');
var plane = document.querySelector('.plane');
document.onkeydown = function (e) {
switch (e.keyCode) {
case 37:
if (plane.offsetLeft > 0) {
plane.style.left = plane.offsetLeft - 40 + 'px';
}
break;
case 38:
if (plane.offsetTop > 0) {
plane.style.top = plane.offsetTop - 40 + 'px';
}
break;
case 39:
if (plane.offsetLeft < 400) {
plane.style.left = plane.offsetLeft + 40 + 'px';
}
break;
case 40:
if (plane.offsetTop < 570) {
plane.style.top = plane.offsetTop + 40 + 'px';
}
break;
case 32:
fashe();
break;
}
}
//发射函数
function fashe() {
var mp3 = new Audio('./zidan.wav');
mp3.play();
var blt = document.querySelector('.blt');
if (blt.style.display == 'none') {
blt.style.display = 'block';
blt.style.left = plane.offsetLeft + plane.offsetWidth / 2 - blt.offsetWidth / 2 + "px";
blt.style.top = plane.offsetTop + "px";
}
var timer = setInterval(function () {
// 定时器子弹移动
blt.style.top = blt.offsetTop - 1 + 'px';
if (blt.offsetTop < 0) {
blt.style.display = 'none';
clearInterval(timer);
}
}, 10)
}
// 子弹消灭敌机机
var blt = document.querySelector('.blt');
var enemy = document.querySelector('.enemy');
var timers = setInterval(function () {
if (blt.offsetTop > 0 && blt.offsetTop - enemy.offsetTop - enemy.offsetHeight < 0 && blt.offsetLeft > enemy.offsetLeft && blt.offsetLeft < enemy.offsetLeft + enemy.offsetWidth) {
var jizhong = new Audio('./jizhong.wav');
jizhong.play();
enemy.style.display = "none";
clearInterval(timers);
}
}, 100)
//让敌机运动起来
var timerss = setInterval(function () {
enemy.style.top = enemy.offsetTop + 1 + 'px';
if (enemy.offsetTop > 570) {
enemy.style.display = "none";
clearInterval(timerss);
}
}, 20)
//敌机撞到自己被摧毁
var lose = document.querySelector('.lose');
var timersss = setInterval(function () {
var qm = plane.offsetTop - enemy.offsetTop - enemy.offsetHeight;
var lb = plane.offsetLeft + plane.offsetWidth;
if (qm < -10 && qm > -30 && lb > enemy.offsetLeft && lb < enemy.offsetLeft + enemy.offsetWidth + plane.offsetWidth) {
var zhuangji = new Audio('./zhuangji.wav')
zhuangji.play();
plane.style.display = "none";
clearInterval(timersss);
lose.style.display = "block";
clearInterval(timerss);
bcc.style.backgroundColor = '#CCC';
}
}, 10)