Javascript动画模拟

动画模拟

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

主要代码

　　关于移动还是用到了向量（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();

 演示效果