1.首先布局,让飞机与游戏界面位置绝对定位,运用posititon
*{
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%;
}
<div class="container">
<div class="plane" >
</div>
</div>
2.引入jq文件库:可以在CDN上引入,网址为:https://www.bootcdn.cn/jquery/,
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
或者下载并放入项目文件,并用js引入(取决于自己的路径)
<script src="jq/jquery.js"></script>
3、首先获取键盘keycode值,控制飞机的上下左右移动,并且控制飞机每次移动的距离
4、运用jquery中position() 方法将获取的left,top定义飞机的位置
5、制造子弹,运用jquery中创建节点方式,并且运用节流函数,间隔多久发射子弹,并将子弹位置相对于飞机的位置,
6、制造敌机,与子弹方法一致,但是敌机位置是相对与游戏界面,不超过界面,
7、设置敌机定时器,多少时间内移动距离,超过游戏界面,将盒子清除,remove()
8,下面是计算子弹,飞机与敌机的位置,相碰撞时,消失的问题,敌机与子弹的位置为以下情况时,(8种方式)双方消失:
<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>
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
}