今天在微博上看到了一个分享“JS游戏人物跑步动画特效”,包括在线演示源码下载,感觉很好玩,就立刻下载下来学习了一下。

  • 简单思路

小人共有8个前进方向,一个停止状态。每个前进方向都有5张图片组成,每张图片都有简单的变化,以展示出动态运动效果。点击任一方向的按钮时,都会循环展示相应运动状态的图片,并且不断更改图片的左边,实现人物的运动。

  • 修改后的思路

通过鼠标来控制小人的运动方向。鼠标点击时获得当前位置,与此时人物的位置对比,计算出应该往那个方向前进。为了能有个较好的移动效果,需要计算人物x,y坐标上的速度,通过三角函数可以很容易获得:

function absSpeed(x1, x2){

return 10 * 1 / (1 + Math.sqrt(Math.pow(x1,2) / Math.pow(x2,2)));   //10是一个方向上的默认速度

}

同时,添加停止操作,通过按下ESC键来实现。

SAE演示地址

Blog演示地址


发表评论