The player is in a long corridor with a rabbit that is blind and walks to random places and if the rabbit touches you you die's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
The player is in a long corridor with a rabbit that is blind and walks to random places and if the rabbit touches you you die's game | AI game creator

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

No:3473

2789

←

Prev Next

→

The player is in a long corridor with a rabbit tha..ALL
Developer User3709｜Date and time 23/6/25 6:30:32
Build time 18.242 sec｜Game capacity 2.521KB｜

Script

This game is called "Blind Rabbit Game". The player is represented by a red ball and is positioned on the left side of a long corridor. The rabbit is represented by a green ball and is positioned on the right side of the corridor. The rabbit moves randomly within the corridor, and if it touches the player, the game is over. The player can move left and right using the left and right arrow keys respectively, and the game checks for collisions between the player and the rabbit every 100 milliseconds. The game runs in a single HTML file containing JavaScript code enclosed within a
tag. This game is designed for mobile devices.

←

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>Blind Rabbit Game</title>
    <style>
      #player {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background-color: red;
        border-radius: 50%;
        z-index: 2;
      }
      #rabbit {
        position: absolute;
        top: 50%;
        left: 90%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background-color: green;
        border-radius: 50%;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>
    <div id="rabbit"></div>
    <script>
      const player = document.getElementById("player");
      const rabbit = document.getElementById("rabbit");
      const corridor = document.body.clientWidth;

function moveRabbit() {
        const randomPosition = Math.floor(Math.random() * corridor);
        rabbit.style.left = `${randomPosition}px`;
      }

function checkCollision() {
        const playerPosition = player.offsetLeft;
        const rabbitPosition = rabbit.offsetLeft;
        const distance = Math.abs(playerPosition - rabbitPosition);
        if (distance <= 50) {
          alert("Game Over!");
          location.reload();
        }
      }

moveRabbit();
      setInterval(moveRabbit, 3000);
      document.addEventListener("keydown", event => {
        const key = event.key;
        const playerPosition = player.offsetLeft;
        if (key === "ArrowLeft" && playerPosition > 0) {
          player.style.left = `${playerPosition - 10}px`;
        } else if (key === "ArrowRight" && playerPosition < corridor) {
          player.style.left = `${playerPosition + 10}px`;
        }
      });
      setInterval(checkCollision, 100);
    </script>
  </body>
</html>