triceratops (dinosaur)'s game

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

No:9202

134

←

Prev Next

→

triceratops (dinosaur)
Developer User4246｜Date and time 23/7/22 12:32:37
Build time 21.939 sec｜Game capacity 2.588KB｜

Script

了解しました。以下に記述したプログラムは、HTMLファイルにJavaScriptを含めて実装し、ゲームとして遊ぶことができるものです。

🦖

上記のプログラムは、トリケラトプス（🦖）を表示させ、ランダムに移動させるゲームです。ゲーム画面は200px × 200pxで、トリケラトプスはゲーム画面内で自由に移動します。しかし、トリケラトプスがゲーム画面からはみ出すとゲームオーバーとなり、アラートが表示されます。一定間隔でトリケラトプスが移動し続けるため、プレイヤーはゲームオーバーになる前にトリケラトプスをクリックしてゲームオーバーを回避する必要があります。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に記述したプログラムは、HTMLファイルにJavaScriptを含めて実装し、ゲームとして遊ぶことができるものです。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>トリケラトプスゲーム</title>
  <style>
    #game {
      width: 200px;
      height: 200px;
      background-color: #fce8aa;
      position: relative;
    }
    #triceratops {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="game">
    <span id="triceratops">🦖</span>
  </div>
  <script>
    var triceratops = document.getElementById("triceratops");
    var game = document.getElementById("game");
    var gameWidth = game.offsetWidth;
    var triceratopsWidth = triceratops.offsetWidth;
    var gameHeight = game.offsetHeight;
    var triceratopsHeight = triceratops.offsetHeight;
    var isGameOver = false;

function getRandomPosition(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

function moveTriceratops() {
      var nextX = getRandomPosition(0, gameWidth - triceratopsWidth);
      var nextY = getRandomPosition(0, gameHeight - triceratopsHeight);
      triceratops.style.left = nextX + "px";
      triceratops.style.bottom = nextY + "px";
    }

function checkCollision() {
      var triceratopsRect = triceratops.getBoundingClientRect();
      var gameRect = game.getBoundingClientRect();
      if (
        triceratopsRect.left < gameRect.left ||
        triceratopsRect.right > gameRect.right ||
        triceratopsRect.top < gameRect.top ||
        triceratopsRect.bottom > gameRect.bottom
      ) {
        isGameOver = true;
        alert("ゲームオーバー！");
      }
    }

function startGame() {
      if (!isGameOver) {
        moveTriceratops();
        checkCollision();
        setTimeout(startGame, 1000);
      }
    }

startGame();
  </script>
</body>
</html>
```