HTML+JS TD

因为之前写了一个画图板 ， 就想再写个塔防玩玩 所以呢，最近抽空写了个塔防 ， 一直在写 也没有总结， 就想来 ITEYE 总结一下自己塔防的设计模式以及思路，大家可以参考一下。先上图 ， 要不怕大家没兴趣了。

[img]http://dl2.iteye.com/upload/attachment/0085/4255/cf365def-ddc6-3550-9e73-38dc4e7ea9c2.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0085/4253/0441898d-46c1-3bba-96c4-9efbcff040eb.jpg[/img]

1.做这个塔防我用到了 8 张 canvas 分别是
<canvas id="map_canvas" style="z-index:0"></canvas> //地图
<canvas id="mouster_canvas"></canvas> //怪物
<canvas id="bullet_canvas" style="z-index:2"></canvas> //子弹
<canvas id="tower_canvas" style="z-index:1"></canvas> //塔
<canvas id="bak_canvas" style="z-index:99"></canvas> //备用
<canvas id="tower_info_canvas" style="z-index:2"></canvas> //塔的信息
<canvas id="background_canvas" style="z-index:-1"></canvas> //地图
<canvas id="info_canvas" style="z-index:3"></canvas> //所有信息 包括金钱提示之类的
这8张canvas 重叠起来就是我们的 游戏了 ， 自己只用操作自己的 画图板即可，否则清空画板的时候 维护的成本太大。

2.接下来说一下我的代码 ， 让大家可以看起来比较轻松一点。 代码的分布 和 canvas 基本做到了对应， 一张canvas 就对应以一个 js 去控制 。 如图：看名字应该差不多就能理解了

[img]http://dl2.iteye.com/upload/attachment/0085/4233/f7158458-9d4c-3473-aca2-e2962625168c.jpg[/img]

3.这里开始讲解一下代码的设计。简单说明一下把

[img]http://dl2.iteye.com/upload/attachment/0085/4244/4697cf19-a499-3c9f-955b-1b05b2a68a6d.jpg[/img]

首先先看一下地图的代码 map.js 如图,大家可以看到里面有一个 二维数组 用于标记地图。0带表不能建造，1代表是怪物行走的路， 肯定也不能建造 ， 2代表是可以建造的区域。 那么初始化的时候只需要判断二维数组中的值 ，画出相应的图标即可 。 SO EASY ！所类似的 还有 tower.js 中的 二维数组标记了 塔的位置和类型 ， background.js 中的二维数组标记了 背景等等。 同理！

之后看一下对象的处理 ，当出怪的时候其实就是创建一个怪物的对象 ， 然后把怪物放入 now_mousterAry 的数组中即可 ， 其他的事情，创建的方法一概不管。 然后其他地方需要用到， 则取 now_mousterAry 拿数据即可 ， 包括怪物行走 ， 扣血， 死亡都是一样的 。

最后我们再来看一下 怪物是怎么动起来的 。 入口是 init.js 中的一个 初始化方法

[img]http://dl2.iteye.com/upload/attachment/0085/4235/567879ba-23c4-32c3-b742-9a192f783619.jpg[/img]
从图中可以看到，当页面加载完的时候会执行 init 方法 ， 会加载所有的图片 ， 理论上应该是等图片加载完成之后 再调用 _init (有一个下划线哦！) 方法，但是这里我偷懒了一下， 直接延迟了三秒 等图片加载完成。开始调用所有的init方法，包括初始化所有的 context , canvas , map , mouster , tower , controller , task 等等 。 这个读者可以之后自己去看对应的方法。

这里提到一个重点就是 startTask 的方法 ， 这个是核心， 也就是为什么 怪物 ，子弹 ， 塔 ， 文字 等等，会动得原因。 打开 task.js 中可以看到 startTask 的实现很简单 。 就是每个 25 毫秒 调用所有的 显示信息。 也就是我们常说的帧数。 拿 __task 其中的一个 autoMove 的一个方法来说 。 在 autoMove 中是控制了怪物自动行走的 方法。 但是其实我们不希望怪物每隔 25 毫秒就走动 ，为什么呢？ 因为如果 帧数和 怪物走动的频率做了绑定的话 ， 当你帧数调高的时候 怪物行走也会变快 ， 这是用户不希望的 ， 帧数调高只是希望画面变的流畅 ，但是怪物行走 肯定还是原来的速度的。 所以在怪物的对象中 设置了2个属性 ， lastUpdateTime 和 refreshTime 用于判断怪物是否到了可以刷新的时间 ， 目前 refreshTime 的时间为50 毫秒 ， 就是怪物 是每隔50毫秒才会走动 XXX 距离 ， 和帧数就没有关系了 ， 哪怕是10毫秒 刷新一下 ， 怪物还是会 50 毫秒走一步 。 怪物是这样 ， 塔也是这样。 如果是塔的话 就通过这个来控制攻击速度了。


因为时间有限，今天就先写到这里 ，代码在附件中， 解压之后可以直接运行。 如果有疑问可以给我留言 ，我会定时看了恢复的哈， [color=red][size=medium]转发请标明出处，谢谢配合[/size][/color]。