コンセプトからコードまで: シンプルなエンドレスランナーゲームの構築-CSSチュートリアル-php.cn

From Concept to Code: Building a Simple Endless Runner Game

エンドレスランナーゲームの作成は、ゲーム開発に取り組む楽しい方法です。これらのゲームは簡単で中毒性があり、創造的な調整がたくさん可能です。考えてみてください。走る、ジャンプする、かわすなどの単純な仕組みをいくつか使うだけで、プレイヤーを画面に釘付けにする何かを作ることができます。

Temple Run、Flappy Bird、Subway Surfers などのゲームはすべて、これと同じ単純なアイデアから始まりましたが、世界中で何百万もの人々を楽しませてきました。

このガイドでは、独自のエンドレスランナーをゼロから構築する方法を説明します。物事をシンプルにして、基本的なゲームを立ち上げて実行するために重要な手順を順を追って説明します。

ステップ 1: コアメカニズムを理解する

コードの説明に入る前に、エンドレスランナーゲームが機能する仕組みを説明しましょう。核となる仕組みはシンプルです:

自動移動: 主人公は自動的に前進するため、プレイヤーは前進の動きを制御する必要はありません。

障害物: これらは画面上に表示され、プレイヤーはそれらを避けるために素早く反応する必要があります。

プレイヤーのアクション: 通常、プレイヤーはジャンプしたり、身をかがめたり、場合によっては射撃したりして障害物と対話できます。

これらの中核的な仕組みは、何を構築する必要があるかの青写真を与えてくれます。スムーズなエクスペリエンスを保証しながら、物事をできるだけシンプルに保つという考えです。

ステップ 2: 基本構造から始める

基本的なエンドレスランナーを構築するには、HTML、CSS、JavaScript で構造をセットアップすることから始めます。

HTMLキャンバスのセットアップ

まず、canvas 要素を含む基本的な HTML ファイルを作成します。これは次のようになります:

まず、canvas 要素を含む基本的な HTML ファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Endless Runner</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script src="game.js"></script>
</body>
</html>

ログイン後にコピー

JavaScript でのキャンバスの構成

次に、ゲームを実行し続けるために JavaScript で基本的なゲームループを作成する必要があります。ゲームループはゲームの「心臓部」であり、フレームごとに画面を更新します。

これはゲームループの単純なバージョンです:

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Game code goes here

  requestAnimationFrame(gameLoop); // keeps the loop going
}

gameLoop();

ログイン後にコピー

説明: requestAnimationFrame を使用して gameLoop 関数を継続的に実行し、フレームごとにゲームを更新します。この関数は画面をクリアします。後でここにゲームオブジェクトを追加します。

ステップ 3: プレイヤーキャラクターの追加

エンドレスランナーでは、プレイヤーキャラクターはジャンプやダックなど 1 つまたは 2 つのアクションしか持たないことがよくあります。このガイドでは、シンプルにしてジャンプに焦点を当てましょう。

単純なプレーヤーオブジェクトの作成

プレーヤーを、位置、サイズ、速度などのプロパティを持つオブジェクトとして定義します。以下に例を示します:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Endless Runner</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script src="game.js"></script>
</body>
</html>

ログイン後にコピー

これにより、ジャンプできる正方形の「プレーヤー」が得られます。 isJumping プロパティは、プレーヤーが再びジャンプできるかどうかを制御するのに役立ちます。

画面上にプレーヤーを描画する

次のコードを gameLoop に追加して、プレイヤーを描画します:

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Game code goes here

  requestAnimationFrame(gameLoop); // keeps the loop going
}

gameLoop();

ログイン後にコピー

ゲームループ内でdrawPlayer()を呼び出します:

const player = {
  x: 50,
  y: canvas.height - 60,
  width: 50,
  height: 50,
  color: "blue",
  velocityY: 0,
  isJumping: false
};

ログイン後にコピー

ステップ 4: ジャンプメカニクスの追加

プレーヤーをジャンプさせるために、キーボード入力を聞きます。プレイヤーが「スペース」キーを押すと、プレイヤーキャラクターがジャンプするはずです。

ジャンプアクションの処理

function drawPlayer() {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

ログイン後にコピー

Space が押されると、プレーヤーの垂直速度が負の値に設定され、上方向に移動します。また、isJumping を true に設定して、二重ジャンプを防止します。

重力の実装

プレイヤーはジャンプした後、重力によって下に戻ります。これは、各フレームでプレーヤーを下に引っ張る一定の力を追加することで実行できます。

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

  drawPlayer();
  requestAnimationFrame(gameLoop);
}

ログイン後にコピー

ここで、gameLoop 内で updatePlayer() を呼び出して、プレイヤーがジャンプした後に元に戻るようにします。

ステップ 5: 障害物を作成する

障害物が無限のランナーを挑戦的にします。画面の右側から出現し、左に移動します。プレイヤーが障害物に当たるとゲームオーバーです。

障害物のプロパティの定義

障害物を設定する簡単な方法は次のとおりです:

document.addEventListener("keydown", (event) => {
  if (event.code === "Space" && !player.isJumping) {
    player.velocityY = -10;
    player.isJumping = true;
  }
});

ログイン後にコピー

この関数は、キャンバスの右端に新しい障害物を作成します。その後、フレームごとに左に移動できます。

動く障害物

gameLoop で、障害物を移動および描画する関数を追加します。

function updatePlayer() {
  player.y += player.velocityY;
  player.velocityY += 0.5; // Gravity effect

  // Ground detection
  if (player.y > canvas.height - player.height) {
    player.y = canvas.height - player.height;
    player.velocityY = 0;
    player.isJumping = false;
  }
}

ログイン後にコピー

updateObstacles() とdrawObstacles() を gameLoop に追加します。

ステップ 6: 衝突検出

次に、衝突検出を追加しましょう。プレーヤーが障害物にぶつかると、ゲームが停止または再開されます。

const obstacles = [];

function createObstacle() {
  obstacles.push({
    x: canvas.width,
    y: canvas.height - 50,
    width: 20,
    height: 50,
    color: "red"
  });
}

ログイン後にコピー

gameLoop 内で checkCollision() を実行します。

ステップ 7: すべてをまとめる

これらすべての関数を追加した後の完全な gameLoop は次のとおりです:

function updateObstacles() {
  obstacles.forEach((obstacle, index) => {
    obstacle.x -= 5; // Speed of obstacle

    // Remove obstacles that go off-screen
    if (obstacle.x + obstacle.width < 0) {
      obstacles.splice(index, 1);
    }
  });
}

function drawObstacles() {
  obstacles.forEach(obstacle => {
    ctx.fillStyle = obstacle.color;
    ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
  });
}

ログイン後にコピー