3

HTML5 キャンバスと Javascript を使用してゲームを作成しようとしていますが、キャンバスをマウスでクリックした後にキャラクターを (正しく) 斜めに動かす方法がわかりません。キャラクターを斜めに動かすことはできましたが、距離に関係なく同じ速度で移動するように速度を設定することはできません...遠くにクリックすると速く移動し、クリックすると近くに移動します、動きが遅くなります。クリックする場所に関係なく、速度を同じにしたい。

これが私がこれまでに持っているものです：http://pastebin.com/hUJBiQHq

キャンバス上でキャラクターを斜めに移動するにはどうすればよいですか?

4

2 に答える 2

3

私は実際に先に進み、かなりの数の変更を加えました。それぞれについて調べてみます。

setTimout私が最初にしたことは、多くの呼び出しを削除することでした。移動用とレンダリング用に別々のものは必要ありません。また、実際にロードされた後、ゲームがロードされたかどうかのチェックを停止しました。ゲームがロードされると、レンダリングが開始されます。

またonclick、必要のないタイムアウト内にイベントがありました。外に移動させました。より良いアプローチと将来の読書の主題は、addEventListener ここでうまく説明されています

一番上に追加したもう 1 つのことは、シムです。requestAnimationFrameこれは、これを使用する方がはるかに優れているためsetTimeoutです。アニメーション フレームをサポートしていないブラウザーで実行されている場合は、タイムアウトでフォールバックします。ここで説明されているように、それを使用することには多くの利点があります。

では本題に入ります！

 var tx = newX - posX,
     ty = newY - posY,

txおよびtyは、ターゲット x およびターゲット y です。それらは、プレイヤーの座標から差し引かれたマウスの座標です。次に、これらを使用して、次のように距離チェックを実行できます。

dist = Math.sqrt(tx * tx + ty * ty);

次に、距離が速度よりも大きいかどうかを確認します。それが現在の位置に近づく必要がある場合です。

if (dist >= speed) {

次の部分では、必要な速度を計算します。ターゲット x とターゲット y を取り、それらを距離で割ります。これにより、本質的にターゲットに到達するために移動する必要があるピクセルの量が得られます。次に、この数値に速度を掛けると、1 ティックあたりの移動距離が得られます。次に、これらの速度をプレーヤーの位置に追加して、プレーヤーを動かします（より良い説明が必要です..数学の概念を説明するのはひどいです:?）

    velX = (tx / dist) * speed;
    velY = (ty / dist) * speed;
    posX += velX;
    posY += velY;

すべてが機能するライブデモ

完全なコード

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

canvas.width = canvas.height = 500;

var gameReady = true;
var players = [];
var posX = 350;
var posY = 200;
var newX = 350;
var newY = 200;

// new vars needed for movement
var velX = 0;
var velY = 0;
var speed = 5;

function movePlayer() {

  var tx = newX - posX,
    ty = newY - posY,
    dist = Math.sqrt(tx * tx + ty * ty);

  if (dist >= speed) {
    velX = (tx / dist) * speed;
    velY = (ty / dist) * speed;
    posX += velX;
    posY += velY;
  }
}

function isGameReady() {
  if (gameReady) {
    drawCanvas();
  } else {
    setTimeout(isGameReady, 100);
  }
}

canvas.onmousedown = function (e) {
  newX = e.offsetX; // -33;
  newY = e.offsetY; // - 55.25;
}


function drawCanvas() {
  movePlayer();
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillRect(posX, posY, 10, 10);
  requestAnimationFrame(drawCanvas);
}

isGameReady();
于 2013-01-06T04:04:37.393 に答える
0

出発点から目的地までの距離を測定し、それに基づいて移動時間を計算する必要があります。

距離測定:

function lineDistance( point1, point2 )
{
  var xs = 0;
  var ys = 0;
  xs = point2.x - point1.x;
  xs = xs * xs;
  ys = point2.y - point1.y;
  ys = ys * ys;
  return Math.sqrt( xs + ys );
}

アニメートする時間は、結果 * 速度です。必要な値が得られるまで値を試してspeedください。

于 2013-01-06T03:16:16.850 に答える