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

 演示效果