Make a game where you have to run from a giant spoon's game

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

No:22672

105

←

Prev Next

→

Make a game where you have to run from a giant spo..ALL
Developer User10452｜Date and time 23/10/24 1:50:42
Build time 51.524 sec｜Game capacity 3.368KB｜

Script

Sure! Here's an example of a simple game where you have to run from a giant spoon. This game is implemented as a single HTML file, includes JavaScript code enclosed in script tags, and can be played as a finished game:

🏃

To play the game, save the above code in a file with an `.html` extension and open it in a web browser. You'll see a player represented by the 🏃 emoji. Control the player's movement using the arrow keys. The objective is to avoid getting caught by the giant spoon (🥄). If the player collides with the spoon, a game over message will be displayed. Note that this is a very basic game implementation and can be customized and enhanced further.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Run from the Giant Spoon!</title>
  <style>
    #player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 100px;
    }
  </style>
</head>
<body>
  <div id="player">🏃</div>

let isRunning = false;

// Function to handle player movement
      const movePlayer = (event) => {
        const key = event.key;
        const playerStyle = window.getComputedStyle(player);
        const playerTop = parseFloat(playerStyle.getPropertyValue('top'));
        const playerLeft = parseFloat(playerStyle.getPropertyValue('left'));
        const playerHeight = parseFloat(playerStyle.getPropertyValue('font-size'));

if (key === 'ArrowUp') {
          player.style.top = `${playerTop - 10}px`;
        } else if (key === 'ArrowDown') {
          player.style.top = `${playerTop + 10}px`;
        } else if (key === 'ArrowLeft') {
          player.style.left = `${playerLeft - 10}px`;
        } else if (key === 'ArrowRight') {
          player.style.left = `${playerLeft + 10}px`;
        }

// Check if player gets caught by the giant spoon
        const playerRect = player.getBoundingClientRect();
        const spoonRect = giantSpoon.getBoundingClientRect();

if (doesOverlap(playerRect, spoonRect)) {
          isRunning = false;
          alert('GAME OVER! You got caught by the giant spoon.');
          document.removeEventListener('keydown', movePlayer);
        }
      };

// Function to check if two elements overlap
      const doesOverlap = (rect1, rect2) => {
        return !(
          rect1.top > rect2.bottom ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right ||
          rect1.right < rect2.left
        );
      };

// Start the game
      const startGame = () => {
        isRunning = true;
        // Handle player movement when arrow keys are pressed
        document.addEventListener('keydown', movePlayer);
      };

// Instantiate the giant spoon
      const giantSpoon = document.createElement('div');
      giantSpoon.innerText = '🥄';
      giantSpoon.style.position = 'absolute';
      giantSpoon.style.top = '10%';
      giantSpoon.style.left = '10%';
      giantSpoon.style.fontSize = '300px';
      document.body.appendChild(giantSpoon);

// Start the game when the page is loaded
      startGame();
    });
  </script>
</body>
</html>
```

Note that this is a very basic game implementation and can be customized and enhanced further.