The Run. You Are a Zebra, Watch Out for the Lion, The Elephant will Protect the Zebra, Find 10 Rocks to Win's game

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

No:35299

←

Prev Next

→

The Run. You Are a Zebra, Watch Out for the Lion, ..ALL
Developer User16498｜Date and time 24/1/13 23:06:01
Build time 18.857 sec｜Game capacity 4.784KB｜

Script

Sure, here's an example of a game implemented as a single HTML file using JavaScript:

In this game, you play as a zebra trying to collect 10 rocks while avoiding the lion. The elephant protects the zebra and will move it to a random location if they get close. The game ends when you either collect all the rocks or get caught by the lion. You can control the zebra's movement by clicking anywhere on the canvas. The game uses JavaScript to handle the game logic, event handling, and drawing on the canvas. The game loop continuously updates and redraws the game state.

←

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 implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Zebra Escape!</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

// Game initialization
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

// Create game objects
      zebra = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 25
      };

lion = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: 50
      };

elephant = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: 75
      };

rocks = [];
      for (var i = 0; i < maxRocks; i++) {
        rocks.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          collected: false
        });
      }

// Add event listener for mouse clicks
      canvas.addEventListener("click", handleMouseClick);

// Start the game loop
      gameLoop();
    }

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

// Check game over condition
      if (score >= maxRocks) {
        alert("Congratulations! You found all the rocks!");
        resetGame();
      } else {
        requestAnimationFrame(gameLoop);
      }
    }

// Update game logic
    function update() {
      // Move the lion randomly
      lion.x += (Math.random() - 0.5) * 5;
      lion.y += (Math.random() - 0.5) * 5;

// Check collision with zebra and lion
      var distance = Math.sqrt(
        Math.pow(zebra.x - lion.x, 2) + Math.pow(zebra.y - lion.y, 2)
      );
      if (distance < zebra.radius + lion.radius) {
        alert("Game over! The lion caught you.");
        resetGame();
      }

// Check collision with zebra and elephant
      distance = Math.sqrt(
        Math.pow(zebra.x - elephant.x, 2) + Math.pow(zebra.y - elephant.y, 2)
      );
      if (distance < zebra.radius + elephant.radius) {
        // Elephant protects the zebra, move it to a random location
        zebra.x = Math.random() * canvas.width;
        zebra.y = Math.random() * canvas.height;
      }

// Check collision with rocks
      rocks.forEach(function(rock) {
        if (!rock.collected) {
          distance = Math.sqrt(
            Math.pow(zebra.x - rock.x, 2) + Math.pow(zebra.y - rock.y, 2)
          );
          if (distance < zebra.radius) {
            rock.collected = true;
            score++;
          }
        }
      });
    }

// Handle mouse click event
    function handleMouseClick(event) {
      var rect = canvas.getBoundingClientRect();
      var mouseX = event.clientX - rect.left;
      var mouseY = event.clientY - rect.top;

// Move the zebra to the clicked location
      zebra.x = mouseX;
      zebra.y = mouseY;
    }

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

// Draw zebra
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.arc(zebra.x, zebra.y, zebra.radius, 0, Math.PI * 2);
      ctx.fill();

// Draw lion
      ctx.fillStyle = "brown";
      ctx.beginPath();
      ctx.arc(lion.x, lion.y, lion.radius, 0, Math.PI * 2);
      ctx.fill();

// Draw elephant
      ctx.fillStyle = "gray";
      ctx.beginPath();
      ctx.arc(elephant.x, elephant.y, elephant.radius, 0, Math.PI * 2);
      ctx.fill();

// Draw rocks
      rocks.forEach(function(rock) {
        if (!rock.collected) {
          ctx.fillStyle = "brown";
          ctx.fillRect(rock.x - 10, rock.y - 10, 20, 20);
        }
      });

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

// Reset game
    function resetGame() {
      score = 0;
      init();
    }

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

The game uses JavaScript to handle the game logic, event handling, and drawing on the canvas. The game loop continuously updates and redraws the game state.