HTML5塔防游戏 – 圈圈版

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

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

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

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

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

下载地址一:HTML5塔防游戏 – 圈圈版(v0.1.6.2970)(Google Code)
下载地址二:HTML5塔防游戏 – 圈圈版(v0.1.6.2970)(CSDN)

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

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

7 Replies to “HTML5塔防游戏 – 圈圈版”

发表评论

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