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

No:7587

1992

←

Prev Next

→

AI Shaved Ice Race
Developer o2pi4｜Date and time 23/7/8 23:16:57
Build time 40.582 sec｜Game capacity 3.896KB｜

Script

了解です。AIかき氷レースのゲームを作成します。以下にプログラムを記述します。

AIかき氷レース

このプログラムでは、キーボードの上下キーと"W"キーと"S"キーを使ってプレイヤーとAIがかき氷を作りながら走り、ゴールに到達した方が勝利となります。絵文字を使用してプレイヤーとAIを描画していますが、絵文字が表示されない場合は、代わりに画像を使用することもできます。また、画面上にゴールしたときに勝敗を表示するアラートが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。AIかき氷レースのゲームを作成します。以下にプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AIかき氷レース</title>
</head>
<body>
  <h1>AIかき氷レース</h1>
  <canvas id="game-canvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('game-canvas');
    const ctx = canvas.getContext('2d');
    
    // プレイヤークラスの定義
    class Player {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.speed = 5;
      }
      
      moveUp() {
        this.y -= this.speed;
      }
      
      moveDown() {
        this.y += this.speed;
      }
      
      draw() {
        ctx.beginPath();
        ctx.fillStyle = '👧'; // 絵文字は表示されない場合もありますが、代わりに画像を使用することも可能です
        ctx.fillRect(this.x, this.y, 50, 50);
        ctx.closePath();
      }
    }
    
    // AIクラスの定義
    class AI {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.speed = 3;
      }
      
      moveUp() {
        this.y -= this.speed;
      }
      
      moveDown() {
        this.y += this.speed;
      }
      
      draw() {
        ctx.beginPath();
        ctx.fillStyle = '🤖'; // 絵文字は表示されない場合もありますが、代わりに画像を使用することも可能です
        ctx.fillRect(this.x, this.y, 50, 50);
        ctx.closePath();
      }
    }
    
    // ゲームの状態管理クラスの定義
    class GameState {
      constructor() {
        this.player = new Player(50, canvas.height / 2 - 25);
        this.ai = new AI(canvas.width - 100, canvas.height / 2 - 25);
        this.keysPressed = {};
        this.gameStarted = false;
        this.intervalId = null;
      }
      
      startGame() {
        if (!this.gameStarted) {
          this.gameStarted = true;
          this.intervalId = setInterval(this.update.bind(this), 20);
        }
      }
      
      stopGame() {
        clearInterval(this.intervalId);
        this.gameStarted = false;
      }
      
      handleKeyDown(e) {
        this.keysPressed[e.key] = true;
      }
      
      handleKeyUp(e) {
        this.keysPressed[e.key] = false;
      }
      
      update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        if (this.keysPressed['ArrowUp']) {
          this.player.moveUp();
        }
        if (this.keysPressed['ArrowDown']) {
          this.player.moveDown();
        }
        if (this.keysPressed['w']) {
          this.ai.moveUp();
        }
        if (this.keysPressed['s']) {
          this.ai.moveDown();
        }
        
        this.player.draw();
        this.ai.draw();
        
        // ゴール判定
        if (this.player.x >= canvas.width - 100) {
          this.stopGame();
          alert('プレイヤーの勝利！');
        } else if (this.ai.x <= 50) {
          this.stopGame();
          alert('AIの勝利！');
        }
      }
    }
    
    const gameState = new GameState();
    gameState.startGame();
    
    // イベントリスナーの追加
    window.addEventListener('keydown', gameState.handleKeyDown.bind(gameState));
    window.addEventListener('keyup', gameState.handleKeyUp.bind(gameState));
  </script>
</body>
</html>
```