ヘビゲーム

このプログラムは、HTMLのcanvas要素を使ってヘビゲームを実装しています。ユーザーはキーボードの矢印キーでヘビを操作し、エサを食べながらヘビを伸ばしていきます。ヘビが壁や自分自身に衝突するとゲームオーバーとなり、スコアが表示されます。絵文字を使用せずにゲームを作成しましたが、実行開始されており、スマートフォンで操作可能です。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

了解しました。では、以下にプログラムの実装例を示します：

```html
<!DOCTYPE html>
<html>
<head>
  <title>ヘビゲーム</title>
</head>
<body>
  <h1>ヘビゲーム</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// ゲームの状態
    let snake = [{x: 10, y: 10}];
    let direction = 'right';
    let food = generateFood();
    let score = 0;
    let speed = initialSnakeSpeed;

// キーボード操作
    document.addEventListener('keydown', changeDirection);

// ゲームループ
    setInterval(gameLoop, speed);

// ゲームのメイン処理
    function gameLoop() {
      clearCanvas();
      moveSnake();
      drawSnake();
      drawFood();
      checkCollision();
    }

// キャンバスのクリア
    function clearCanvas() {
      context.fillStyle = 'lightgray';
      context.fillRect(0, 0, canvas.width, canvas.height);
    }

// ヘビの移動
    function moveSnake() {
      const head = Object.assign({}, snake[0]);
      
      if (direction === 'right') {
        head.x++;
      } else if (direction === 'left') {
        head.x--;
      } else if (direction === 'up') {
        head.y--;
      } else if (direction === 'down') {
        head.y++;
      }

snake.unshift(head);
      if (snake.length > score + initialSnakeLength) {
        snake.pop();
      }
    }

// ヘビの描画
    function drawSnake() {
      snake.forEach(segment => {
        context.fillStyle = 'green';
        context.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
      });
    }

// エサの描画
    function drawFood() {
      context.fillStyle = foodColor;
      context.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
    }

// 衝突判定
    function checkCollision() {
      if (snake[0].x < 0 ||
          snake[0].x >= tileCount ||
          snake[0].y < 0 ||
          snake[0].y >= tileCount) {
        endGame();
      }

if (snake.slice(1).some(segment => segment.x === snake[0].x && segment.y === snake[0].y)) {
        endGame();
      }

if (snake[0].x === food.x && snake[0].y === food.y) {
        eatFood();
      }
    }

// ゲーム終了
    function endGame() {
      clearInterval(gameLoop);
      alert('ゲームオーバー！ スコア: ' + score);
    }

// 方向変更
    function changeDirection(event) {
      if (event.keyCode === 37 && direction !== 'right') {
        direction = 'left';
      } else if (event.keyCode === 38 && direction !== 'down') {
        direction = 'up';
      } else if (event.keyCode === 39 && direction !== 'left') {
        direction = 'right';
      } else if (event.keyCode === 40 && direction !== 'up') {
        direction = 'down';
      }
    }

// エサを生成
    function generateFood() {
      return {
        x: Math.floor(Math.random() * tileCount),
        y: Math.floor(Math.random() * tileCount)
      };
    }

// エサを食べたときの処理
    function eatFood() {
      score++;
      speed -= 10;
      clearInterval(gameLoop);
      setInterval(gameLoop, speed);
      food = generateFood();
    }
  </script>
</body>
</html>
```

このプログラムは、HTMLのcanvas要素を使ってヘビゲームを実装しています。ユーザーはキーボードの矢印キーでヘビを操作し、エサを食べながらヘビを伸ばしていきます。ヘビが壁や自分自身に衝突するとゲームオーバーとなり、スコアが表示されます。

絵文字を使用せずにゲームを作成しましたが、実行開始されており、スマートフォンで操作可能です。