HTML+CSS+JavaScript实现植物大战僵尸

求赞环节：创作不易，记得 点赞+评论+转发 谢谢你一路支持

[](()本游戏演示地址：[植物大战僵尸演示地址](()

[](()1、游戏介绍

---

《植物大战僵尸》是由PopCap Games开发的一款益智策略类单机游戏

玩家通过武装多种植物切换不同的功能，快速有效地把僵尸阻挡在入侵的道路上。不同的敌人，不同的玩法构成五种不同的游戏模式，加之黑夜、浓雾以及泳池之类的障碍增加了游戏挑战性。

《植物大战僵尸》集成了即时战略、塔防御战和卡片收集等要素，玩家控制植物抵御僵尸的进攻，保护这片植物园。游戏中可以选用的植物有40多种，而每个场景最多只能选用10种植物，这就需要玩家根据自己的游戏策略来作出取舍。因为它成功地借鉴了一些战略游戏的要素——采集资源并利用资源建造其它单位，有些玩家甚至拿星际的战略往这款游戏中套用，以阐述这款游戏需要在何时发展“经济”，何时发展“兵力”。

这款游戏要求玩家既有是大脑的智慧，又有小脑的反应。在有了正确的战略思想之后，还要靠战术将战略实现出来。战术范围包括很广，植物的搭配、战斗时的阵型、植物与僵尸相遇时是战是防这都属于战术的范畴。正确的战术是玩家在战斗中胜利关键。选择正确的战术，需要先分析情况，再做出决定。那么提高战术水平也是要提高分析情况的能力。

注：以上文字来源于百度百科

[](()2、游戏说明及效果展示

---

本文通过HTML+CSS+JavaScript实现简单的植物大战僵尸小游戏，[并附有演示地址，点击这里试玩](()。

游戏分为冒险模式和小游戏模式，如下图：

冒险模式有第一大关、第二大关。

第一大关包括十个冒险关卡，大二大关目前有两个关卡，你可以进行二次开发，扩展关卡。效果图如下：


小游戏模式有“超乎寻常的压力”、“你的心脏够强劲吗”、“僵尸快跑”、“乱墓”等关卡，效果图如下：

游戏的整个文件结构如下：

[](()3、游戏中部分植物介绍

---

Peashooter豌豆射手

耐久：300

临界点： 0

攻击：20

射程：正前方一整行

射击间隔：1.4秒

价格： 100阳光

冷却时间：7.5秒

可栽种于草地/睡莲/花盆

特性：每次攻击射出一发豌豆

SunFlower向日葵

耐久：300

临界点： 0

生产间隔：24秒

价格： 50阳光

冷却时间： 7.5秒

可栽种于草地/睡莲/花盆

特性： 每24秒生产一个中型阳光（25阳光值）

Cherry Bomb樱桃炸弹

耐久：300

临界点：0

攻击：1800

范围： 以自身为圆心爆炸半径为1.5格的圆形

准备时间： 3.5秒

价格：150阳光

冷却时间：50秒

可栽种于草地/睡莲/花盆

特性： 杀伤范围内大杀伤力爆破

Wall-nut坚果墙（坚果，墙果）

耐久：4000

临界点：0

损伤点1：int（MAX HP_2/3）

损伤点2：int（MAXHP_1/3）

价格：50阳光

冷却时间： 30秒

可栽种于草地/睡莲/花盆

特性：以高耐久阻挡僵尸前行