HTML、CSS、および JavaScript を使用してスネーク ゲームを作成する方法

HTML、CSS、および JavaScript を使用してスネーク ゲームを作成する方法

スネーク ゲームは、プログラミングと問題解決のスキルを向上させるために使用できる古典的なプログラミング演習です。HTML、CSS、JavaScript を使用して Web ブラウザーでゲームを作成できます。

ゲームでは、ボードの周りを移動するヘビを操作します。食べ物を集めると、ヘビは大きくなります。自分のしっぽや壁にぶつかるとゲームオーバーです。

キャンバスの UI を作成する方法

HTML と CSS を使用して、ヘビが動き回るためのキャンバスを追加します。基本的な概念を修正する必要がある場合は、他にも多くの HTML および CSS プロジェクトで練習できます。

完全なソース コードについては、このプロジェクトの GitHub リポジトリを参照できます。

  1. 「index.html」という名前の新しいファイルを作成します。
  2. Visual Code や Atom などの任意のテキスト エディターを使用してファイルを開きます。基本的な HTML コード構造を追加します。 <!doctype html>
    <html lang="en-US">
      <head>
        <title>Snake Game</title>
      </head>
      <body>

      </body>
    </html>

  3. body タグ内に、ヘビのゲーム ボードを表すキャンバスを追加します。 <h2>Snake Game</h2>
    <div id="game">
      <canvas id="snake"></canvas>
    </div>
  4. HTML ファイルと同じフォルダーに、「styles.css」という名前の新しいファイルを作成します。
  5. 内部に、Web ページ全体の CSS を追加します。他の重要な CSS のヒントやコツを使用して、Web サイトのスタイルを設定することもできます。 #game {
      width:400px;
      height:400px;
      margin:0 auto;
      background-color:#eee;
    }
    h2 {
      text-align:center;
      font-family:Arial;
      font-size:36px;
    }
  6. HTML ファイル内で、head タグに CSS へのリンクを追加します。 <link rel="stylesheet" type="text/css" href="styles.css">
  7. キャンバスを表示するには、Web ブラウザーで「index.html」ファイルを開きます。
    空のキャンバスを使ったスネーク ゲーム

ヘビの描き方

以下の例では、黒い線はヘビを表しています。

ヘビの例を使ったヘビゲーム

複数の正方形または「セグメント」がヘビを構成しています。ヘビが成長するにつれて、正方形の数も増えます。ゲーム開始時、ヘビの長さは1ピースです。

  1. HTML ファイル内で、body タグの下部にある新しい JavaScript ファイルにリンクします。 <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
  2. script.js を作成し、キャンバスの DOM 要素を取得することから始めます。 var canvas = document.getElementById("snake");
  3. canvas HTML 要素のコンテキストを設定します。この場合、ゲームで 2D キャンバスをレンダリングする必要があります。これにより、HTML 要素に複数の図形や画像を描画できます。 var canvas2d = canvas.getContext("2d");
  4. ゲームが終了したかどうか、キャンバスの高さと幅など、その他のゲーム内変数を設定します。 var gameEnded = false;
    canvas.width = 400;
    canvas.height = 400;
  5. 「snakeSegments」という変数を宣言します。これは、ヘビが占める「正方形」の数を保持します。ヘビの長さを追跡する変数を作成することもできます。 var snakeSegments = [];
    var snakeLength = 1;
  6. ヘビの初期 X および Y 位置を宣言します。 var snakeX = 0;
    var snakeY = 0;
  7. 新しい関数を作成します。内部では、開始 X 座標と Y 座標を使用して、開始スネーク ピースを snakeSegments 配列に追加します。 function moveSnake() {
      snakeSegments.unshift({ x: snakeX, y: snakeY });
    }
  8. 新しい関数を作成します。内部では、塗りつぶしスタイルを黒に設定します。これは、ヘビの描画に使用する色です。 function drawSnake() {
      canvas2d.fillStyle = "black";
    }
  9. ヘビのサイズを構成するすべてのセグメントに対して、幅と高さが 10 ピクセルの正方形を描画します。   for (var i = 0; i < snakeSegments.length; i++) {
        canvas2d.fillRect(snakeSegments[i].x, snakeSegments[i].y, 10, 10);
      }
  10. 100 ミリ秒ごとに実行されるゲーム ループを作成します。これにより、ゲームはヘビを常に新しい位置に描画します。これは、ヘビが動き始めるときに非常に重要になります。 function gameLoop() {
      moveSnake();
     drawSnake();
  11. 「index.html」ファイルを Web ブラウザで開き、開始位置で最も小さいサイズのヘビを確認します。
    ヘビを開始位置に置いたスネークゲーム

ヘビの動かし方

プレーヤーがキーボードで押すボタンに応じて、ヘビをさまざまな方向に動かすロジックを追加します。

  1. ファイルの先頭で、ヘビの最初の方向を宣言します。 var directionX = 10;
    var directionY = 0;
  2. プレーヤーがキーを押したときに発生するイベント ハンドラーを追加します。 document.onkeydown = function(event) {

    };

  3. イベント ハンドラー内で、押されたキーに基づいて、ヘビの移動方向を変更します。 switch (event.keyCode) {
      case 37: // Left arrow
        directionX = -10;
        directionY = 0;
        break;
      case 38: // Up arrow
        directionX = 0;
        directionY = -10;
        break;
      case 39: // Right arrow
        directionX = 10;
        directionY = 0;
        break;
      case 40: // Down arrow
        directionX = 0;
        directionY = 10;
        break;
    }
  4. moveSnake() 関数で、方向を使用してヘビの X 座標と Y 座標を更新します。たとえば、ヘビが左に移動する必要がある場合、X 方向は「-10」になります。これにより、X 座標が更新され、ゲームのフレームごとに 10 ピクセルが削除されます。 function moveSnake() {
      snakeSegments.unshift({ x: snakeX, y: snakeY });
      snakeX += directionX;
      snakeY += directionY;
    }
  5. ゲームは現在、ヘビが動いている間、以前のセグメントを削除しません。これにより、ヘビは次のようになります。
  6. セグメントを削除しないスネークの例 これを修正するには、各フレームで新しいヘビを描画する前に、drawSnake() 関数の開始時にキャンバスをクリアします。 canvas2d.clearRect(0, 0, canvas.width, canvas.height);
  7. また、moveSnake() 関数内で、snakeSegments 配列の最後の要素を削除する必要があります。 while (snakeSegments.length > snakeLength) {
      snakeSegments.pop();
    }
  8. 「index.html」ファイルを開き、左右上下キーを押して蛇を動かします。
    ボードの周りを移動する単一のスネークピース

キャンバスに食べ物を追加する方法

ボードゲームにドットを追加して、ヘビの食べ物を表します。

  1. ファイルの先頭で新しい変数を宣言して、食品の配列を格納します。 var dots = [];
  2. 新しい関数を作成します。内部では、ドットのランダムな X 座標と Y 座標を生成します。また、ボード上に常に 10 個のドットのみが存在するようにすることもできます。 function spawnDots() {
      if(dots.length < 10) {
        var dotX = Math.floor(Math.random() * canvas.width);
        var dotY = Math.floor(Math.random() * canvas.height);
        dots.push({ x: dotX, y: dotY });
      }
    }
  3. 食品の X 座標と Y 座標を生成したら、赤色を使用してキャンバスに描画します。 for (var i = 0; i < dots.length; i++) {
      canvas2d.fillStyle = "red";
      canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
    }
  4. ゲーム ループ内で新しい spawnDots() 関数を呼び出します。 function gameLoop() {
      moveSnake();
      drawSnake();
      spawnDots();
      if(!gameEnded) {
        setTimeout(gameLoop, 100);
      }
    }
  5. 「index.html」ファイルを開いて、ゲーム ボード上の食べ物を表示します。
    食べ物を乗せたスネークゲーム

ヘビを成長させる方法

ヘビがフード ドットと衝突すると、その長さを増加させることでヘビを成長させることができます。

  1. 新しい関数を作成します。その中で、ドット配列のすべての要素をループします。 function checkCollision() {
      for (var i = 0; i < dots.length; i++) {

      }
    }

  2. ヘビの位置がドットの座標と一致する場合は、ヘビの長さを増やしてドットを削除します。 if (snakeX < dots[i].x + 10 &&
      snakeX + 10 > dots[i].x &&
      snakeY < dots[i].y + 10 &&
      snakeY + 10 > dots[i].y) {
        snakeLength++;
        dots.splice(i, 1);
    }
  3. ゲーム ループで新しい checkCollision() 関数を呼び出します。 function gameLoop() {
      moveSnake();
      drawSnake();
      spawnDots();
      checkCollision();
      if(!gameEnded) {
        setTimeout(gameLoop, 100);
      }
    }
  4. 「index.html」ファイルを Web ブラウザで開きます。キーボードを使ってヘビを動かし、食べ物のかけらを集めてヘビを成長させます。
    ファイナルゲームボード付きスネークゲーム

ゲームの終了方法

ゲームを終了するには、ヘビが自分の尻尾や壁に衝突したかどうかを確認します。

  1. 「ゲームオーバー」アラートを出力する新しい関数を作成します。 function gameOver() {
      setTimeout(function() {
        alert("Game over!");
      }, 500);
      gameEnded = true
    }
  2. checkCollision() 関数内で、ヘビがキャンバスの壁にぶつかったかどうかを確認します。その場合は、gameOver() 関数を呼び出します。 if (snakeX < -10 ||
      snakeY < -10 ||
      snakeX > canvas.width+10 ||
      snakeY > canvas.height+10) {
        gameOver();
    }
  3. ヘビの頭が尾のセグメントのいずれかと衝突したかどうかを確認するには、ヘビの各部分をループします。 for (var i = 1; i < snakeSegments.length; i++) {

    }

  4. for ループ内で、ヘビの頭の位置が尾のセグメントのいずれかと一致するかどうかを確認します。もしそうなら、これは頭が尻尾に衝突したことを意味するので、ゲームを終了します: if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
      gameOver();
    }
  5. 「index.html」ファイルを Web ブラウザで開きます。ゲームを終了するには、壁または自分の尻尾を叩いてみてください。
    スネークゲームでのゲームオーバーアラート

ゲームを通して JavaScript の概念を学ぶ

ゲームを作成することは、学習体験をより楽しくするための優れた方法です。JavaScript の知識を向上させるために、さらに多くのゲームを作成し続けてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です