首页 > Web开发 > 详细

小蜜蜂游戏(JS原生)

时间:2021-09-21 02:50:07      阅读:1      评论:0      收藏:0      [点我收藏+]

技术分享图片

技术分享图片

技术分享图片

技术分享图片

点击查看代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        img {
            display: block;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .play {
            width: 800px;
            height: 800px;
            background: black;
            margin: 30px auto;
            position: relative;
        }

        .play-btn {
            width: 100px;
            height: 50px;
            border: none;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .play-score {
            color: white;
            font-size: 20px;
        }

        .play-air {
            width: 46px;
            height: 60px;
            background: url(./images/fj.png);
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .play-bee-list {
            position: absolute;
            left: 10px;
        }

        .play-bee-item1,
        .play-bee-item2,
        .play-bee-item3 {
            width: 40px;
            height: 28px;
            float: left;
        }

        .play-bee-item1 {
            background: url(./images/mf1.png);
        }

        .play-bee-item2 {
            background: url(./images/mf2.png);
        }

        .play-bee-item3 {
            background: url(./images/mf3.png);
        }

        .bullet {
            position: absolute;
            background: white;
            width: 2px;
            height: 10px;
        }
    </style>
</head>

<body>
    <div class="play">
        <button class="play-btn">开始游戏</button>
        <!-- <div class="play-score">积分:<span>0</span></div>
        <div class="play-air"></div>
        <ul class="play-bee-list clearfix">
            <li class="play-bee-item1"></li>
            <li class="play-bee-item2"></li>
            <li class="play-bee-item3"></li>
        </ul> -->
    </div>

    <script>

        let play = document.querySelector(‘.play‘);
        let playBtn = document.querySelector(‘.play-btn‘);
        let playBeeList;
        let air;
        let score;
        //1.设计关卡
        let gkNow = 0;   // 0表示第一关
        let gk = [
            {
                beeMap: [
                    2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
                    1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                    1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                    1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                    1, 1, 1, 1, 1, 1, 1, 1, 1, 1
                ],
                cols: 10
            },
            {
                beeMap: [
                    2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
                    2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
                    1, 1, 1, 1, 1, 1, 1, 1, 1, 1
                ],
                cols: 10
            },
            {
                beeMap: [
                    3, 3, 3, 3, 3, 3, 3,
                    3, 3, 3, 3, 3, 3, 3,
                    3, 3, 3, 3, 3, 3, 3
                ],
                cols: 7
            }
        ];



        //2.蜜蜂的数据
        let beeData = [
            {
                name: 1,
                style: ‘play-bee-item1‘,
                blood: 1,
                speed: 5,
                score: 10
            },
            {
                name: 2,
                style: ‘play-bee-item2‘,
                blood: 2,
                speed: 7,
                score: 20
            },
            {
                name: 3,
                style: ‘play-bee-item3‘,
                blood: 3,
                speed: 10,
                score: 30
            }
        ];



        gameStart();

        function gameStart() {  // 3.开始游戏
            playBtn.onclick = function () {
                this.remove();
                createScore();
                createBee();
                moveBee();
                oneBeeMove();
                createAir();
                handleAir();
            };
        }

        function createScore() {   //4. 创建积分
            score = document.createElement(‘div‘);
            score.className = ‘play-score‘;
            score.innerHTML = ‘积分:<span>0</span>‘;
            play.append(score);
        }

        function createBee() {   //5. 创建小蜜蜂
            if (playBeeList) {
                playBeeList.remove();
            }
            playBeeList = document.createElement(‘ul‘);
            playBeeList.className = ‘play-bee-list clearfix‘;

            let beeMap = gk[gkNow].beeMap;
            let cols = gk[gkNow].cols;

            for (let i = 0; i < beeMap.length; i++) {
                let li = document.createElement(‘li‘);
                for (let j = 0; j < beeData.length; j++) {
                    if (beeData[j].name == beeMap[i]) {
                        li.className = beeData[j].style;
                        li.blood = beeData[j].blood;
                        li.score = beeData[j].score;
                        li.speed = beeData[j].speed;
                    }
                }
                playBeeList.append(li);
            }
            play.append(playBeeList);
            playBeeList.style.width = 40 * cols + ‘px‘;

            //6. 把浮动布局转成定位布局 -> 布局转换
            let pos = [];
            let playBeeItems = playBeeList.querySelectorAll(‘li‘);
            for (let i = 0; i < playBeeItems.length; i++) {
                pos.push({ x: playBeeItems[i].offsetLeft, y: playBeeItems[i].offsetTop });
            }
            for (let i = 0; i < playBeeItems.length; i++) {
                playBeeItems[i].style.position = ‘absolute‘;
                playBeeItems[i].style.left = pos[i].x + ‘px‘;
                playBeeItems[i].style.top = pos[i].y + ‘px‘;
            }
        }

        function moveBee() {    // 7.整体移动小蜜蜂
            let speedX = 10;
            let speedY = 15;
            setInterval(function () {
                let L = playBeeList.offsetLeft;
                if (L <= 0 || L >= play.offsetWidth - playBeeList.offsetWidth) {
                    speedX *= -1;
                    playBeeList.style.top = playBeeList.offsetTop + speedY + ‘px‘;
                }
                playBeeList.style.left = L + speedX + ‘px‘;
            }, 200);
        }

        function createAir() {    //8. 创建飞机
            air = document.createElement(‘div‘);
            air.className = ‘play-air‘;
            play.append(air);
            air.style.left = (play.offsetWidth - air.offsetWidth) / 2 + ‘px‘;
        }

        function handleAir() {    // 9.操作飞机
            let timer;
            let speed = 10;
            document.onkeydown = function (ev) {

                if (ev.keyCode == 37 || ev.keyCode == 39) {
                    if (!timer) {
                        timer = setInterval(function () {
                            if (ev.keyCode == 37) {   //←
                                let L = air.offsetLeft - speed;
                                if (L < 0) {
                                    L = 0;
                                }
                                air.style.left = L + ‘px‘;
                            }
                            else if (ev.keyCode == 39) {   // →
                                let L = air.offsetLeft + speed;
                                if (L > play.offsetWidth - air.offsetWidth) {
                                    L = play.offsetWidth - air.offsetWidth;
                                }
                                air.style.left = L + ‘px‘;
                            }
                        }, 16);
                    }
                }
            };
            document.onkeyup = function (ev) {
                if (ev.keyCode == 37 || ev.keyCode == 39) {
                    clearInterval(timer);
                    timer = null;
                }
                if (ev.keyCode == 32) {  // 空格
                    createBullet();
                }
            };
        }

        function createBullet() {   // 10.创建子弹
            let bullet = document.createElement(‘div‘);
            bullet.className = ‘bullet‘;
            play.append(bullet);
            bullet.style.left = air.offsetLeft + (air.offsetWidth - bullet.offsetWidth) / 2 + ‘px‘;
            bullet.style.top = air.offsetTop - bullet.offsetHeight + ‘px‘;
            moveBullet(bullet);
        }

        function moveBullet(bullet) {   //11. 移动子弹
            //bullet
            let speedY = -5;
            let timer = setInterval(function () {
                var T = bullet.offsetTop + speedY;
                if (T < - bullet.offsetHeight) {  //判断子弹是否出界
                    clearInterval(timer);
                    bullet.remove();
                }
                else {
                    bullet.style.top = T + ‘px‘;

                    // 12.判断子弹是否跟小蜜蜂碰撞
                    let playBeeItems = playBeeList.querySelectorAll(‘li‘);
                    for (let i = 0; i < playBeeItems.length; i++) {
                        if (pz(bullet, playBeeItems[i])) {
                            if (playBeeItems[i].blood == 1) {
                                let span = score.querySelector(‘span‘);
                                span.innerHTML = Number(span.innerHTML) + playBeeItems[i].score;
                                playBeeItems[i].remove();
                            }
                            else {
                                playBeeItems[i].blood--;
                            }
                            bullet.remove();
                        }
                    }

                    //13. 是否进入下一关
                    if (playBeeItems.length == 0) {
                        gkNow++;
                        createBee();
                    }

                }
            }, 16);
        }

        function oneBeeMove() {   //14. 单兵作战
            setInterval(function () {
                let playBeeItems = playBeeList.querySelectorAll(‘li‘);
                let nowBee = playBeeItems[Math.floor(Math.random() * playBeeItems.length)];

                setInterval(function () {
                    var a = air.getBoundingClientRect().left - nowBee.getBoundingClientRect().left;
                    var b = air.getBoundingClientRect().top - nowBee.getBoundingClientRect().top;
                    var c = Math.sqrt(a * a + b * b);
                    var speedX = a / c * nowBee.speed;
                    var speedY = b / c * nowBee.speed;

                    nowBee.style.top = nowBee.offsetTop + speedY + ‘px‘;
                    nowBee.style.left = nowBee.offsetLeft + speedX + ‘px‘;

                    if (pz(air, nowBee)) {
                        location.reload();
                    }
                }, 16);

            }, 3000);
        }

        function pz(elem1, elem2) {
            var L1 = elem1.getBoundingClientRect().left;
            var R1 = elem1.getBoundingClientRect().right;
            var T1 = elem1.getBoundingClientRect().top;
            var B1 = elem1.getBoundingClientRect().bottom;
            var L2 = elem2.getBoundingClientRect().left;
            var R2 = elem2.getBoundingClientRect().right;
            var T2 = elem2.getBoundingClientRect().top;
            var B2 = elem2.getBoundingClientRect().bottom;
            if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) {   // 碰不到的情况
                return false;
            }
            else {  // 碰到的情况
                return true;
            }
        }


    </script>
</body>

</html>

小蜜蜂游戏(JS原生)

原文:https://www.cnblogs.com/jimingxiaoyi/p/15310417.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!