HTML5+JS TD 持续更新

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





演示地址 （背景图片较大 第一次加载会比较慢 请耐心等待）:
http://chengxinwei.github.io/lessons/2013/06/09/td/

    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 去控制 。 如图：看名字应该差不多就能理解了



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



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

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

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

       从图中可以看到，当页面加载完的时候会执行 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 毫秒走一步 。 怪物是这样 ， 塔也是这样。 如果是塔的话 就通过这个来控制攻击速度了。



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


--------------------------------------  一条华丽的分割线   ------------------------------------------

今天下午比较空 。 所以又完善了一些功能， 现在箭塔有了多重箭的效果了 。 还跟新了塔的升级 和 贩卖功能。 第5波和 第9波为BOSS ，另外相比上一个版本，第一波的怪物血量调少了 ， 削弱了雷电塔 ，希望大家 有兴趣的可以尝试一下通关哦！~~如图：



新版本也在附件中，源码一样开放，有兴趣的可以多研究


-----------------------------------  一条华丽的分割线 2013/06/09  ------------------------------------

看到有兄弟回复说 放在github 上 ， 这两天抽空看了一下，花了2天终于弄好了 。 在上面已经贴了链接地址。




有兴趣探讨的 或者想要源码的读者可以给我留言 ，我会定时回复 谢谢！

没人看么。。写了好久了。希望大家提点意见啊！

玩了10多次终于过了我擦 还不错嘛

东西不错，但希望楼主可以更深入的分析解释一下，以使我们这些菜鸟方便学习哎。

源码开放的，可以下下来自己看一下 ， 我觉得还是写的比较清晰的

写的非常好，建议你把每个功能脚本写成一个类，结构看着更友好！

现在基本是每一个功能一个JS ，你说的是不是把js里面建立一个对象，方法就是对象的方法是不是这样呢？

建议楼主 放到 github 上去, 再把链接贴回来

行！有空把 github 环境搭建好 更新上来