Avoiding enemies by jumping's game

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

No:1402

123

←

Prev Next

→

Avoiding enemies by jumping
Developer User3329｜Date and time 23/6/18 13:58:38
Build time 48.418 sec｜Game capacity 5.103KB｜

Script

※注意：上記のコードは、AIアシスタントのOpenAIが生成したものです。バグの可能性があるため、動作確認の上、利用してください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ジャンプゲーム</title>
    <style>
      canvas {
        border: 1px solid black;
      }
      #start {
        display: block;
        margin: 0 auto;
        font-size: 24px;
        text-align: center;
        padding: 10px;
        background-color: #333;
        color: white;
        border-radius: 5px;
        width: 120px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <canvas id="canvas"></canvas>
    </div>
    <div id="game-over" style="display: none">
      <h1>Game Over</h1>
      <p>あなたのスコアは<span id="score"></span>点です。</p>
      <button id="restart">もう一度プレイする</button>
    </div>
    <script>
      // キャンバス
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const width = canvas.width;
      const height = canvas.height;

// プレイヤー
      const player = {
        x: 50,
        y: height - 100,
        width: 60,
        height: 80,
        speed: 0,
        gravity: 0.5,
        jump: -10,
        jumping: false,
        emoji: '🐶'
      };
      
      // 敵
      const enemy = {
        x: width + Math.random() * 500 + 100,
        y: height - 70,
        width: 50,
        height: 50,
        speed: 5,
        emoji: '👻'
      };
      
      // スコア
      let score = 0;

// プレイヤーの描画
      function drawPlayer() {
        ctx.font = '50px sans-serif';
        ctx.fillText(player.emoji, player.x, player.y + 50);
      }
      
      // 敵の描画
      function drawEnemy() {
        ctx.font = '50px sans-serif';
        ctx.fillText(enemy.emoji, enemy.x, enemy.y + 50);
      }

// スコアの描画
      function drawScore() {
        ctx.font = '25px sans-serif';
        ctx.fillText('スコア:' + score, 20, 50);
      }

// ゲームオーバーの描画
      function drawGameOver() {
        ctx.font = '40px sans-serif';
        ctx.fillText('GAME OVER', width/2 - 120, height/2 - 50);
        ctx.font = '25px sans-serif';
        ctx.fillText('スコア:' + score, width/2 - 60, height/2);
      }

// 衝突判定
      function isColliding(rect1, rect2) {
        return rect1.x < rect2.x + rect2.width &&
               rect1.x + rect1.width > rect2.x &&
               rect1.y < rect2.y + rect2.height &&
               rect1.y + rect1.height > rect2.y;
      }

// ゲーム更新
      function update() {
        // プレイヤーの移動
        player.y += player.speed;
        player.speed += player.gravity;
        if (player.y >= height - player.height) {
          player.y = height - player.height;
          player.speed = 0;
          player.jumping = false;
        }

// プレイヤーのジャンプ
        if (player.jumping) {
          player.speed = player.jump;
        }

// 敵の移動
        enemy.x -= enemy.speed;
        if (enemy.x < -50) {
          enemy.x = width + Math.random() * 500 + 100;
        }

// 衝突判定
        if (isColliding(player, enemy)) {
          clearInterval(game);
          ctx.clearRect(0, 0, width, height);
          drawGameOver();
          document.getElementById('score').textContent = score;
          document.getElementById('game').style.display = 'none';
          document.getElementById('game-over').style.display = 'block';
        }

// スコア加算
        score++;
      }

// ゲーム開始
      function startGame() {
        game = setInterval(() => {
          ctx.clearRect(0, 0, width, height);
          drawPlayer();
          drawEnemy();
          drawScore();
          update();
        }, 30);
        document.getElementById('game').style.display = 'block';
        document.getElementById('game-over').style.display = 'none';
      }

// 再プレイ
      document.getElementById('restart').addEventListener('click', () => {
        player.y = height - 100;
        enemy.x = width + 100;
        score = 0;
        startGame();
      });

// キー入力
      document.addEventListener('keydown', (event) => {
        if (event.keyCode === 32 && !player.jumping) {
          player.jumping = true;
        }
      });

// ゲーム開始ボタン
      document.getElementById('start').addEventListener('click', startGame);

// 初期描画
      ctx.font = '40px sans-serif';
      ctx.fillText('ジャンプゲーム', width/2 - 150, height/2 - 50);
      ctx.font = '25px sans-serif';
      ctx.fillText('スペースキーでジャンプ', width/2 - 140, height/2);
      document.getElementById('game-over').style.textAlign = 'center';
      document.getElementById('game-over').style.marginTop = '40px';
    </script>
    <button id="start">ゲームスタート</button>
  </body>
</html>

※注意：上記のコードは、AIアシスタントのOpenAIが生成したものです。バグの可能性があるため、動作確認の上、利用してください。