使用javascript实现植物大战僵尸部分功能

最新推荐文章于 2024-05-11 01:39:16 发布
满山猴子我腚最红#
最新推荐文章于 2024-05-11 01:39:16 发布
阅读量1.7k
点赞数 2
文章标签：前端 html css javascript
本文链接：https://blog.csdn.net/qq_61935150/article/details/122478284
版权
实现了植物的种植，随机僵尸的在随机道路上出现，射手们的攻击，土豆雷的生长等，但还有很多bug。
放上代码（判断是用多个定时器写的，比较辣鸡）
<!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">
    <script src="js/jquery3.6.0.js"></script>
    <title>植物大战僵尸</title>
    <style>
        body {
            background: url(img/background1.jpg) no-repeat fixed;
            background-position: 0% 50%;
            background-size: 130% 100%;
            transition: all 1s;
            z-index: -999;
            width: 99vw;
            height: 95.5vh;
            overflow: hidden;
        }

        #dave {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: auto;
            height: 666px;
            /* display: none; */
        }

        .sentence {
            width: 600px;
            height: 50px;
            /* border: 2px solid red; */
            font-size: 1.7em;
            line-height: 50px;
            font-family: cursive;
            font-weight: bold;
            position: absolute;
            bottom: 500px;
            left: 310px;
            text-align: center;
            cursor: pointer;
        }

        .readyzombie {
            width: 300px;
            height: 75%;
            /* border: 2px solid red; */
            position: absolute;
            top: 100px;
            right: 180px;
            display: none;
        }

        .readyzombie img {
            width: 170px;
            height: auto;
            display: inline-block;
            position: absolute;
            top: 5px;
            left: 5px;
            top: calc(var(--i)*50px);
            left: calc(var(--n)*50px);
        }

        #PrepareGrowPlants {
            width: 280px;
            height: 100px;
            /* border: 2px solid red; */
            position: absolute;
            top: 45%;
            left: 45%;
            background: url(img/PrepareGrowPlants.png) no-repeat;
            background-position-y: 0%;
            animation: PrepareGrowPlants 1.5s steps(2) forwards;
            display: none;
        }

        @keyframes PrepareGrowPlants {
            0% {}

            100% {
                background-position-y: 96%;
            }
        }

        #fightingplant {
            position: absolute;
            top: 50px;
            left: 0px;
            /* border: 1px solid red; */
            list-style: none;
            display: none;
        }

        #fightingplant li {
            width: auto;
            height: 60px;
            overflow: hidden;
            margin-bottom: 10px;
            position: relative;
            /* border: 1px solid rgb(0, 47, 255); */
        }

        #fightingplant img {
            width: 100%;
            height: auto;
            cursor: pointer;
            /* margin-top: -60px; */
        }

        #follow {
            width: 80px;
            height: auto;
            position: fixed;
            left: -100px;
            /* z-index: 99; */
        }

        #plantedarea {
            position: absolute;
            top: 100px;
            left: 380px;
            display: none;
        }

        #plantedarea tr td {
            width: 80px;
            height: 100px;
            /* background-color: rgba(65, 189, 65, 1); */
            border-radius: 50%;
            margin-right: 32px;
            margin-bottom: 22px;
            display: inline-block;
            position: relative;
        }

        #plantedarea tr td img {
            position: absolute;
            bottom: 10px;
            /* background-color: red; */
        }

        #fightingzombies img {
            position: absolute;
            z-index: -1;
            top: 60px;
            left: 1330px;
        }

        .fightingzombiesimgleft {
            animation: fightingzombiesimgleft 50s linear forwards;
        }

        @keyframes fightingzombiesimgleft {
            0% {}

            100% {
                left: 0px;
            }
        }

        .bullet {
            position: absolute;
            top: 25px;
            left: -5px;
            z-index: 9;
            opacity: 0;
            /* background-color: red; */
            /* width: 100px; */
            /* height: 100px; */
            animation: bullet 4s linear infinite;
        }

        @keyframes bullet {
            0% {}

            5% {
                opacity: 1;
            }

            51% {
                opacity: 1;
                left: 1111px;
            }

            52% {
                opacity: 0;
            }

            100% {
                opacity: 0;
                left: -5px;
            }
        }

        .PotatoMine {
            width: 80px;
            height: 60px;
            position: absolute;
            bottom: 10px;
            background: url(img/PotatoMineNotReady.gif) no-repeat;
            animation: PotatoMine 1s 5s forwards;
        }

        @keyframes PotatoMine {
            0% {}

            100% {
                background: url(img/PotatoMine.gif) no-repeat;
            }
        }

        #ZombiesWon {
            position: fixed;
            z-index: 999;
            width: auto;
            height: 100%;
            top: 0px;
            left: 20%;
            display: none;
        }
    </style>
</head>

<body>
    <!-- <div class="bullet"></div> -->
    <img src="img/transparent.png" id="follow">
    <img src="img/Dave3.gif" id="dave">
    <div class="sentence">哈喽，我的邻居</div>
    <audio src="音频/crazydaveshort1.mp3" autoplay id="daveaudio"></audio>
    <audio src="音频/uraniwani.mp3" autoplay loop id="backgroundaudio"></audio>
    <div class="readyzombie">
        <img src="img/Zombie.gif" style="--i:1;--n:1.3;">
        <img src="img/FlagZombie.gif" style="--i:2;--n:2;">
        <img src="img/Conehead.gif" style="--i:3;--n:2.5;">
        <img src="img/Buckethead.gif" style="--i:4;--n:1.5;">
        <img src="img/Zombie.gif" style="--i:5;--n:1;">
        <img src="img/FlagZombie.gif" style="--i:6;--n:2.5;">
        <img src="img/Conehead.gif" style="--i:7;--n:1;">
        <img src="img/Buckethead.gif" style="--i:8;--n:1.9;">
    </div>
    <div id="PrepareGrowPlants"></div>
    <ul id="fightingplant">
        <li><img src="img/SunFlower.png" data-thissrc="img/SunFlower1.gif"></li>
        <li><img src="img/Peashooter.png" data-thissrc="img/Peashooter.gif"></li>
        <li><img src="img/Squash.png" data-thissrc="img/Squash.gif"></li>
        <li><img src="img/SnowPea.png" data-thissrc="img/SnowPea.gif"></li>
        <li><img src="img/WallNut.png" data-thissrc="img/WallNut.gif"></li>
        <li><img src="img/PotatoMine.png" data-thissrc="img/PotatoMineNotReady.gif"></li>
        <li><img src="img/Repeater.png" data-thissrc="img/Repeater.gif"></li>
        <li><img src="img/Chomper.png" data-thissrc="img/Chomper1.gif"></li>
    </ul>
    <table id="plantedarea" cellspacing="0px">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div id="fightingzombies"></div>
    <img src="img/ZombiesWon.png" id="ZombiesWon">
    <script>
        let follow = document.querySelector('#follow')
        let dave = document.querySelector('#dave')
        let sentence = document.querySelector('.sentence')
        let daveaudio = document.querySelector('#daveaudio')
        let body = document.body
        let sentencenum = 1
        let daveaudionum = 1
        let fightingzombiesimgleft = 1330
        const fightingzombiesimgtop = [
            '60px', '190px', '320px', '425px', '560px'
        ]
        const fightingzombies = [
            'img/Zombie.gif',
            'img/FlagZombie.gif',
            'img/ConeheadZombie.gif',
            'img/BucketheadZombie.gif'
        ]
        let startfighting = false

        function accident() {
            daveaudio.play
        }
        accident()
        const sentencearr = [
            '哈喽，我的邻居',
            '我姓疯，名戴夫，不过大家都喜欢叫我疯狂戴夫',
            '听好，现在有一批僵尸来到镇上，包围了我们!',
            '你必须用花园里那些不起眼的植物来消灭它们',
            '祝你好运!!!'
        ]
        const daveaudioarr = [
            '音频/crazydaveshort1.mp3',
            '音频/crazydavelong2.mp3',
            '音频/crazydavelong3.mp3',
            '音频/crazydaveshort3.mp3',
            '音频/crazydavelong2.mp3'
        ]
        sentence.addEventListener('selectstart', (e) => {
            e.preventDefault();
        });

        sentence.addEventListener('click', () => {
            dave.setAttribute('src', 'img/Dave3.gif')
            if (sentencenum < 4) {
                sentencenum++
                sentence.innerHTML = sentencearr[sentencenum]
            }
            if (daveaudionum < 4) {
                daveaudionum++
                daveaudio.setAttribute('src', daveaudioarr[daveaudionum])
            }
            if (daveaudionum == 4 || sentencenum == 4) {
                $('#dave,.sentence,#daveaudio').fadeOut(3000)
                setTimeout(() => {
                    body.style.backgroundPositionX = 100 + '%'
                }, 2500);
                setTimeout(() => {
                    $('#SeedChooser,.plantbox').fadeIn(1000)
                }, 3500);
                setTimeout(() => {
                    $('.readyzombie').show()
                }, 3300);
                setTimeout(() => {
                    $('.readyzombie').fadeOut(500)
                }, 5500);
                setTimeout(() => {
                    body.style.backgroundPositionX = 0 + '%'
                }, 6500);
                setTimeout(() => {
                    $('#PrepareGrowPlants').show()
                    $('#backgroundaudio').attr('src', '音频/readysetplant.mp3')
                    daveaudio.setAttribute('src', '音频/readysetplant.mp3')
                }, 7000);
                setTimeout(() => {
                    $('#PrepareGrowPlants').hide()
                    $('#fightingplant').show()
                    $('#backgroundaudio').attr('src', '音频/ultimate battlel.mp3')
                    $('#plantedarea').show()
                    startfighting = true
                }, 9000);
            }
        })
        daveaudio.addEventListener('ended', () => {
            dave.setAttribute('src', 'img/Dave.gif')
        });
        $('#fightingplant img').click(function () {
            let planting = $(this).attr('data-thissrc')
            follow.setAttribute('src', planting)
            document.addEventListener('mousemove', (e) => {
                let x = e.clientX
                let y = e.clientY
                let w = $(document).height()
                follow.style.left = x - 40 + 'px'
                follow.style.bottom = w - y - 40 + 'px'
            })
            $('#plantedarea tr td').click(function () {
                // let followsrc = follow.getAttribute('src')
                // let demo = $("<td><img src= " + followsrc + " ></td>")
                // $(this).replaceWith(demo)
                if ($('#follow').attr('src') == 'img/Peashooter.gif') {
                    let followsrc = follow.getAttribute('src')
                    let demo = $("<td><img src= " + followsrc +
                        " ><img src='img/PB00.gif' class='bullet' ></td>")
                    $(this).replaceWith(demo)
                } else if ($('#follow').attr('src') == 'img/SnowPea.gif') {
                    let followsrc = follow.getAttribute('src')
                    let demo = $("<td><img src= " + followsrc +
                        " ><img src='img/PB-10.gif' class='bullet' ></td>")
                    $(this).replaceWith(demo)
                } else if ($('#follow').attr('src') == 'img/Repeater.gif') {
                    let followsrc = follow.getAttribute('src')
                    let demo = $("<td><img src= " + followsrc +
                        " ><img src='img/PB11.png' class='bullet' ></td>")
                    $(this).replaceWith(demo)
                } else if ($('#follow').attr('src') == 'img/PotatoMineNotReady.gif') {
                    let demo = $("<td><div class='PotatoMine'></div></td>")
                    $(this).replaceWith(demo)
                } else {
                    let followsrc = follow.getAttribute('src')
                    let demo = $("<td><img src= " + followsrc + " ></td>")
                    $(this).replaceWith(demo)
                }

            })
        })

        let zombiesindex = 1

        setInterval(() => {
            if (startfighting) { //startfighting
                let fightingzombiesimgtopnum = Math.floor(Math.random() * 5)
                let fightingzombiesimgtypenum = Math.floor(Math.random() * 4)
                let createzombies = $('<img src=' + fightingzombies[fightingzombiesimgtypenum] +
                    ' data-thistop=' + fightingzombiesimgtop[fightingzombiesimgtopnum] + ' >')
                $("#fightingzombies").append(createzombies);
                $(`#fightingzombies img:nth-child(${zombiesindex})`).css({
                    'top': fightingzombiesimgtop[fightingzombiesimgtopnum]
                })
                $(`#fightingzombies img:nth-child(${zombiesindex})`).addClass('fightingzombiesimgleft')
                zombiesindex++
            }
        }, 5000);
        // let scream = true //僵尸吃掉了你的脑子！
        // setInterval(() => {
        //     if ($('#fightingzombies img').offset().left <= 20) {
        //         if (scream) {
        //             $('#ZombiesWon').show()
        //             $('#backgroundaudio').attr('src', '音频/scream.mp3')
        //             setTimeout(() => {
        //                 document.querySelector('#backgroundaudio').pause()
        //             }, 3000);
        //         }
        //         scream = false
        //     }
        // }, 500);
        setInterval(() => {
            if ($('#plantedarea tr:nth-child(1) .bullet').offset().left >= $(
                    '#fightingzombies img[data-thistop="60px"]').offset().left) {
                $('#fightingzombies img[data-thistop="60px"]').hide()
                setTimeout(() => {
                    $('#fightingzombies img[data-thistop="60px"]').show()
                }, 2000);
            }
        }, 300);
        setInterval(() => {
            if ($('#plantedarea tr:nth-child(2) .bullet').offset().left >= $(
                    '#fightingzombies img[data-thistop="190px"]').offset().left) {
                $('#fightingzombies img[data-thistop="190px"]').hide()
                setTimeout(() => {
                    $('#fightingzombies img[data-thistop="190px"]').show()
                }, 2000);
            }
        }, 300);
        setInterval(() => {
            if ($('#plantedarea tr:nth-child(3) .bullet').offset().left >= $(
                    '#fightingzombies img[data-thistop="320px"]').offset().left) {
                $('#fightingzombies img[data-thistop="320px"]').hide()
                setTimeout(() => {
                    $('#fightingzombies img[data-thistop="320px"]').show()
                }, 2000);
            }
        }, 300);
        setInterval(() => {
            if ($('#plantedarea tr:nth-child(4) .bullet').offset().left >= $(
                    '#fightingzombies img[data-thistop="425px"]').offset().left) {
                $('#fightingzombies img[data-thistop="425px"]').hide()
                setTimeout(() => {
                    $('#fightingzombies img[data-thistop="425px"]').show()
                }, 2000);
            }
        }, 300);
        setInterval(() => {
            if ($('#plantedarea tr:nth-child(5) .bullet').offset().left >= $(
                    '#fightingzombies img[data-thistop="560px"]').offset().left) {
                $('#fightingzombies img[data-thistop="560px"]').hide()
                setTimeout(() => {
                    $('#fightingzombies img[data-thistop="560px"]').show()
                }, 2000);
            }
        }, 300);
        // setInterval(() => { //土豆地雷的判断
        //     if ($('.PotatoMine').offset().left >= $(
        //             '#fightingzombies img[data-thistop="60px"]').offset().left) {
        //         $('#fightingzombies img[data-thistop="60px"]').attr('src', 'img/BoomDie.gif')
        //     }
        // }, 300);
    </script>
</body>

</html>