<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 600px;
height: 80vh;
background-color: black;
margin: 10vh auto;
position: relative;
}
.plane{
width: 150px;
height: 80px;
position: absolute;
left: calc(50% - 3.75rem);
bottom:10px;
background: url(./ccc.png) 0 / 100% 100%;
}
.bullet {
color: gold;
width: 8px;
height: 20px;
box-shadow: 0 4px 5px
border-radius: 4px 4px 0 0 ;
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 }) => {
let top = plane.position().top
let left = plane.position().left
console.log(top);
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()
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 })
}
})
function shoot() {
let bullet = $("<div/>").addClass("bullet")
container.append(bullet)
bullet.css({
top: plane.position().top - bullet.innerHeight,
left: plane.position().left + plane.innerWidth
})
}
setInterval(() => {
$(".bullet").each(function () {
let bullet = $(this)
bullet.css({
top: bullet.position().top
})
if (bullet.position().top < 0) {
bullet.remove()
}
})
}, 100
)
})
</script>
</body>
</html>
