Make a game where you are a rat who needs to eat apples to expand its tail while dodging bananas's game

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

No:19454

←

Prev Next

→

Make a game where you are a rat who needs to eat a..ALL
Developer User8627｜Date and time 23/10/4 3:27:30
Build time 22.694 sec｜Game capacity 3.773KB｜

Script

Sure! Here's an example of a simple game where you play as a rat and try to eat apples to expand your tail while avoiding bananas. The game will be implemented as a single HTML file with JavaScript enclosed in script tags.

You can save the above code in a file with a `.html` extension and open it in a web browser to play the game. The game canvas will display a gray square representing the rat, red squares representing apples, and yellow squares representing bananas. Use the arrow keys to control the rat and try to eat apples to expand your tail while avoiding bananas. Enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Rat Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Wait for the page to load
    window.onload = function() {
      // Get the game canvas
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      
      // Rat position and size
      let ratX = 10;
      let ratY = 10;
      let ratSize = 10;
      
      // Tail length and segment size
      let tailLength = 0;
      const tailSegmentSize = 10;
      
      // Apple position and size
      let appleX = getRandomPosition();
      let appleY = getRandomPosition();
      const appleSize = 10;
      
      // Banana position and size
      let bananaX = getRandomPosition();
      let bananaY = getRandomPosition();
      const bananaSize = 15;
      
      // Game loop
      function gameLoop() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Move the rat based on user input
        document.addEventListener('keydown', (event) => {
          const key = event.key;
          if (key === 'ArrowUp' && ratY > 0) {
            ratY -= ratSize;
          } else if (key === 'ArrowDown' && ratY < canvas.height - ratSize) {
            ratY += ratSize;
          } else if (key === 'ArrowLeft' && ratX > 0) {
            ratX -= ratSize;
          } else if (key === 'ArrowRight' && ratX < canvas.width - ratSize) {
            ratX += ratSize;
          }
        });
        
        // Draw the rat
        ctx.fillStyle = 'gray';
        ctx.fillRect(ratX, ratY, ratSize, ratSize);
        
        // Draw the tail
        ctx.fillStyle = 'darkgray';
        for (let i = 0; i < tailLength; i++) {
          ctx.fillRect(ratX - (i + 1) * tailSegmentSize, ratY, ratSize, ratSize);
        }
        
        // Check if the rat collides with the apple
        if (ratX === appleX && ratY === appleY) {
          tailLength++;
          appleX = getRandomPosition();
          appleY = getRandomPosition();
        }
        
        // Check if the rat collides with the banana
        if (ratX === bananaX && ratY === bananaY) {
          tailLength = 0;
          bananaX = getRandomPosition();
          bananaY = getRandomPosition();
        }
        
        // Draw the apple
        ctx.fillStyle = 'red';
        ctx.fillRect(appleX, appleY, appleSize, appleSize);
        
        // Draw the banana
        ctx.fillStyle = 'yellow';
        ctx.fillRect(bananaX, bananaY, bananaSize, bananaSize);
        
        // Repeat the game loop
        requestAnimationFrame(gameLoop);
      }
      
      // Utility function to get random position on the canvas
      function getRandomPosition() {
        return Math.floor(Math.random() * (canvas.width - ratSize));
      }
      
      // Start the game loop
      gameLoop();
    }
  </script>
</body>
</html>
```