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();

 示範效果