1

キャンバスの真ん中にキャラクターがいて、キャンバス上のどこにいても、キャラクターは常に私のマウスの位置に向くように回転します。

ここでやりたいことは、W または上矢印を押すと、キャラクターがマウスに向かって歩くことです。この背後にある数学についてはよくわからないので、少し助けを求めています。

現在、WASD/矢印キーをリッスンする次の関数があります。

Player.prototype.playerAnimation = function (){

    //UP
    if(this.isUpKey){

        //Character movement [drawX/Y is the position of character]
        this.drawY = mouseY;
}

もちろん、これはキャラクターをマウスの Y 位置に移動するだけで、私が探しているものではありません。どのような式が必要なのかわかりませんか？

ありがとう

4

2 に答える 2

2

すでにマウスに向かって正常に回転している場合は、キャラクターとカーソルの間の角度を計算する必要があります。そのため、絶対的に移動するのではなく ( ) 、=mouseYインクリメントするだけで、効果的に速度になる値を増やす必要があります。キャラクター。this.drawYthis.drawX

しかし、X と Y の動きの対角線をその値にしたいので、次のようなものはそれをコンポーネント X と Y に分割します。

this.drawX=this.drawX+this.speed*Math.cos(d2r(angle));
this.drawY=this.drawY+this.speed*Math.sin(d2r(angle));

ラジアンではなく度で作業している場合：

function d2r(d){
    var r=d*(Math.PI/180);
    return r;   
}

角度がどのように決定されているかによっては、式の記号をいじる必要がある場合があります。ああ、キーが押されたままの場合に動き続けたい場合は、しばらくして関数setTimeoutを再起動するためにいくつか追加する必要がありますplayerAnimation

于 2013-01-22T20:39:03.733 に答える
2

これらの関数は遅いため、sin と cos を使用しないでください。したがって、データの計算に角度を使用することはできません (スプライトなどを回転させる場合にのみ必要になります)。

まず、x、y、xspeed、yspeed、速度 (px/秒)、および方向のプロパティを持つオブジェクトを作成する必要があります。

キャラクターが速度 = 5 の位置 (10,10) にいると仮定します。次に、位置 (50,40) でマウスをクリック (またはホバー) します。まず、dx と dy (デルタ) を取得する必要があります。

dx = mouse.x - character.x // 50 - 10 = 40
dy = mouse.y - character.y // 40 - 10 = 30

次に、キャラクターの位置からマウスの位置までの距離を取得します。

distance = sqrt(dx*dx + dy*dy) // sqrt(40*40 + 30*30) = sqrt(1600 + 900) = 
                               // = sqrt(2500) = 50 (Pythagorean theorem)

これで、キャラクターの xspeed と yspeed を計算できます。

factor = distance / character.speed // 50 / 5 = 10
character.xspeed = dx / factor // 40 / 10 = 4
character.yspeed = dy / factor // 30 / 10 = 3

ここで、1 秒あたり 60 ティックの物理ループがあると仮定します (おそらく、物理ループはメイン ループから分離されていないため、単に fps カウントになります)。ティックごとに、キャラクター x は xspeed ずつ増加し、y は yspeed ずつ増加します (もちろんキーを押している場合)。したがって、1 秒後 (60 ティックかかります)、キャラクターは position になります(10 + 60*4, 10 + 60*3) = (250, 190)。かなり速いので、キャラクターの速度を落としたり、fpsを下げたりできます（お勧めしません）。

キャラクターを (cRPG のように) マウスの位置で停止させたい場合は、タイマーまたはカウンターを使用します。キャラクターがマウスの位置に到達するのに必要なティック カウントは、以前factorに計算された であり、これは に等しくなり10ます。ループの 10 ティック後、文字位置は (50,40) になります。そのため、キャラクター オブジェクトに var ティックを作成し、すべてのループ ティックで 1 ずつ減分し、それが 0 になったらキャラクターの xspeed と yspeed を 0 にリセットして、それ以上動かないようにすることができます。もう 1 つの方法は、タイムアウトを使用することですが、それはさらに悪いことです。10/60s = 1/6s ~= 0.18s の直後にタイムアウト コールバック関数がキャラクターの xspeed と yspeed を 0 にリセットします。

角度が必要な場合は、dx/dy と tan を使用して計算できます。

この移動方法は、sin と cos を使用するよりもはるかに高速です。

もちろん、(character.x, character.y) の位置に文字を描画して動きを表現します。

于 2013-01-23T00:34:21.223 に答える