动画模拟

主要效果就是鼠标点击地图，人物会在地图上行走。

主要代码

　　关于移动还是用到了向量（Vector）的概念

　　判断移动方向代码，根据方向来选择走路效果需要用到的图片

direction: function(pos, target) {                    var z = Math.abs(target.x - pos.x);                    if (target.x > pos.x) {                        if (target.y >= pos.y - z && target.y <= pos.y + z) {                            return 'E';                        }                        if (target.y < pos.y - z) {                            return 'N';                        }                        if (target.y > pos.y + z) {                            return 'S';                        }                    }                    if (target.x < pos.x) {                        if (target.y >= pos.y - z && target.y <= pos.y + z) {                            return 'W';                        }                        if (target.y < pos.y - z) {                            return 'N';                        }                        if (target.y > pos.y + z) {                            return 'S';                        }                    }                }

 　　走路效果的代码，就是不停的切换图片来达到走路效果

walk: function(obj, wdir) {                    var s = obj.style;                    this.pos.x += this.man.w;                    switch (wdir) {                        case 'E':                            this.pos.y = 216;                            break;                        case 'N':                            this.pos.y = 324;                            break;                        case 'S':                            this.pos.y = 0;                            break;                        case 'W':                            this.pos.y = 108;                            break;                    }                    if (this.pos.x >= this.img.w) {                        this.pos.x = 0;                        //this.pos.y += this.man.h;                        if (this.pos.y >= this.img.h) {                            this.pos.x = 0;                            this.pos.y = 0;                        }                    }                    s.left = -this.pos.x + 'px';                    s.top = -this.pos.y + 'px';                }

修正

 　　修正鼠标点击后，人物的脚在鼠标的点击位置，主要是加一个偏移量，半个人物的宽度和一个人物的高度，因为原先位置是在左上角(left,top)

this.footPos = this.lxyPos.add(this.tempPos); var t = target.subtract(this.footPos).normalize();

 演示效果