Sheep hopping game with obstacles you have to jump's game

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

No:20047

←

Prev Next

→

Sheep hopping game with obstacles you have to jump
Developer User8931｜Date and time 23/10/8 1:36:42
Build time 18.072 sec｜Game capacity 3.033KB｜

Script

Sure! Here's an example of a sheep hopping game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and uses pictograms for visuals. Remember to enclose the code within `` tags. <br><br> <br> <style> canvas { border: 1px solid #000; } </style> <canvas id="gameCanvas" width="320" height="480"></canvas>

In this game, you control a sheep that needs to avoid obstacles by jumping over them. The sheep automatically moves downwards due to gravity, and you can make it jump by tapping on the screen. The score increments whenever an obstacle passes off-screen. Note: You would need to replace the image file names (`emozi_rabbit.png` and `emozi_apple.png`) in the code with actual image files for the sheep and obstacles in pictogram format that you want to use.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Sheep Hopping Game</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

// Load sheep and obstacle images
      sheep = new Image();
      sheep.src = "sheep.png";

obstacle = new Image();
      obstacle.src = "obstacle.png";

// Set initial game variables
      gravity = 0.5;
      jumpForce = -8;
      score = 0;

// Set event listener for jump
      canvas.addEventListener("click", function() {
        if (sheep.y === canvas.height - sheep.height) {
          sheep.velocityY = jumpForce;
        }
      });

// Set initial position and velocity
      sheep.x = 50;
      sheep.y = canvas.height - sheep.height;
      sheep.velocityY = 0;

// Start game loop
      gameLoop();
    }

// Game loop
    function gameLoop() {
      // Update
      update();

// Draw
      draw();

// Repeat
      requestAnimationFrame(gameLoop);
    }

// Update game state
    function update() {
      // Apply gravity to sheep
      sheep.velocityY += gravity;
      sheep.y += sheep.velocityY;

// Check for collision with obstacle
      if (sheep.y > canvas.height - sheep.height) {
        sheep.y = canvas.height - sheep.height;
        sheep.velocityY = 0;
      }

// Update obstacle position
      obstacle.x -= 5;

// If obstacle goes off-screen, reset it and increment score
      if (obstacle.x < -obstacle.width) {
        obstacle.x = canvas.width;
        score++;
      }
    }

// Draw game elements
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw sheep
      ctx.drawImage(sheep, sheep.x, sheep.y);

// Draw obstacle
      ctx.drawImage(obstacle, obstacle.x, canvas.height - obstacle.height);

// Draw score
      ctx.font = "16px Arial";
      ctx.fillText("Score: " + score, 10, 20);
    }

// Start the game
    window.onload = function() {
      init();
    };
  </script>
</body>
</html>
```

In this game, you control a sheep that needs to avoid obstacles by jumping over them. The sheep automatically moves downwards due to gravity, and you can make it jump by tapping on the screen. The score increments whenever an obstacle passes off-screen.

Note: You would need to replace the image file names (`sheep.png` and `obstacle.png`) in the code with actual image files for the sheep and obstacles in pictogram format that you want to use.