游戏规则：
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="/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 -= 10break;case 83:t += 10break;case 65:l -= 10break;case 68:l += 10break;case 74:shoot();break;default:break;}if (t < 0) t = 0if (t > maxtop) t = maxtopif (l < 0) l = 0if (l > maxleft) l = maxleft$(".plane").css("top", t).css("left", l)})let endTime = new Date()function shoot() {if (new Date() - endTime < 500) returnlet 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 = thisif (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 = thisif (calc(enemy, bullet) || calc(bullet, enemy)) {bullet.remove()enemy.remove()get += 10ok++$('.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 trueelse if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return trueelse if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return trueelse if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return trueelse return false}})</script>
