HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

 

1、游戏介绍

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

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

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

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

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

2、游戏说明及效果展示

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

    游戏分为冒险模式和小游戏模式,如下图:
HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)
冒险模式有第一大关、第二大关。
第一大关包括十个冒险关卡,大二大关目前有两个关卡,你可以进行二次开发,扩展关卡。效果图如下:
HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)
HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

小游戏模式有“超乎寻常的压力”、“你的心脏够强劲吗”、“僵尸快跑”、“乱墓”等关卡,效果图如下:
HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)
游戏的整个文件结构如下:
HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

3、游戏中部分植物介绍

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

Peashooter豌豆射手
耐久:300
临界点: 0
***:20
射程:正前方一整行
射击间隔:1.4秒
价格: 100阳光
冷却时间:7.5秒
可栽种于草地/睡莲/花盆
特性:每次***射出一发豌豆

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

SunFlower向日葵
耐久:300
临界点: 0
生产间隔:24秒
价格: 50阳光
冷却时间: 7.5秒
可栽种于草地/睡莲/花盆
特性: 每24秒生产一个中型阳光(25阳光值)

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

Cherry Bomb樱桃炸弹
耐久:300
临界点:0
***:1800
范围: 以自身为圆心爆炸半径为1.5格的圆形
准备时间: 3.5秒
价格:150阳光
冷却时间:50秒
可栽种于草地/睡莲/花盆
特性: 杀伤范围内大杀伤力爆破

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

Wall-nut坚果墙(坚果,墙果)
耐久:4000
临界点:0
损伤点1:int(MAX HP2/3)
损伤点2:int(MAXHP
1/3)
价格:50阳光
冷却时间: 30秒
可栽种于草地/睡莲/花盆
特性:以高耐久阻挡僵尸前行

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

Snow Pea寒冰射手(雪花豌豆)
耐久:300
临界点:0
***:20
射程: 正前方一整行
射击间隔: 1.4秒
价格:175阳光
冷却时间:7.5秒
可栽种于草地/睡莲/花盆
特性:每次***发射一颗冰豌豆,命中目标后附带冰减速效果持续10秒(被减速目标移动/***速度减半)

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

Chomper大嘴花(咀嚼者,食人花)
耐久:300
临界点:0
***:1800,对巨人僵尸每次40,可秒杀高坚果僵尸
范围:正前方约1.5格
咀嚼时间:42秒
价格:150阳光
冷却时间: 7.5秒
可栽种于草地/睡莲/花盆
特性:吞下一个自己可以吞食的僵尸,但在咀嚼僵尸的过程中十分脆弱

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

Puff-shroom小喷菇(喷射蘑菇)
耐久:300
临界点:0
***:20
射程: 正前方3格
射击间隔:1.4秒
价格:0阳光
冷却时间: 7.5秒
可栽种于草地/睡莲/花盆
特性:每次***喷出一次孢子 白天会睡觉

HTML+CSS+JavaScript实现植物大战僵尸(附演示地址)

Grave Buster墓碑吞噬者(咬咬碑,墓碑苔藓)
耐久: 300
临界点:0
吞噬时间: 4.5秒(从安放到移除墓碑)
价格:75阳光
冷却时间: 7.5秒
只可种植于墓碑上
特性: 移除墓碑恢复可种植草地吞噬完会获得银币、金币、钻石、巧克力或盆栽,吞噬过程中若被僵尸吃掉,墓碑会恢复原状

4、源码下载与演示

益智类游戏大全:请点击这里查看

本游戏演示地址:植物大战僵尸演示地址

源码下载地址:点击这里快速下载源码

注:以上大部分图片与文字来源于百度百科,源码来源于网络,若有侵权,请联系删除。

 

上一篇:Django缓存


下一篇:一起“干完”这份300页1000道面试题,进阶学习