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

No:18874

←

Prev Next

→

Frog
Developer User8295｜Date and time 23/10/1 0:26:31
Build time 12.423 sec｜Game capacity 3.054KB｜

Script

Sure! Here's an example of a game called "Hungry Frog" implemented as a single HTML file using JavaScript:

Hungry Frog Game

This game is displayed on a canvas and allows you to control a frog using the arrow keys on your smartphone or keyboard. The goal is to catch as much food as possible by colliding with it. Each time the frog catches the food, it will respawn in a random position. The game loop continuously updates the canvas, checks for collisions, and redraws the frog and food elements. Note: Pictograms are not used in this example, but you can modify the game's appearance by leveraging pictogram libraries or by drawing custom pictograms on the canvas instead of basic shapes.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a game called "Hungry Frog" implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Hungry Frog Game</title>
</head>
<body>
  <h1>Hungry Frog Game</h1>
  <canvas id="game-canvas" width="400" height="400"></canvas>

// Frog object
    const frog = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      size: 40,
      color: '#008000',
      isMoving: false
    };

// Food object
    const food = {
      x: getRandomPosition(canvas.width),
      y: getRandomPosition(canvas.height),
      size: 20,
      color: '#FFA500'
    };

// Function to randomize positions
    function getRandomPosition(max) {
      return Math.floor(Math.random() * max);
    }

// Function to draw a frog
    function drawFrog() {
      ctx.beginPath();
      ctx.arc(frog.x, frog.y, frog.size, 0, Math.PI * 2, false);
      ctx.fillStyle = frog.color;
      ctx.fill();
      ctx.closePath();
    }

// Function to draw food
    function drawFood() {
      ctx.fillStyle = food.color;
      ctx.fillRect(food.x, food.y, food.size, food.size);
    }

// Function to check if frog caught the food
    function checkCollision() {
      if (frog.x < food.x + food.size &&
          frog.x + frog.size > food.x &&
          frog.y < food.y + food.size &&
          frog.y + frog.size > food.y) {
        // Frog caught the food
        food.x = getRandomPosition(canvas.width);
        food.y = getRandomPosition(canvas.height);
      }
    }

// Function to handle keyboard events
    function handleKeyDown(e) {
      if (e.key === 'ArrowUp') {
        frog.y -= 10;
      } else if (e.key === 'ArrowDown') {
        frog.y += 10;
      } else if (e.key === 'ArrowLeft') {
        frog.x -= 10;
      } else if (e.key === 'ArrowRight') {
        frog.x += 10;
      }
    }

// Update game state and redraw
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawFrog();
      drawFood();
      checkCollision();
    }

// Start the game
    function startGame() {
      document.addEventListener('keydown', handleKeyDown);
      setInterval(update, 100); // Update every 100 milliseconds
    }

// Start the game when the page is loaded
    window.onload = startGame;
  </script>
</body>
</html>
```

Note: Pictograms are not used in this example, but you can modify the game's appearance by leveraging pictogram libraries or by drawing custom pictograms on the canvas instead of basic shapes.