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

No:4417

1425

←

Prev Next

→

Small snail collects leaves and jumps over rocks
Developer User3776｜Date and time 23/6/27 23:40:13
Build time 45.368 sec｜Game capacity 4.635KB｜

Script

Here's a simple game where a small snail collects leaves and jumps over rocks:

Small Snail Game

The game starts with a click event, which sets up the snail, leaves, and rocks, resets the score, and starts the game loop. The game loop updates the positions of the snail, leaves, and rocks, checks for collisions, and updates the score. The game ends when the snail collides with a rock, at which point a "Game Over" message is displayed and a click event is added to restart the game. Enjoy!

←

Prev　Next

→ 　

Back　

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

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

Here's a simple game where a small snail collects leaves and jumps over rocks:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Small Snail Game</title>
  </head>
  <body>
    <h1>Small Snail Game</h1>
    <canvas id="canvas"></canvas>
    
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      
      // define variables
      let score = 0;
      let snail = { x: 50, y: canvas.height / 2 };
      let leaves = [];
      let rocks = [];
      let gameId;
      
      // set up canvas
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      context.fillStyle = "#02c39a";
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.font = "36px Arial";
      context.fillStyle = "#ffffff";
      context.fillText("Click to Start", canvas.width / 2 - 120, canvas.height / 2);
      
      // handle click events
      canvas.onclick = startGame;
      
      function startGame() {
        // set up snail
        snail.y = canvas.height / 2;
        
        // set up leaves and rocks
        leaves = [];
        rocks = [];
        for (let i = 0; i < 5; i++) {
          leaves.push({
            x: canvas.width + Math.random() * 1000,
            y: Math.random() * canvas.height,
            width: 50,
            height: 50
          });
          rocks.push({
            x: canvas.width + Math.random() * 1000,
            y: Math.random() * canvas.height,
            width: 50,
            height: 50
          });
        }
        
        // reset score
        score = 0;
        
        // start game loop
        clearInterval(gameId);
        gameId = setInterval(update, 1000 / 60);
        
        // remove click event listener
        canvas.onclick = null;
      }
      
      function update() {
        // clear canvas
        context.fillStyle = "#02c39a";
        context.fillRect(0, 0, canvas.width, canvas.height);
        
        // update snail position
        if (snail.y < canvas.height - 100) {
          snail.y += 5;
        }
        
        // update leaves position and check for collision
        for (let i = 0; i < leaves.length; i++) {
          leaves[i].x -= 10;
          
          if (snail.x + 50 > leaves[i].x &&
              snail.x < leaves[i].x + leaves[i].width &&
              snail.y + 50 > leaves[i].y &&
              snail.y < leaves[i].y + leaves[i].height) {
            
            // remove leaf and add to score
            leaves.splice(i, 1);
            score++;
          }
          
          // respawn leaf
          if (leaves[i].x < -50) {
            leaves[i].x = canvas.width + Math.random() * 1000;
            leaves[i].y = Math.random() * canvas.height;
          }
          
          // draw leaf
          context.fillStyle = "#5cdb95";
          context.fillRect(leaves[i].x, leaves[i].y, leaves[i].width, leaves[i].height);
        }
        
        // update rocks position and check for collision
        for (let i = 0; i < rocks.length; i++) {
          rocks[i].x -= 10;
          
          if (snail.x + 50 > rocks[i].x &&
              snail.x < rocks[i].x + rocks[i].width &&
              snail.y + 50 > rocks[i].y &&
              snail.y < rocks[i].y + rocks[i].height) {
            
            // game over
            clearInterval(gameId);
            canvas.onclick = startGame;
            context.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
            
            return;
          }
          
          // respawn rock
          if (rocks[i].x < -50) {
            rocks[i].x = canvas.width + Math.random() * 1000;
            rocks[i].y = Math.random() * canvas.height;
          }
          
          // draw rock
          context.fillStyle = "#ff4c4c";
          context.fillRect(rocks[i].x, rocks[i].y, rocks[i].width, rocks[i].height);
        }
        
        // draw snail
        context.fillStyle = "#ff9f43";
        context.fillRect(snail.x, snail.y, 50, 50);
        
        // draw score
        context.font = "24px Arial";
        context.fillStyle = "#ffffff";
        context.fillText(`Score: ${score}`, 10, 30);
      }
    </script>
  </body>
</html>
```