JavaScript飞机（正方形飞机）大作战

最新推荐文章于 2022-08-08 19:04:37 发布

TA_WORLD

最新推荐文章于 2022-08-08 19:04:37 发布

阅读量329

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html dom

本文链接：https://blog.csdn.net/qq_56303170/article/details/120132115

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JavaScript飞机（正方形飞机）大作战

要求：

飞机随着鼠标移动，或者使用键盘操作，飞机不能超出界面框
每隔相应的时间，友方飞机自动发射子弹
每个相应的时间，出现一个敌机
子弹碰到敌机，敌机和子弹消失
友机和敌机相撞，游戏结束

涉及内容：

setInterval定时器，主要用于发射子弹和敌机的出现
元素的大小和元素距上、左可视窗口的大小的距离，需要offset和client相关知识
document.documentElemnet.clientWidth 可视窗口的宽度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;

        }
        #first-page {
            width: 500px;
            margin: 200px auto;
            font-size: 50px;
        }
        #first-page button {
            height: 50px;
            width: 200px;
            font-size: 25px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        #game {
            display: none;
        }
        .score {
            font-size: 20px;
        }
        #myfly {
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: fixed;
            left: 0px;
            top: 0px;
            background-color: #ADA8A8;
            cursor: none;
        }
        .bullets div {
            width:5px;
            height: 5px;
            border-radius: 50%;
            background-color: green;
            position: fixed;
        }
        .enemy div {
            width: 50px;
            height: 30px;
            position: fixed;
            text-align: center;
            line-height: 30px;
            background-color: red;
        }
        #over {
            display: none;
            font-size: 50px;
            width: 500px;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div id="first-page">
        <h1>飞机大作战</h1>
        <button id="start">开始游戏</button>
        &nbsp&nbsp
        <button id="rule">游戏规则</button>
    </div>
    <div id="game">
        <div class="score">当前的分数为：0</div>
        <div id="myfly">友机</div>
        <div class="bullets"></div>
        <div class="enemy"></div>
    </div>
    <div id ="over">
        <h1>GAME OVER</h1>
    </div>
    <script type="text/javascript">
        var firstPage = document.querySelector('#first-page');
        var startButton = document.querySelector('#start');
        var ruleButton = document.querySelector('#rule');
        var game = document.querySelector('#game');
        var myfly = document.querySelector('#myfly');
        var bullets = document.querySelector('.bullets');
        var enemy = document.querySelector('.enemy');
        var n = 0;// 记录击倒的飞机数
        var score = document.querySelector('.score');
        var over = document.querySelector('#over');

        // 点击显示规则
        ruleButton.addEventListener('click', function(){
            alert('管你知不知道，玩就对了');
        })
        // 点击开始游戏
        startButton.addEventListener('click', function fn(){
            firstPage.style.display = 'none';
            game.style.display = 'block';
            // 鼠标控制友方飞机的移动
            document.addEventListener('mousemove', function(e){
                let mouseX = e.pageX;
                let mouseY = e.pageY;
                let x = mouseX - myfly.clientWidth / 2;
                let y = mouseY - myfly.clientHeight / 2;
                if (x < 0){
                    x = 0;
                }else if (x > (document.documentElement.clientWidth - myfly.clientWidth)) {
                    x = document.documentElement.clientWidth - myfly.clientWidth;
                }
                if (y < 0){
                    y = 0;
                }else if (y > (document.documentElement.clientHeight - myfly.clientHeight)) {
                    y = document.documentElement.clientHeight - myfly.clientHeight;
                }
                myfly.style.left = x + 'px';
                myfly.style.top = y + 'px';
            })
            // 键盘控制友方飞机的移动
            document.addEventListener('keydown', function(e){
                inputCode = e.keyCode;
                let x;
                let y;
                if(inputCode == 87){
                    myfly.style.top = myfly.offsetTop - 5 + 'px';
                }else if (inputCode == 65) {
                    myfly.style.left = myfly.offsetLeft - 5 + 'px';
                }else if (inputCode == 83) {
                    myfly.style.top = myfly.offsetTop + 5 + 'px';                   
                }else if (inputCode == 68) {
                    myfly.style.left = myfly.offsetLeft + 5 + 'px';
                }
            })
            // 产生子弹
            var makeBullet = setInterval(function(){
                let bullet = document.createElement('div');
                bullet.style.left = myfly.offsetLeft + myfly.clientWidth / 2 + 'px';
                bullet.style.top = myfly.offsetTop + 'px';
                bullets.appendChild(bullet);
                // 子弹的移动,子弹在发射后只有top值在改变
                let move = setInterval(function(){
                    bullet.style.top = bullet.offsetTop - 7 + 'px';
                    // 超出可视区就删除结点
                    if(bullet.style.top <= 0){
                        bullets.removeChild(bullet);
                    }
                }, 200)
            }, 1000);
            // 产生敌机
            var makeEnemy = setInterval(function(){
                let enemyFly = document.createElement('div');
                let x = Math.floor(Math.random() * ((document.documentElement.clientWidth - enemyFly.clientWidth) + 1)) + 0;
                let y = 0;
                enemyFly.style.left = x + 'px';
                enemyFly.style.top = y + 'px';
                enemyFly.innerHTML = '敌机';
                enemy.appendChild(enemyFly);
                // 敌机的移动
                let move = setInterval(function(){
                    enemyFly.style.top = enemyFly.offsetTop + 10 + 'px';
                    if (enemyFly.offsetTop >= document.documentElement.clientHeight){
                        enemy.removeChild(enemyFly);
                    }
                    attack(enemyFly);
                    if (myfly.offsetTop - enemyFly.offsetTop - enemyFly.clientHeight <= 0 && (enemyFly.offsetLeft + enemyFly.clientWidth >= myfly.offsetLeft && enemyFly.offsetLeft + enemyFly.clientWidth <= myfly.offsetLeft + myfly.clientWidth)) {
                       window.clearTimeout(makeBullet);
                       window.clearTimeout(makeEnemy);
                       game.style.display = 'none';
                       over.style.display = 'block';
                    }
                }, 200)
            }, 5000)
            // 当子弹碰到敌机，敌机和子弹消失
            function attack(obj){
                let divs = document.querySelectorAll('.bullets > div');
                for(i = 0; i < divs.length; i++){
                    if(divs[i].offsetTop - obj.offsetTop - obj.clientHeight <= 0 && (divs[i].offsetLeft >= obj.offsetLeft && divs[i].offsetLeft <= obj.offsetLeft + obj.clientWidth)){
                        n++;
                        score.innerHTML = '当前的分数为：' + n*10;
                        bullets.removeChild(divs[i]);
                        enemy.removeChild(obj);
                    }
                }
            }
        })
    </script>
</body>
</html>