HTML5 版塔防游戏

我比较喜欢塔防类的游戏,前段时间非常流行的植物大战僵尸就属于塔防游戏。最近看到有人用 HTML5 写出了很多非常有趣的作品,我忍不住也尝试了一番,于是有了这个HTML5 版塔防游戏

HTML5 版塔防游戏

请用 IE9 / Chrome / Opera 等支持 HTML5 并且有较快的 JavaScript 引擎的浏览器来访问上面的页面。游戏很简单:怪物从地图左上角出现,前往右下角,你的任务是建造炮台或围墙,阻止怪物的前进。每当有怪物到达终点,你游戏中的生命值就会下降,如果生命值降为 0 ,游戏就输了。目前这个版本中,怪物是无穷无尽的,游戏目的就是要抵抗尽可能长的时间,将来的版本中应该会加入更多的场景或关卡。

目前这个版本中所有的物体全是用 HTML5 画出来的,包括炮台、怪物(用不同颜色和大小的圆圈代表)、子弹等,没有用到图片,因为我还没有来得及去寻找或制作合适的图片,所以,画面看起来可能比较简朴或抽象。将来的版本中我会逐步将游戏中的元素替换为更生动的图片。

这个游戏还处于测试版,问题及 bug 一定不少,如果你发现了,欢迎给我留言。不过,有一些问题受到技术或资源的限制,我不一定能较好地解决,如果遇到这样的情况,还请诸位读者理解。:-)

最近我正在工作之余抽空完善这个游戏,已知的问题主要有:

1、各参数之间或许还不太平衡,游戏的难度可能还不是很合适;
2、游戏中大量变量暴露在外面,容易被用户修改。比如游戏过程中,在浏览器地址栏输入“javascript: TD.money = 1000000;”并回车即可将金钱改为 100 万。不过反正目前这个游戏并不存在竞技或商业目的,用户的修改并不会影响到他人,所以问题不大,将来会设法修正这个问题(这个问题已用闭包修复)。

另外,为了方便测试,我也在这个游戏中准备了一些作弊“秘籍”,如下。你只需要将相应的“秘籍”代码(下文中斜体字部分)输入到浏览器地址栏并按回车,应该就能生效。

1、增加 100 万金钱:javascript:_TD.cheat=”money+”;void(0);
2、难度增倍:javascript:_TD.cheat=”difficulty+”;void(0);
3、难度减半:javascript:_TD.cheat=”difficulty-“;void(0);
4、生命值恢复:javascript:_TD.cheat=”life+”;void(0);
5、生命值降为最低:javascript:_TD.cheat=”life-“;void(0);

当然,“秘籍”主要是用于测试的,注意不要滥用,否则会降低游戏乐趣。:-)

网上有许多有趣的 HTML5 游戏,有一些可能与这个游戏很类似,不过这一个游戏完全是我独立完成的。目前这个版本是纯静态版本,只需将相关的 html、js、css 下载到本地电脑即可正常运行(唯一的问题是字体…)。欢迎转载,如果转载的同时能保留一个本站的链接就更好了!

最后,欢迎你试玩我写的HTML5 版塔防游戏!;-)

相关帖子:HTML5塔防游戏 – 圈圈版

105 Replies to “HTML5 版塔防游戏”

  1. 不错不错,很好玩。最高才54关,前边的诸位上70、100怎么布局的?还是说现在的版本难度高了?

  2. 我玩到了53波,其实还可以更久的,只是一个不小心,顺便说一下一个bug:当怪物运动很快的时候,我用路障会堵不住…准确的说是来不及堵住,不知道是浏览器的问题还是本身的bug呢?

  3. ————————–||———————— || ————————||———————— || ————————||———————— | * 用的这种之字形回廊布局…准备逐步全都换上激光炮。打到30关不想继续了,貌似还挺吃CPU啊。某策略:当队伍走到右侧的时候,在左侧开一个口子,会有一部分跑回来,然后又堵住这口子,他们就白跑了….没想过彻底堵住,看来我还不够奸啊….http://uhatt.vcimg.com/201204/25/3023611_1335313044YYmI.jpg

  4. 我下载的版本貌似寻路有点问题。本来想让怪物左右跑的,结果把一边的开口打开后,另一边的开口不能关闭。

  5. 在开源中国社区看到这个游戏,非常好。顺便为我写的 HTML5 推箱子打个广告HTML5推箱子地址:http://sokoban.ws/sokoplayer/SokoPlayer_HTML5.php

  6. 老兄,这个游戏室很好玩,代码也是开源的,分块化的设计,防作弊思想都很不错.很喜欢你的mix函数,你竟然想到合并一个对象和一个实例来实现继承,这样既可以继承属性,又可以继承方法,牛!遗憾的是,代码逻辑让我看晕了,那个Stage,Scenes,Scene,Act他们之间是什么样的关系呢?,感觉他们在相互引用,看晕了,望指点哦~_~

    1. 那个mix的思想是从淘宝的前端库KISSY里学来的。:-) Stage、Scene、Act是包含关系,一个Stage里可以有多个Scene,一个Scene里可以有多个Act。当初曾想把这个游戏做得更复杂一些,包含更多场景,不过后来没有完成。

    1. 多谢~,不过最近没有时间与心思继续完善这个游戏了。看来你最近对JS研究很多啊,期待很快能看到你的作品!

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s