Javascriptアニメーションシミュレーション
2801 ワード
アニメーションシミュレーション
主な効果はマウスで地図をクリックすることです.人物は地図を歩くことができます.
主要コード
移動についてはやはりベクトル(Vector)の概念を使用しました.
移動方向コードを判断し、方向によって歩く効果が必要な画像を選択します.
マウスを修正してクリックした後、人物の足はマウスのクリック位置にあります.主に一つのオフセット量を加えて、半分の人物の幅と一つの人物の高さです.元の位置は左上角にあります.
主な効果はマウスで地図をクリックすることです.人物は地図を歩くことができます.
主要コード
移動についてはやはりベクトル(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';
}
マウスを修正してクリックした後、人物の足はマウスのクリック位置にあります.主に一つのオフセット量を加えて、半分の人物の幅と一つの人物の高さです.元の位置は左上角にあります.
this.footPos = this.lxyPos.add(this.tempPos);
var t = target.subtract(this.footPos).normalize();