我比较喜欢塔防类的游戏,前段时间非常流行的植物大战僵尸就属于塔防游戏。最近看到有人用 HTML5 写出了很多非常有趣的作品,我忍不住也尝试了一番,于是有了这个HTML5 版塔防游戏。
请用 IE9 / Chrome / Opera 等支持 HTML5 并且有较快的 JavaScript 引擎的浏览器来访问上面的页面。游戏很简单:怪物从地图左上角出现,前往右下角,你的任务是建造炮台或围墙,阻止怪物的前进。每当有怪物到达终点,你游戏中的生命值就会下降,如果生命值降为 0 ,游戏就输了。目前这个版本中,怪物是无穷无尽的,游戏目的就是要抵抗尽可能长的时间,将来的版本中应该会加入更多的场景或关卡。
目前这个版本中所有的物体全是用 HTML5 画出来的,包括炮台、怪物(用不同颜色和大小的圆圈代表)、子弹等,没有用到图片,因为我还没有来得及去寻找或制作合适的图片,所以,画面看起来可能比较简朴或抽象。将来的版本中我会逐步将游戏中的元素替换为更生动的图片。
这个游戏还处于测试版,问题及 bug 一定不少,如果你发现了,欢迎给我留言。不过,有一些问题受到技术或资源的限制,我不一定能较好地解决,如果遇到这样的情况,还请诸位读者理解。:-)
最近我正在工作之余抽空完善这个游戏,已知的问题主要有:
- 各参数之间或许还不太平衡,游戏的难度可能还不是很合适;
游戏中大量变量暴露在外面,容易被用户修改。比如游戏过程中,在浏览器地址栏输入“javascript: TD.money = 1000000;”并回车即可将金钱改为 100 万。不过反正目前这个游戏并不存在竞技或商业目的,用户的修改并不会影响到他人,所以问题不大,将来会设法修正这个问题(这个问题已修复)。
另外,为了方便测试,我也在这个游戏中准备了一些作弊“秘籍”,如下。你只需要将相应的“秘籍”代码输入到浏览器的开发者控制台,应该就能生效。
// 增加 100 万金钱:
_TD.cheat="money+"
// 难度增倍:
_TD.cheat="difficulty+"
// 难度减半:
_TD.cheat="difficulty-"
// 生命值恢复:
_TD.cheat="life+"
// 生命值降为最低:
_TD.cheat="life-"
当然,“秘籍”主要是用于测试的,注意不要滥用,否则会降低游戏乐趣。:-)
网上有许多有趣的 HTML5 游戏,有一些可能与这个游戏很类似,不过这一个游戏完全是我独立完成的。目前这个版本是纯静态版本,只需将相关的 html、js、css 下载到本地电脑即可正常运行(唯一的问题是字体...)。欢迎转载,如果转载的同时能保留一个本站的链接就更好了!
最后,欢迎你试玩我写的HTML5 版塔防游戏!;-)
相关帖子:HTML5塔防游戏 - 圈圈版。

评论:
怪物会从右上方出现?我暂时没发现这个情况,可能是 bug,多谢提醒。:-)
多谢你提醒我那个 bug,不过最近两天事情较多,可能要周末时才能检查修复。:-)
目前的版本是完全开源的,在 https://github.com/oldj/html5-tower-defense 可以下载到最新的源码。
游戏中实际上只用到了一个 canvas ,所有的物品都是按一定的顺序画到这个 canvas 上去的。为了保证有的物品不被别的物品覆盖,我在程序中使用了一个长度为 10 的二维数组来管理物品渲染的顺序(模拟 10 个图层),这个数组的每一个元素也是一个数组,内容为这一层要渲染的物品。实际画图时,依次读取这个数组的 10 个“层”,再把每一“层”的元素画到 canvas 上就行了。这样就能管理渲染的图层了,比如把建筑放到数组的第 4 层,把怪物放在数组的第 5 层,这样就能保证怪物不会被建筑遮住。
不过我现在的实现也还有一些问题,比如后添加的建筑渲染时会位于先添加的武器的射程上面,有点不合理。
避免更多的全局变量是一个原因,不过更主要的是想把一些重要变量(比如生命值、金钱等)保护起来(放在闭包中),不然,一些高级或恶意用户可以很容易地写外挂(比如在浏览器地址栏输入:“javascript:a=1;void(0);”并回车)修改游戏中的变量。你应该也注意到了,我的代码中 init 一旦执行,这个入口就被删除,也就是说之后里面的所有变量对外面都不可见了。
当然,现在这个游戏是免费的,即使有人做外挂也没什么,不过如果是商业产品,可能就要认真考虑这个问题了,呵呵。
<pre>
<style>
.flip-x {
filter: FlipH;
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
}
</style>
<img src="http://oldj.net/images/oldj.net.png" class="flip-x" />
</pre>
不知你可否方便留一个联系 Email 呢?谢谢!
源码是公开的,如果有兴趣,可以fork一下自己修改。^_^
哪位大神研究一下重新出一版游戏啊
作者哥再更新一下啊 也算爷青回了