jQuery-demo-plane

jq-飞机demo

<style>
        .container {
            width: 500px;
            position: relative;
            height: 80vh;
            margin: 10vh auto;
            overflow: hidden;
            background: #000;
        }
        .plane {
            width: 120px;
            height: 80px;
            background: url(./plane.png) 0 / 100% 100%;
            position: absolute;
            left: calc(50% - 40px);
            bottom: 20px;
        }
        .bullet {
            width: 8px;
            height: 22px;
            background: #ff0;
            position: absolute;
            border-radius: 10px 10px 0 0;
            box-shadow: 0 5px 5px rgb(9, 95, 35);
        }
        .enemy {
            width: 80px;
            height: 50px;
            background: url(./plane.png) 0 / 100% 100%;
            position: absolute;
            top: 0;
        }

        .score {
            position: absolute;
            color: red;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
    
     <h1 class="score">0</h1>
    <div class="container">
        <div class="plane"></div>
    </div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            let score = 0
            let maxLeft = $('.container').innerWidth() - $('.plane').innerWidth()
            let maxTop = $('.container').innerHeight() - $('.plane').innerHeight()

            $(window).keydown(function ({ keyCode }) {
                // console.log(keyCode);
                let { top: t, left: l } = $('.plane').position()
                switch (keyCode) {
                    case 87:
                        t -= 10
                        break;
                    case 83:
                        t += 10
                        break;
                    case 65:
                        l -= 10
                        break;
                    case 68:
                        l += 10
                        break;
                    case 74:
                        shoot()
                        break;
                    default:
                        break;
                }

                if (l < 0) l = 0
                if (t < 0) t = 0
                if (l > maxLeft) l = maxLeft
                if (t > maxTop) t = maxTop

                $('.plane').css('top', t).css('left', l)
            })

            let entTime = new Date()
            function shoot() {
                if (new Date() - entTime < 500) return;
                let bullet = $('<div/>').addClass('bullet')
                $('.container').append(bullet)
                bullet.css('top', $('.plane').position().top - 20)
                bullet.css('left', $('.plane').position().left + $('.plane').innerWidth() / 2 - bullet.innerWidth() / 2)
                entTime = new Date()
            }

            setInterval(() => {
                $('.bullet').each(function () {
                    let bullet = $(this)
                    let { top } = bullet.position()
                    if (top < 0) bullet.remove()
                    else bullet.css('top', bullet.position().top - 10)
                })
            }, 100);

            setInterval(() => {

                $('.enemy').each(function () {
                    let enemy = this

                    if (calc(enemy, $('.plane').get(0)) || calc($('.plane').get(0), enemy)) {
                        console.log('GG');
                        location.reload()
                    }

                    $('.bullet').each(function () {
                        let bullet = this
                        if (calc(enemy, bullet) || calc(bullet, enemy)) {
                            bullet.remove()
                            enemy.remove()
                            score += 10
                            $('.score').text(score)
                        }
                    })
                })

            }, 50);

            setInterval(() => {
                let enemy = $('<div/>').addClass('enemy')
                $('.container').append(enemy)
                enemy.css('left', Math.round(Math.random() * ($('.container').innerWidth() - enemy.innerWidth())))
            }, 2000);

            setInterval(() => {
                $('.enemy').each(function () {
                    let enemy = $(this)
                    let { top } = enemy.position()
                    if (top > $('.container').innerHeight()) enemy.remove()
                    else enemy.css('top', enemy.position().top + 20)
                })
            }, 200);

            function getLTRB(node) {
                return {
                    l: node.offsetLeft,
                    t: node.offsetTop,
                    r: node.offsetLeft + node.offsetWidth,
                    b: node.offsetTop + node.offsetHeight
                }
            }

            function calc(a, b) {
                a = getLTRB(a)
                b = getLTRB(b)

                if (b.l > a.l && b.l < a.r && b.t > a.t && b.t < a.b) return true
                else if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return true
                else if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return true
                else if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return true
                else return false
            }



        })
    </script>