HTML5 塔防游戏 - 圈圈版

最近空闲时间正在写一个HTML5 版塔防游戏,目前初步完成了基本功能,正在继续改进中。

目前这个版本没有用到图片,游戏中所有的元素(怪物、武器等)都是通过 HTML5 Canvas 的绘图方法画出来的,这算是这个版本的特色。因为这个版本中怪物只是简单地用一个圆圈来代替,所以就让我把这个版本称为圈圈版吧。圈圈版将是不用图片资源的最后一个版本,从下一个版本开始,我会尝试在其中使用图片来代替各种抽象的圈圈、线条。

为什么要开始使用图片资源呢?因为我注意到,现在的版本运行中,有很大一部分时间花在了绘制各种元素上。比如,画一个炮台,需要画 3 个同心圆(其中两个是带边框的实心圆,一个是无边框的实心圆),再画一条线段作为炮筒,而为了确定炮口的位置,需要先求出炮筒所在的直线方程(二元一次方程),再根据炮筒的长度,得到一个炮口到炮台中心的距离方程(二元二次方程),再把这两个方程联立求解,才能得到炮口的位置,正确画出炮筒来。如果不是使用内置绘图函数自己画图,而是使用图片,就只需要求出炮口方向,然后贴上对应的图片就行了,不需要画多个同心圆,也不需要解二元二次方程组。我还没有做过严格的测试,但我想后者可能会更快一些。

除了性能上的考虑,在游戏的趣味上,似乎也是图片版更有趣一些,毕竟,打真正的怪物和打一个几何意义上的圈圈至少对于大多数人来说体验是不一样的。;-)

不过,在开始新版本之前,也让我把这个圈圈版保留一下。如果有朋友对这个版本有兴趣,可以从下面的地址下载到这个版本的完整源码:

圈圈版只有一个关卡(无尽版),而且还是一个测试版,因此,各项参数或许还不合理,可能还有一些未知的 bug。这个版本仅供参考及测试使用,最新的版本还请关注本博客。:-)

PS:我发现准备图片素材比原来预期的难度要大,因此,图片版分支可能会暂停,接下来一段时间我将继续升级纯几何版(也就是上面提到的圈圈版)。:-)(2010-12-12)

分类:编程标签:HTML5网页游戏

相关文章:

评论:

oliver

报告,800的炮台被 路障覆盖了~~且800炮台可被穿透。

oldj

这个分支已经比较老了,你可以直接在线玩最新的版本。:-)

Ron

做得很不错,博主很棒

aishu

杰哥,想请你一个问题,看了你的源码,有个地方不懂。需要请教。可以留下联系方式吗?

Tikas

打到52波,还想看看最多有多少,,,,无尽!!

继续缘

这游戏写得蛮好的,就是每个文件注释里面没有说明这文件是做什么的。缺少点国外代码风范

oldj

谢谢。当时是比较偷懒,注释写得比较简单,后来也一直没有补上。以后再写时注意。 XD

发表评论: