Make me a game where you eat as many foods as possible, you click on them to eat them but there are some red circles and if you click them you lose. They dissepear every 3 seconds's game

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

No:39124

←

Prev Next

→

Make me a game where you eat as many foods as poss..ALL
Developer User17523｜Date and time 24/1/26 22:36:42
Build time 24.316 sec｜Game capacity 4.159KB｜

Script

Sure! Here's a complete implementation of the game you described using HTML, JavaScript, and CSS. You can save the code in a single HTML file and open it in any web browser to play the game.

To play the game, save this code in an HTML file (e.g., `food_game.html`) and open it in a web browser on your smartphone. You'll see a canvas where you can click on the food items to eat them. Be careful not to click on the red circles as they disappear every 3 seconds but will cause you to lose the game if clicked. Your score will be displayed, and the game will end when you click a red circle or when all the food has been eaten.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a complete implementation of the game you described using HTML, JavaScript, and CSS. You can save the code in a single HTML file and open it in any web browser to play the game.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Food Eater Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="300"></canvas>

const redCircleImage = new Image();
    redCircleImage.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/247/big-red-circle_1f534.png';

// Game variables
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');
    const foods = [];
    const redCircles = [];
    let score = 0;
    let gameOver = false;

// Click event listener
    canvas.addEventListener('click', (event) => {
      if (gameOver) return;

const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

for (let i = 0; i < foods.length; i++) {
        const food = foods[i];
        if (isCollision(x, y, food)) {
          foods.splice(i, 1);
          score++;
          break;
        }
      }

for (let i = 0; i < redCircles.length; i++) {
        const redCircle = redCircles[i];
        if (isCollision(x, y, redCircle)) {
          gameOver = true;
          break;
        }
      }
    });

// Update game state
    function updateGameState() {
      if (gameOver) return;

context.clearRect(0, 0, canvas.width, canvas.height);

// Move and draw foods
      for (let i = 0; i < foods.length; i++) {
        const food = foods[i];
        food.y += 1;
        context.drawImage(foodImage, food.x, food.y, 30, 30);
      }

// Move and draw red circles
      for (let i = 0; i < redCircles.length; i++) {
        const redCircle = redCircles[i];
        redCircle.y += 1;
        context.drawImage(redCircleImage, redCircle.x, redCircle.y, 30, 30);
      }

// Remove red circles after 3 seconds
      if (redCircles.length > 0) {
        const currentTime = Date.now();
        const elapsedTime = (currentTime - redCircles[0].timestamp) / 1000;
        if (elapsedTime >= 3) {
          redCircles.shift();
        }
      }

// Check game over condition
      if (gameOver || foods.length === 0) {
        gameOver = true;
        context.font = '30px Arial';
        context.fillStyle = 'black';
        context.fillText('Game Over! Score: ' + score, 50, 150);
      } else {
        requestAnimationFrame(updateGameState);
      }
    }

// Check collision between point and object
    function isCollision(x, y, obj) {
      return x >= obj.x && x <= obj.x + 30 && y >= obj.y && y <= obj.y + 30;
    }

// Create initial objects
    function createObjects() {
      setInterval(() => {
        const xPosition = Math.floor(Math.random() * (canvas.width - 30));
        const food = { x: xPosition, y: -30 };
        foods.push(food);
      }, 1000);

setInterval(() => {
        const xPosition = Math.floor(Math.random() * (canvas.width - 30));
        const redCircle = { x: xPosition, y: -30, timestamp: Date.now() };
        redCircles.push(redCircle);
      }, 3000);
    }

// Start the game
    createObjects();
    updateGameState();
  </script>
</body>
</html>
```