js实现飞机大战

效果图

 CSS代码

.bcc {
            width: 440px;
            height: 600px;
            background-color: white;
            margin: 0 auto;
            position: relative;
            border: 2px solid black;
            background: url(./bcc.png);
            background-size: 100%;
            
        }


        .plane {
            width: 40px;
            height: 30px;
            position: absolute;
            left: 200px;
            top: 570px;
        }

        .bcc .blt {
            width: 5px;
            height: 10px;
            background-color: red;
            position: absolute;
        }

        .enemy {
            position: absolute;
            left: 200px;
        }
        .lose{
            color: red;
            width: 140px;
            height: 40px;
            background-color: white;
            line-height: 40px;
            position: absolute;
            left: 150px;
            top: 250px;
            z-index: 99;
            

        }

HTML代码

    <div class="bcc">
        <p class="lose" style="display: none;">游戏结束哈哈哈哈</p>
        <div class="blt" style="display: none;"></div>
        <div class="plane">
            <img src="./plane.png" alt="">
        </div>
        <div class="enemy"><img src="./enemy.png" alt=""></div>
    </div>

JS代码

 var bcc = document.querySelector('.bcc');
        var plane = document.querySelector('.plane');
        document.onkeydown = function (e) {
            switch (e.keyCode) {
                case 37:
                    if (plane.offsetLeft > 0) {
                        plane.style.left = plane.offsetLeft - 40 + 'px';
                    }
                    break;
                case 38:
                    if (plane.offsetTop > 0) {
                        plane.style.top = plane.offsetTop - 40 + 'px';
                    }
                    break;
                case 39:
                    if (plane.offsetLeft < 400) {
                        plane.style.left = plane.offsetLeft + 40 + 'px';
                    }
                    break;
                case 40:
                    if (plane.offsetTop < 570) {
                        plane.style.top = plane.offsetTop + 40 + 'px';
                    }
                    break;
                case 32:
                    fashe();
                    break;

            }
        }

        //发射函数
        function fashe() {
            var mp3 = new Audio('./zidan.wav');
            mp3.play();
            var blt = document.querySelector('.blt');
            if (blt.style.display == 'none') {
                blt.style.display = 'block';
                blt.style.left = plane.offsetLeft + plane.offsetWidth / 2 - blt.offsetWidth / 2 + "px";
                blt.style.top = plane.offsetTop + "px";
            }
            var timer = setInterval(function () {
                // 定时器子弹移动
                blt.style.top = blt.offsetTop - 1 + 'px';
                if (blt.offsetTop < 0) {
                    blt.style.display = 'none';
                    clearInterval(timer);
                }
            }, 10)
        }

        // 子弹消灭敌机机
        var blt = document.querySelector('.blt');
        var enemy = document.querySelector('.enemy');
        var timers = setInterval(function () {
            if (blt.offsetTop > 0 && blt.offsetTop - enemy.offsetTop - enemy.offsetHeight < 0 && blt.offsetLeft > enemy.offsetLeft && blt.offsetLeft < enemy.offsetLeft + enemy.offsetWidth) {
                var jizhong = new Audio('./jizhong.wav');
                jizhong.play();
                enemy.style.display = "none";
                clearInterval(timers);
            }
        }, 100)

        //让敌机运动起来
        var timerss = setInterval(function () {
            enemy.style.top = enemy.offsetTop + 1 + 'px';
            if (enemy.offsetTop > 570) {
                enemy.style.display = "none";
                clearInterval(timerss);
            }
        }, 20)

        //敌机撞到自己被摧毁
        var lose = document.querySelector('.lose');
        var timersss = setInterval(function () {
            var qm = plane.offsetTop - enemy.offsetTop - enemy.offsetHeight;
            var lb = plane.offsetLeft + plane.offsetWidth;
            if (qm < -10 && qm > -30 && lb > enemy.offsetLeft && lb < enemy.offsetLeft + enemy.offsetWidth + plane.offsetWidth) {
                var zhuangji = new Audio('./zhuangji.wav')
                zhuangji.play();
                plane.style.display = "none";
                clearInterval(timersss);
                lose.style.display = "block";
                clearInterval(timerss);
                bcc.style.backgroundColor = '#CCC';
                

            }
        }, 10)