jq版-飞机大战

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
        }