<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="http://47.92.50.43:8888/sys/jslist"><style>
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
background-color:
margin: 10vh auto;
height: 80vh;
position: relative;
overflow: hidden;
}
.plane {
width: 150px;
height: 80px;
position: absolute;
left: calc(50% - 75px);
bottom: 10px;
background: url(./plane.png) 0 / 100% 100%;
}
.enemy {
width: 80px;
height: 50px;
position: absolute;
background: url(./plane.png) 0 / 100% 100%;
}
.bullet {
background: gold;
width: 8px;
height: 20px;
border-radius: 4px 4px 0 0;
box-shadow: 0 4px 5px
position: absolute;
}
</style></head><body> <div class="container">
<div class="plane">
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script>
$(() => {
let plane = $('.plane')
let container = $('.container')
let maxLeft = container.innerWidth() - plane.innerWidth()
let maxTop = container.innerHeight() - plane.innerHeight()
$(window).keydown(({ keyCode }) => {
// console.log(keyCode);
let top = plane.position().top
let left = plane.position().left
//根据keycode值上下左右移动
switch (keyCode) {
case 87:
top -= 10
break;
case 83:
top += 10
break;
case 65:
left -= 10
break;
case 68:
left += 10
break;
case 74:
shoot() //调用shoot方法释放子弹
break;
}
if (top < 0) top = 0
if (left < 0) left = 0
if (top > maxTop) top = maxTop
if (left > maxLeft) left = maxLeft
plane.css({ top, left })
})
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 - bullet.innerHeight(),
left: plane.position().left + plane.innerWidth() / 2 - bullet.innerWidth() / 2
})
endTime = new Date()
}
//开启定时器，不停地将所有子弹往上飞
setInterval(() => {
$('.bullet').each(function () {
let bullet = $(this)
bullet.css({
top: bullet.position().top - 10,
})
if (bullet.position().top < 0)
bullet.remove()
})
$('.enemy').each(function () {
let enemy = $(this)
enemy.css({
top: enemy.position().top + 10,
})
if (enemy.position().top > container.innerHeight())
enemy.remove()
})
}, 100);
//不间断生成敌机
setInterval(() => {
let enemy = $('<div/>').addClass('enemy')
container.append(enemy)
enemy.css({
top: 0,
left: Math.random() * (container.innerWidth() - enemy.innerWidth())
})
}, 2000);
function getPostion(node) {
return {
l: node.offsetLeft,
t: node.offsetTop,
r: node.offsetLeft + node.offsetWidth,
b: node.offsetTop + node.offsetHeight
}
}
function calcCollision(a, b) {
a = getPostion(a)
b = getPostion(b)
if (a.l > b.l && a.l < b.r && a.t > b.t && a.t < b.b) return true
if (a.l > b.l && a.l < b.r && a.b > b.t && a.b < b.b) return true
if (a.r > b.l && a.r < b.r && a.b > b.t && a.b < b.b) return true
if (a.r > b.l && a.r < b.r && a.t > b.t && a.t < b.b) return true
return false
}
//不间断检测碰撞
setInterval(() => {
let me = plane.get(0)
$('.enemy').each(function (i, enemy) {
if (calcCollision(me, enemy) || calcCollision(enemy, me)) {
alert("GG")
location.reload()
}
$('.bullet').each(function (j, bullet) {
if (calcCollision(bullet, enemy) || calcCollision(enemy, bullet)) {
bullet.remove()
enemy.remove()
}
})
})
}, 50);
})
</script></body></html>
