HTML5 塔防游戏分享

  使用 HTML5 开发的塔防游戏。

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

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

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

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

在线演示地址:http://www.muu.cc/html5/td/

代码下载地址:http://www.linuxidc.net/thread-1639-1-1.html

[图片]1.png

[图片]2.png

[图片]3.png

[图片]4.png

[图片]5.png

[图片]6.png

[图片]7.png

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

  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 版塔防游戏!;-)

本文作者:oldj.net

原文地址:https://www.cnblogs.com/hicjiajia/p/1940180.html