You gotta catch rats before they eat the cheese's game

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

No:23969

←

Prev Next

→

You gotta catch rats before they eat the cheese
Developer User11223｜Date and time 23/11/4 22:00:46
Build time 125.753 sec｜Game capacity 3.369KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

#score {
      text-align: center;
      font-size: 24px;
      margin-bottom: 10px;
    }

#game-board {
      width: 300px;
      height: 300px;
      border: 2px solid black;
      position: relative;
    }

.cheese, .rat {
      position: absolute;
      width: 50px;
      height: 50px;
    }

.cheese {
      background: url(cheese-pictogram.png);
      background-size: cover;
    }

.rat {
      background: url(rat-pictogram.png);
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-board">
      <div id="score">Score: 0</div>
    </div>
  </div>

// Variables
    let score = 0;

// Initialize game board
    const board = document.getElementById('game-board');

// Create cheese and rats
    for (let i = 0; i < cheeseCount; i++) {
      createItem('cheese');
      createItem('rat');
    }

// Event listener for mouse click
    board.addEventListener('click', (e) => {
      const clickedX = e.clientX - e.target.offsetLeft;
      const clickedY = e.clientY - e.target.offsetTop;

const rats = document.getElementsByClassName('rat');
      for (let i = 0; i < rats.length; i++) {
        const rat = rats[i];
        const ratX = parseInt(rat.style.left);
        const ratY = parseInt(rat.style.top);

if (distance(clickedX, clickedY, ratX, ratY) <= catchRadius) {
          score++;
          updateScore();
          rat.remove();
        }
      }
    });

// Update score on the page
    function updateScore() {
      document.getElementById('score').textContent = `Score: ${score}`;
    }

// Randomly position an item on the game board
    function createItem(type) {
      const item = document.createElement('div');
      item.className = type;
      item.style.left = Math.random() * (boardSize - 50) + 'px';
      item.style.top = Math.random() * (boardSize - 50) + 'px';
      board.appendChild(item);

if (type === 'rat') {
        moveRat(item);
      }
    }

// Move rat in a random direction
    function moveRat(rat) {
      const deltaX = getRandomDirection();
      const deltaY = getRandomDirection();

let currentX = parseInt(rat.style.left);
      let currentY = parseInt(rat.style.top);

const moveInterval = setInterval(() => {
        currentX += deltaX * ratSpeed;
        currentY += deltaY * ratSpeed;

rat.style.left = currentX + 'px';
        rat.style.top = currentY + 'px';

if (
          currentX < 0 ||
          currentX > boardSize - 50 ||
          currentY < 0 ||
          currentY > boardSize - 50
        ) {
          rat.remove();
          createItem('rat');
          clearInterval(moveInterval);
        }
      }, 10);
    }

// Calculate the distance between two points
    function distance(x1, y1, x2, y2) {
      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
    }

// Get random direction (-1, 0 or 1)
    function getRandomDirection() {
      return Math.floor(Math.random() * 3) - 1;
    }
  </script>
</body>
</html>