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

　　背景：梦幻西游；人物：逍遥生；场景：北俱芦洲。
　　游览行为：点击鼠标，人物行走。右键也能使人物转向。由于我只找到了人物四个方向的素材，所以如果刚好正对人物位置的水平或垂直方向，走起来会有些别扭，如果用八方图，code上只要再加正东南西北四个方向即可。一共使用了2张图片，一张是人物的四方图，一张是场景图，场景图用于设为body背景。
　　贴上一部分效果图，你可以在本文结尾下载整个demo。
　　

　　先贴上Common类，主要就是通用的操作，如取元素位置，取鼠标位置，我的很多文章里都用到的。　　

Common

1. [/code] 
2. 　　贴上Walker类，　　
3. [align=center] [/align][align=center] [/align]代码[code]

复制代码

 
　　人物行走如何实现呢？3步。
　　在这3步之前，当然会用init方法初始化1个div做为容器，来存放这个人物图片，所谓的人物行走就是这个div在移动。（细节见code的注释）
　　1. 显示人物四方图的某一块小图。
　　本例的四方图是4*4=16个人物形态构成，就是要显示具体的1个人物形态。实现方法：setWalkStatus。由于外部容器div的尺寸只是1个人物形态的尺寸，通过设置人物图片的left和top值，就能显示图片中第row行第col列的人物。
 
　　2.让人物动起来。
　　实现方法：beginWalk。通过setInterval循环执行setWalkStatus方法就能实现同一行的四个动作连贯显示。人物就动起来了。
 
　　3.让动起来的人物移动。
　　鼠标点击后移动，要首先算出朝哪个方向移动，从而显示那个方向的人物图片，方法：getDirection。
　　移动的主要code在move方法里。如何move和Js动画（一）基础所说的move原理一样，但是又不能照搬，因为那里的move是自己设置总帧数从而控制时间，达到设置移动快慢的目的。而这里，人物的移动肯定永远是匀速的，行走的距离长自然执行的总次数多，时间也就越长。所以原先自定义的count数要算出来，移动总次数=人物行走的总距离（像素）/速度（每1次移动speed像素），其他照旧。然后添加一些人物移动的边界限制。
 
　　文档加载后初始化逍遥生及注册逍遥生行为事件。　　

代码[code][/code] 
　　其中，var 逍遥生 = new Walker("walker2.png", { w: 70, h: 92 }, { x: 100, y: 50 }); 第一个参数是人物图片，第二个参数是单个人物形态尺寸，70=图片宽度280/4，第三个参数是，人物的出生地。
 
　　毕了。
　　点击下载
----------------华丽丽分隔线下是懒人的快速回复----------------

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！