クイックヒント：JavaScriptでゲームループを作成する方法

コアポイント

• JavaScriptゲームループは、状態が時間とともに変化するアニメーションとゲームをレンダリングするために使用される手法です。ユーザーの入力を受信し、経過時間の状態を更新してからフレームを描画する繰り返し実行される関数が含まれます。
• requestAnimationFrameメソッドは、次の塗り直しの前に、ブラウザに指定された関数をできるだけ早く呼び出すように要求するアニメーションをレンダリングするためのAPIであり、コールバック関数が実行を開始するタイムスタンプを提供します。
• ユーザー入力は、どのキーが押されているかを追跡し、すべてのkeydownおよびkeyupイベントを聞くこと、プレスキーに基づいてxおよびy位置を更新し、オブジェクトを内部に保持することにより、ゲームループに統合できます。境界。
• 移動と回転のために追加のベクトルを保存し、左キーと右キーに基づいて回転を更新し、上下キーと回転に基づいて動きを更新し、動きベクターとキャンバス境界に基づいて位置を更新することにより、より複雑なアニメーションを作成できます。

JavaScriptゲームループは、時間の経過とともに状態を変えるアニメーションとゲームをレンダリングするために使用される手法です。そのコアには、ユーザーの入力を受信し、経過時間の状態を更新してからフレームを描画する機能が可能な限り実行される関数です。

この記事では、この基本的なテクノロジーがどのように機能するかを簡単に紹介し、独自のブラウザベースのゲームとアニメーションの作成を開始するのに役立ちます。

以下は、JavaScriptゲームループの例です。

function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

メソッドは、次の塗り直しの前に、ブラウザに指定された関数をできるだけ早く呼び出すように要求します。これは、アニメーションのレンダリング専用のAPIですが、短いタイムアウトを使用して同様の結果を得ることもできます。 requestAnimationFrameコールバック関数が実行され始めたタイムスタンプを渡します。 setTimeout requestAnimationFrameperformance.now()値の間の時間または

の間の時間は、スムーズなアニメーションを作成するために重要です。それを使用して、更新関数のXおよびYの位置を調整することにより、アニメーションが一貫した速度で移動することを確認できます。 progress 場所の更新

最初のアニメーションは非常に簡単です。キャンバスの端に到達するまで右に移動し、ループが出発点に戻るまで移動します。

正方形の位置を保存し、更新関数のX位置を増分する必要があります。境界に到達すると、キャンバスの幅を差し引き、開始点にループを戻すことができます。

新しいフレームを描画します

var width = 800;
var height = 200;

var state = {
  x: width / 2,
  y: height / 2
};

function update(progress) {
  state.x += progress;

  if (state.x > width) {
    state.x -= width;
  }
}

この例では、要素を使用してグラフィックをレンダリングしますが、ゲームループはHTMLやSVGドキュメントなどの他の出力でも使用できます。

描画関数は、現在の世界の状態をレンダリングするだけです。各フレームでは、キャンバスをクリアし、その中心が状態オブジェクトに保存されている場所にある10ピクセルの赤い正方形を描きます。 <canvas>

モバイルを達成しました！

ユーザーの入力に応答します

次に、オブジェクトの位置を制御するためにキーボード入力を取得します。 state.pressedKeys

function update(progress) {
  // 更新自上次渲染以来经过时间的世界的状态
}

function draw() {
  // 绘制世界的状态
}

function loop(timestamp) {
  var progress = timestamp - lastRender;

  update(progress);
  draw();

  lastRender = timestamp;
  window.requestAnimationFrame(loop);
}
var lastRender = 0;
window.requestAnimationFrame(loop);

すべての

およびkeydownイベントを聞いて、それに応じて更新しましょう。私が使用するキーは、keyupd state.pressedKeys（右）、a（左）、w（up）、およびsdown）です。ここでキーコードのリストを見つけることができます。

次に、押されたキーに基づいてx値とy値を更新し、オブジェクトを境界内に保持することを確認する必要があります。

var width = 800;
var height = 200;

var state = {
  x: width / 2,
  y: height / 2
};

function update(progress) {
  state.x += progress;

  if (state.x > width) {
    state.x -= width;
  }
}

ユーザー入力を実装しました！

var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";

function draw() {
  ctx.clearRect(0, 0, width, height);

  ctx.fillRect(state.x - 5, state.y - 5, 10, 10);
}

（後続のコンテンツ、小惑星ゲームとFAQについて、スペースの制限により、ここでは省略されています。コアのアイデアは前の部分に完全に表示され、その後のコンテンツはより複雑なケースであり、よくある質問です。必要に応じて自分で補完することができます

以上がクイックヒント：JavaScriptでゲームループを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。