现在,提交代码,别忘记上传新的map图片,然后刷新页面看一下吧,没有出错它应该是这个样子

哇,50个小人在草地上,有点游戏的感觉了,我又热血沸腾了，我需要加入建筑,让他们看来有个家,下面是3个建筑的代码.

然后我们把他们加入到一个新的函数里.

然后添加到我们的主初始化函数里

如果没有出错的话,测试页面应该是这个样子

 哈哈,有点意思了,但还是感觉很空,加点装饰物吧,代码我就不贴了和建筑一样只是参数不同,如果没出错它看起来应该是这个样子了

           呼,只是添加了6个元素而已,已经把我累坏了,细心的你一定发现了切片的数据是一个固定值,没错,那是我开着软件看着图片一个一个数出来的,如果换做是你我想应该需要一个地图编辑器去做这样的事情,它看起来应该是这个样

          如果你正好没有的话,可以先用用我的这个简易的编辑器,实际上我们切片只需要知道切片的XY和宽度高度就好了,所以可以把这些属性记录到一个XML,下面是这个编辑器的在线地址 :

地图编辑器在线演示 源码下载

到这里为止,基于切片的动画已经结束了,但是我们会发现还有很多地方不足,比如动画帧率,如果是切片不是基于宽度高度都是可数的数呢？比如播放暂停动画等等,这些我希望把它放在下一章,基于纹理集的动画来讲解,因为它才是我们最终游戏需要用到的动画,有了它我们才可以做出任何不规则的动画和不规则的切片,不过在此之前,你可以先好好玩玩这章的DEMO,试试优化一下,不要让小人踩到屋顶去了,或者加一个键盘控制他们的坐标移动?下章见.

HTML5游戏开发者社区 ? HTML5 2D游戏引擎研发系列 第四章