jQuery实现飞机大战小游戏
作者：DniNgL
这篇文章主要为大家详细介绍了jQuery实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现飞机大战的具体代码，供大家参考，具体内容如下
游戏规则：
WSAD键控制大飞机移动方向，按下J键可发射子弹消灭敌机，每歼灭一架敌机可得10分；
与敌机相撞或者有遗漏敌机没有歼灭，则游戏结束
游戏显示如下图：
css部分：
<style>
.container {
width: 800px;
height: 500px;
margin: 10vh auto;
background: #000;
position: relative;
overflow: hidden;
}
.plane {
color: #fff;
width: 70px;
height: 70px;
position: absolute;
bottom: 10px;
left: calc(50% - 30px);
background: url(img/战斗机.png) no-repeat;
background-size: 70px 70px;
}
.bullet {
width: 25px;
height: 30px;
background: url(img/子弹.png) no-repeat;
background-size: 100% 100%;
position: absolute;
}
.enemy {
width: 40px;
height: 40px;
background: url(img/战斗机.png) no-repeat;
transform: rotate(180deg);
background-size: 100% 100%;
position: absolute;
top: 0;
}
.again {
width: 220px;
height: 160px;
border: 1px solid #ccc;
box-shadow: 5px 5px #ccc;
background: rgb(252, 187, 187);
text-align: center;
line-height: 80px;
color: #fff;
font-size: 20px;
position: absolute;
top: calc(50% - 80px);
left: calc(50% - 110px);
margin: 0 auto;
cursor: pointer;
}
i {
font-style: normal;
}
.sorce {
height: 30px;
font-size: 20px;
text-align: center;
font-weight: bold;
margin: 0 auto;
position: absolute;
top: 65px;
left: calc(50% - 100px);
color: #fff;
z-index: 100;
background: linear-gradient(to right, rgb(255, 163, 220), rgb(243, 176, 213));
-webkit-background-clip: text;
color: transparent;
}
</style>
html部分：
<div class="sorce"> 击败：<i class="ok">0</i> 得分：<i class="get">0</i> </div> <div class="container"> <div class="plane"> </div> </div>
js部分：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
let maxtop = $(".container").innerHeight() - $(".plane").innerHeight()
let maxleft = $(".container").innerWidth() - $(".plane").innerWidth()
let ok = 0,
get = 0;
$(window).keydown(function ({
keyCode
}) {
let {
top: t,
left: l
} = $(".plane").position()
switch (keyCode) {
case 87:
t -= 10
break;
case 83:
t += 10
break;
case 65:
l -= 10
break;
case 68:
l += 10
break;
case 74:
shoot();
break;
default:
break;
}
if (t < 0) t = 0
if (t > maxtop) t = maxtop
if (l < 0) l = 0
if (l > maxleft) l = maxleft
$(".plane").css("top", t).css("left", l)
})
let endTime = new Date()
function shoot() {
if (new Date() - endTime < 500) return
let bullet = $('<div/>').addClass("bullet")
$('.container').append(bullet)
bullet.css('top', $('.plane').position().top - 30)
bullet.css('left', $('.plane').position().left + $('.plane').innerWidth() / 2 - bullet
.innerWidth() / 2)
endTime = new Date()
}
let timer1 = setInterval(() => {
$('.bullet').each(function () {
let bullet = $(this)
let {
top
} = bullet.position()
if (top < 0) bullet.remove()
else bullet.css('top', bullet.position().top - 10)
})
}, 100);
let timer2 = setInterval(() => {
$('.enemy').each(function () {
let enemy = this
if (calc(enemy, $('.plane').get(0)) || calc($('.plane').get(0), enemy)) {
let again = $('<div/>').html(`GAME OVER<br/>点击重新开始`).addClass(
'again')
$('.container').append(again)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
clearInterval(timer4)
}
$('.again').click(function () {
location.reload()
})
$('.bullet').each(function () {
let bullet = this
if (calc(enemy, bullet) || calc(bullet, enemy)) {
bullet.remove()
enemy.remove()
get += 10
ok++
$('.ok').html(ok)
$('.get').html(get)
}
})
})
}, 50)
let timer3 = setInterval(() => {
let enemy = $('<div/>').addClass("enemy")
$('.container').append(enemy)
enemy.css('left', Math.round(Math.random() * ($('.container').innerWidth() - enemy
.innerWidth())))
}, 2000)
let timer4 = setInterval(() => {
$('.enemy').each(function () {
let enemy = $(this)
let {
top
} = enemy.position()
if (top > $('.container').innerHeight() - enemy.innerHeight()) {
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
clearInterval(timer4)
let again = $('<div/>').html(`GAME OVER<br/>点击重新开战`).addClass(
'again')
$('.container').append(again)
$('.again').click(function () {
location.reload()
})
} else enemy.css('top', enemy.position().top + 10)
})
}, 200);
function getLTRB(node) {
return {
l: node.offsetLeft,
t: node.offsetTop,
r: node.offsetLeft + node.offsetWidth,
b: node.offsetTop + node.offsetHeight
}
}
//获取上下左右位置
function calc(a, b) {
a = getLTRB(a)
b = getLTRB(b)
//判断飞机与敌机是否相撞
if (a.l > a.l && b.l < a.r && b.t > a.t && b.t < a.b) return true
else if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return true
else if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return true
else if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return true
else return false
}
})
</script>
更多有趣的经典小游戏实现专题，分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。