Js动画（二）梦幻西游之逍遥生游览北俱芦洲

游览行为点击鼠标人物行走。右键也能使人物转向。由于我只找到了人物四个方向的素材所以如果刚好正对人物位置的水平或垂直方向走起来会有些别扭如果用八方图code上只要再加正东南西北四个方向即可。一共使用了2张图片一张是人物的四方图一张是场景图场景图用于设为body背景。贴上一部分效果图你可以在本文结尾下载整个demo。先贴上Common类主要就是通用的操作如取元素位置取鼠标位置我的很多文章里都用到的。Common贴上Walker类代码人物行走如何实现呢3步。在这3步之前当然会用init方法初始化1个div做为容器来存放这个人物图片所谓的人物行走就是这个div在移动。细节见code的注释1. 显示人物四方图的某一块小图。本例的四方图是4*416个人物形态构成就是要显示具体的1个人物形态。实现方法setWalkStatus。由于外部容器div的尺寸只是1个人物形态的尺寸通过设置人物图片的left和top值就能显示图片中第row行第col列的人物。2.让人物动起来。实现方法beginWalk。通过setInterval循环执行setWalkStatus方法就能实现同一行的四个动作连贯显示。人物就动起来了。3.让动起来的人物移动。鼠标点击后移动要首先算出朝哪个方向移动从而显示那个方向的人物图片方法getDirection。移动的主要code在move方法里。如何move和Js动画一基础所说的move原理一样但是又不能照搬因为那里的move是自己设置总帧数从而控制时间达到设置移动快慢的目的。而这里人物的移动肯定永远是匀速的行走的距离长自然执行的总次数多时间也就越长。所以原先自定义的count数要算出来移动总次数人物行走的总距离像素/速度每1次移动speed像素其他照旧。然后添加一些人物移动的边界限制。文档加载后初始化逍遥生及注册逍遥生行为事件。