AI game creator

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

No:2492

216

←

Prev Next

→

Hunting Mammoths
Developer anonymous｜Date and time 23/6/21 17:56:57
Build time 3.806 sec｜Game capacity 4.132KB｜

Script

マンモス狩りゲーム

Score: 0

GAME OVER

Restart

←

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;
        display: block;
        margin: auto;
      }
      .score {
        text-align: center;
        font-size: 30px;
      }
      .gameover {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 50px;
        display: none;
      }
      .restart {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 30px;
        border: 2px solid black;
        cursor: pointer;
        padding: 10px;
        display: none;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <div class="score">Score: 0</div>
    <div class="gameover">GAME OVER</div>
    <div class="restart">Restart</div>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const scoreDiv = document.querySelector('.score');
      const gameoverDiv = document.querySelector('.gameover');
      const restartDiv = document.querySelector('.restart');
      
      // 画像の読み込み
      const mammothImg = new Image();
      mammothImg.src = 'https://img.icons8.com/dusk/64/000000/mammoth.png';
      
      const hunterImg = new Image();
      hunterImg.src = 'https://img.icons8.com/doodle/48/000000/hunter--v1.png'
      
      // 初期状態
      let mammoths = [];
      let hunterX = canvas.width / 2;
      let score = 0;
      let gameOver = false;
      
      // キー操作
      document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
          hunterX -= 10;
        } else if (e.key === 'ArrowRight') {
          hunterX += 10;
        }
      });
      
      // マンモスのクラス
      class Mammoth {
        constructor() {
          this.x = Math.random() * (canvas.width - 64);
          this.y = -64;
          this.speed = 1 + Math.random() * 3;
        }
        draw() {
          ctx.drawImage(mammothImg, this.x, this.y, 64, 64);
        }
        move() {
          this.y += this.speed;
        }
      }
      
      // 狩人のクラス
      class Hunter {
        draw() {
          ctx.drawImage(hunterImg, hunterX, canvas.height - 64, 64, 64);
        }
      }
      
      // ゲームオーバー
      function gameover() {
        gameOver = true;
        gameoverDiv.style.display = 'block';
        restartDiv.style.display = 'block';
      }
      
      // 再スタート
      function restart() {
        mammoths = [];
        hunterX = canvas.width / 2;
        score = 0;
        gameOver = false;
        gameoverDiv.style.display = 'none';
        restartDiv.style.display = 'none';
      }
      
      // 描画
      function draw() {
        // 背景色
        ctx.fillStyle = '#77dd77';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // マンモス
        mammoths.forEach((mammoth, i) => {
          mammoth.draw();
          mammoth.move();
          // 当たり判定
          if (mammoth.y > canvas.height) {
            mammoths.splice(i, 1);
          } else if (mammoth.y > canvas.height - 64 && mammoth.x < hunterX + 64 && mammoth.x + 64 > hunterX) {
            mammoths.splice(i, 1);
            score++;
            scoreDiv.textContent = `Score: ${score}`;
          }
        });
        
        // 狩人
        const hunter = new Hunter();
        hunter.draw();
        
        // ゲームオーバーの判定
        if (gameOver) {
          return;
        }
        
        // マンモスの生成
        if (Math.random() < 0.01) {
          mammoths.push(new Mammoth());
        }
        
        requestAnimationFrame(draw);
      }
      draw();
      
      // 再スタートのクリックイベント
      restartDiv.addEventListener('click', restart);
    </script>
  </body>
</html>