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

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

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

[](()1、游戏介绍


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

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

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

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

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

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


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

HTML+CSS+JavaScript实现植物大战僵尸_第1张图片

游戏分为冒险模式和小游戏模式,如下图:

HTML+CSS+JavaScript实现植物大战僵尸_第2张图片

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

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/202008041816104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjI1Nzc4,size_16,colo 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 r_FFFFFF,t_70)

HTML+CSS+JavaScript实现植物大战僵尸_第3张图片

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

HTML+CSS+JavaScript实现植物大战僵尸_第4张图片

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

HTML+CSS+JavaScript实现植物大战僵尸_第5张图片

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


HTML+CSS+JavaScript实现植物大战僵尸_第6张图片

Peashooter豌豆射手

耐久:300

临界点: 0

攻击:20

射程:正前方一整行

射击间隔:1.4秒

价格: 100阳光

冷却时间:7.5秒

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

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

HTML+CSS+JavaScript实现植物大战僵尸_第7张图片

SunFlower向日葵

耐久:300

临界点: 0

生产间隔:24秒

价格: 50阳光

冷却时间: 7.5秒

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

特性: 每24秒生产一个中型阳光(25阳光值)

HTML+CSS+JavaScript实现植物大战僵尸_第8张图片

Cherry Bomb樱桃炸弹

耐久:300

临界点:0

攻击:1800

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

准备时间: 3.5秒

价格:150阳光

冷却时间:50秒

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

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

HTML+CSS+JavaScript实现植物大战僵尸_第9张图片

Wall-nut坚果墙(坚果,墙果)

耐久:4000

临界点:0

损伤点1:int(MAX HP_2/3)

损伤点2:int(MAXHP_1/3)

价格:50阳光

冷却时间: 30秒

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

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

HTML+CSS+JavaScript实现植物大战僵尸_第10张图片

你可能感兴趣的:(Web前端,经验分享,前端,前端框架)