使用js实现植物大战僵尸的一些基本功能

最新推荐文章于 2024-06-24 15:17:32 发布

i you

最新推荐文章于 2024-06-24 15:17:32 发布

阅读量3.9k

点赞数 2

文章标签：前端 javascript 游戏

本文链接：https://blog.csdn.net/wwiyou/article/details/126371683

版权

这篇博客分享了作者使用JavaScript原生代码实现植物大战僵尸游戏的部分基本功能，包括向日葵、豌豆射手、坚果和土豆雷等植物，以及普通僵尸。文章在学习前端开发的过程中编写，虽然存在小bug，但JS部分注释详细，欢迎读者提供反馈和建议。

摘要由CSDN通过智能技术生成

js原生，仅实现了部分游戏基本功能。植物有向日葵，豌豆射手，坚果，土豆雷。僵尸只有普通僵尸。是在学习前端的过程写的，有小bug存在, js部分注释较全，欢迎大家批评指正。

游戏截图：

html:

<!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>pvz</title>
     <link rel="stylesheet" href="pvz.css">
</head>

<body>
     <div class="game">
          <div class="start"><span>开始摇滚吧</span></div>
          <div class="end"></div>
          <div class="card_slot">
               <div class="zanwei"><span class="sun_sum">100</span><button class="test_sun">9999阳光</button></div>
               <img src="images/向日葵卡片.png" alt="向日葵">
               <img src="images/豌豆卡片.png" alt="豌豆射手">
               <img src="images/坚果卡片.png" alt="坚果墙">
               <img src="images/土豆雷卡片.gif" alt="土豆雷">
               <div class="shovel"><img src="images/铲子.png" alt="铲子"></div>
          </div>
          <div class="game_site">
               <div>
                    <div class="route">
                         <button class="makeZombie">僵尸</button>
                    </div>
                    <div class="route">
                         <button class="makeZombie">僵尸</button>
                    </div>
                    <div class="route">
                         <button class="makeZombie">僵尸</button>
                    </div>
                    <div class="route">
                         <button class="makeZombie">僵尸</button>
                    </div>
                    <div class="route">
                         <button class="makeZombie">僵尸</button>
                    </div>
                    <div class="process"><span></span></div>
               </div>
               <table>
                    <tbody class="grid"></tbody>
               </table>
          </div>
          <input class="test" type="text" placeholder="作弊码">
          <button class="kill_zombie">僵尸全灭</button>
     </div>

     <div>
          <audio id="background_music" loop="loop">
               <source src="audio/游戏背景音乐.wav" type="audio/ogg">
          </audio>
          <audio id="plant_music">
               <source src="audio/种植声.wav" type="audio/mpeg">
          </audio>
          <audio id="hit_music">
               <source src="audio/击中声.wav" type="audio/mpeg">
          </audio>
          <audio id="collect_music">
               <source src="audio/收集.ogg" type="audio/ogg">
          </audio>
          <audio id="blast_music">
               <source src="audio/爆炸.ogg" type="audio/ogg">
          </audio>
          <audio id="zombiecoming_music">
               <source src="audio/僵尸出现.ogg" type="audio/ogg">
          </audio>
          <audio id="lose_music">
               <source src="audio/失败.ogg" type="audio/ogg">
          </audio>
          <audio id="win_music">
               <source src="audio/胜利.ogg" type="audio/ogg">
          </audio>
     </div>

</body>
<script src="pvz.js"></script>

</html>

css:

* {
     margin: 0;
     padding: 0;
}

body {
     background: url(images/body背景.png) no-repeat;
     background-size: contain;
}

.game {
     position: relative;
     width: 960px;
     margin: 50px auto 0;
     /* background-color: pink; */
}

.start,
.end {
     position: absolute;
     z-index: 1;
}

.start {
     width: 300px;
     height: 200px;
     background: url(images/开始.png) no-repeat;
     background-size: contain;
}

.end {
     background: url(images/失败.png) no-repeat;
     background-size: contain;
}

.start span {
     padding-left: 100px;
     font-weight: 700;
     font-size: 30px;
}

.card_slot {
     width: 100%;
     height: 120px;
     margin: 0 0 20px;
     background: url(images/植物商店.png) no-repeat;
     background-position-x: -80px;
     background-size: contain;
     /* background-color: skyblue; */
}

.card_slot>div {
     display: inline-block;
     wi