<!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;
}
html,body{
overflow: hidden;
}
.container{
margin: 100px auto;
width: 400px;
height: 500px;
background: rgb(245, 241, 241);
position: relative;
border: 1px #ccc solid;
}
.plane{
z-index: 100;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 50%;
background: url(./plane.jpg) no-repeat ;
background-size: 100%;
}
.bullet{
width: 6px;
height: 20px;
background-color: yellow;
border-radius: 2px 2px 0 0;
box-shadow:0 2px 5px white ;
position: absolute;
top: 5px;
left: calc(50% - 60px);
}
.enemy{
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 50%;
background: url(./plane.jpg) no-repeat ;
background-size: 100%;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./req.js"></script>
</head>
<body>
<div class="container">
<div class="plane" >
</div>
</div>
<script>
$(()=>{
let shoot = dsl.throttle(function () {
let bullet = $('<div/>').addClass('bullet')
$('.container').append(bullet)
bullet.css({
top: $('.plane').position().top +$('.plane').innerHeight(),
left: $('.plane').position().left + $('.plane').innerWidth() / 2 - bullet.innerWidth() / 2
})
}, 200)
$(window).keydown(e=>{
let {keyCode}=e
// console.log(e.keyCode)
let {top,left} =$(".plane").position()
switch (keyCode) {
case 38:
top -=10
break;
case 40:
top +=10
break;
case 37:
left -=10
break;
case 39:
left +=10
case 74:
shoot()
break;
}
let maxTop = $('.container').innerHeight()-$('.plane').innerHeight()
let maxLeft= $('.container').innerWidth()-$('.plane').innerWidth()
if (top>maxTop) top=maxTop
if (top<0) top=0
if (left>maxLeft) left=maxLeft
if (left<0) left=0
$(".plane").css({
top,
left
})
})
setInterval(() => {
$(".bullet").each(function(){
let { top } = $(this).position()
$(this).css('top',$(this).position().top+10)
if (top < -50) $(this).remove()
})
}, 500);
let timer1 = setInterval(() => {
$('.enemy').each(function (j, enemy) {
if (calcCollision(enemy, $('.plane').get(0))) {
alert("GG")
clearInterval(timer1)
location.reload()
}
$('.bullet').each(function (i, bullet) {
if (calcCollision(bullet, enemy) || calcCollision(enemy, bullet)) {
bullet.remove()
enemy.remove()
}
})
})
}, 50);
setInterval(() => {
let enemy = $('<div/>').addClass("enemy")
$('.container').append(enemy)
enemy.css({
top:$(".container").innerHeight()-enemy.innerHeight(),
left:dsl.rnd($('.container').innerWidth()-enemy.innerWidth())
})
}, 2000);
setInterval(() => {
$('.enemy').each(function () {
let { top } = $(this).position()
$(this).css('top',$(this).position().top - 10)
if (top < 0) $(this).remove()
})
}, 200);
function calcRTB(node){
return{
t:node.offsetTop,
b:node.offsetTop+node.offsetHeight,
l:node.offsetLeft,
r:node.offsetLeft+node.offsetWidth,
}
}
function calcCollision(a, b) {
a = calcRTB(a)
b = calcRTB(b)
if (a.l > b.l && a.l < b.r && a.t > b.t && a.t < b.b)
return true
else if (a.l > b.l && a.l < b.r && a.b > b.t && a.b < b.b)
return true
else if (a.r > b.l && a.r < b.r && a.b > b.t && a.b < b.b)
return true
else if (a.r > b.l && a.r < b.r && a.t > b.t && a.t < b.b)
return true
else return false
}
}
)
</script>
</body>
</html>
req.js
throttle(fn, wait) {
let endTime = +new Date;
return function () {
if (+new Date - endTime < wait) {
return console.log('太频繁了');
}
fn.apply(this,arguments);
endTime = +new Date
}
},
rnd(max,min=0){
return Math.round(Math.random()*(max-min))+min
}
