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

No:52371

139

←

Prev Next

→

Eat food
Developer User20597｜Date and time 24/3/21 8:46:05
Build time 8.245 sec｜Game capacity 2.391KB｜

Script

I'm glad you enjoyed the previous response! Here is an example of a simple game implemented as a single HTML file with JavaScript enclosed in script tags. It can be played on a smartphone and uses pictograms for visual elements.

Food Eater Game

👨

🍄

This code sets up a simple game where the player (represented by a person pictogram) can move around using arrow keys to collect food (represented by a plant pictogram). Each time the player collects food, the score increases and the food's position is randomly reset. Have fun playing 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>Food Eater Game</title>
</head>
<body>
  <h1>Food Eater Game</h1>
  
  <div id="gameArea">
    <div id="player">👨</div>
    <div id="food">🍄</div>
  </div>
  
  <script>
    let player = document.getElementById('player');
    let food = document.getElementById('food');
    
    let score = 0;
    
    function updateScore() {
      score++;
      document.body.innerText = `Score: ${score}`;
    }
    
    function updateFoodPosition() {
      let maxX = window.innerWidth - 50;
      let maxY = window.innerHeight - 50;
      
      let newX = Math.floor(Math.random() * maxX);
      let newY = Math.floor(Math.random() * maxY);
      
      food.style.left = `${newX}px`;
      food.style.top = `${newY}px`;
    }
    
    function checkCollision() {
      let playerRect = player.getBoundingClientRect();
      let foodRect = food.getBoundingClientRect();
      
      if (playerRect.left < foodRect.right &&
          playerRect.right > foodRect.left &&
          playerRect.top < foodRect.bottom &&
          playerRect.bottom > foodRect.top) {
        updateScore();
        updateFoodPosition();
      }
    }
    
    document.addEventListener('keydown', function(event) {
      let speed = 10;
      
      switch (event.key) {
        case 'ArrowLeft':
          player.style.left = `${parseInt(player.style.left || 0) - speed}px`;
          break;
        case 'ArrowRight':
          player.style.left = `${parseInt(player.style.left || 0) + speed}px`;
          break;
        case 'ArrowUp':
          player.style.top = `${parseInt(player.style.top || 0) - speed}px`;
          break;
        case 'ArrowDown':
          player.style.top = `${parseInt(player.style.top || 0) + speed}px`;
          break;
      }
      
      checkCollision();
    });
  </script>
</body>
</html>
```