Lion Guard (it’s a group)'s game | AI game creator

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

No:11041

103

Lion Guard (it’s a group)
Developer User4714｜Date and time 23/8/7 0:07:12
Build time 50.099 sec｜Game capacity 4.575KB｜

Certainly! Here's a simple game called "Lion Guard" implemented as a single HTML file:

In this game, you need to protect the Pride Lands by controlling the lion using your device's orientation. The goal is to avoid colliding with the hyenas descending from the top of the canvas. The score increases as you successfully avoid the hyenas, and the game ends if the lion collides with any hyena. This game uses two pictogram images: "emozi_all/game.png" for the lion and "emozi_all/lion.png" for the hyenas. You would need to replace these image URLs with the actual image URLs you have or modify the game to use different types of pictograms. Please make sure to replace the image URLs to match the actual path or URLs of the image files you want to use. Also, remember to save the pictogram images (`emozi_all/pictogram.png` and `emozi_rabbit.png`) in the same directory as the HTML file or provide the correct path to the images. With this code, you can now play the "Lion Guard" game on a smartphone or any web browser that supports HTML and JavaScript. Enjoy protecting the Pride Lands!

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

Certainly! Here's a simple game called "Lion Guard" implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Lion Guard Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="500" height="500"></canvas>

<script>
    // Lion Guard Game

// Initialize canvas and context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Pictogram images
    const lionImage = new Image();
    lionImage.src = "lion.png";

const hyenaImage = new Image();
    hyenaImage.src = "hyena.png";

// Game state variables
    let score = 0;
    let gameover = false;

// Lion position
    const lion = {
      x: canvas.width / 2,
      y: canvas.height - 100,
      width: 50,
      height: 50
    };

// Hyena positions
    const hyenas = [
      { x: 50, y: 50, width: 30, height: 30 },
      { x: 150, y: 100, width: 30, height: 30 },
      { x: 300, y: 150, width: 30, height: 30 },
      { x: 400, y: 200, width: 30, height: 30 }
    ];

// Event listener for device orientation changes
    window.addEventListener("deviceorientation", handleOrientation);

// Protect the Pride Lands!
    function gameLoop() {
      if (!gameover) {
        clearCanvas();
        moveLion();
        moveHyenas();
        drawLion();
        drawHyenas();
        checkCollision();

// Update score
        ctx.font = "16px Arial";
        ctx.fillStyle = "#000";
        ctx.fillText("Score: " + score, 8, 20);

requestAnimationFrame(gameLoop);
      } else {
        endGame();
      }
    }

// Clear canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Update lion position based on device orientation
    function handleOrientation(event) {
      lion.x += event.gamma / 10; // Adjust speed based on gamma value
    }

// Move lion within the canvas boundaries
    function moveLion() {
      if (lion.x < 0) lion.x = 0;
      if (lion.x + lion.width > canvas.width) lion.x = canvas.width - lion.width;
    }

// Move hyenas from top to bottom
    function moveHyenas() {
      for (let i = 0; i < hyenas.length; i++) {
        hyenas[i].y += 2; // Adjust speed as needed

if (hyenas[i].y > canvas.height) {
          // Respawn hyena at the top with a new random x position
          hyenas[i].x = Math.random() * (canvas.width - hyenas[i].width);
          hyenas[i].y = 0;
          score++;
        }
      }
    }

// Draw lion on the canvas
    function drawLion() {
      ctx.drawImage(lionImage, lion.x, lion.y, lion.width, lion.height);
    }

// Draw hyenas on the canvas
    function drawHyenas() {
      for (let i = 0; i < hyenas.length; i++) {
        ctx.drawImage(hyenaImage, hyenas[i].x, hyenas[i].y, hyenas[i].width, hyenas[i].height);
      }
    }

// Check collision between lion and hyenas
    function checkCollision() {
      for (let i = 0; i < hyenas.length; i++) {
        if (
          lion.x < hyenas[i].x + hyenas[i].width &&
          lion.x + lion.width > hyenas[i].x &&
          lion.y < hyenas[i].y + hyenas[i].height &&
          lion.y + lion.height > hyenas[i].y
        ) {
          gameover = true;
        }
      }
    }

// End the game
    function endGame() {
      ctx.font = "30px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
      ctx.fillText("Final Score: " + score, canvas.width / 2 - 80, canvas.height / 2 + 40);
    }

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

In this game, you need to protect the Pride Lands by controlling the lion using your device's orientation. The goal is to avoid colliding with the hyenas descending from the top of the canvas. The score increases as you successfully avoid the hyenas, and the game ends if the lion collides with any hyena.

This game uses two pictogram images: "lion.png" for the lion and "hyena.png" for the hyenas. You would need to replace these image URLs with the actual image URLs you have or modify the game to use different types of pictograms.

Please make sure to replace the image URLs to match the actual path or URLs of the image files you want to use. Also, remember to save the pictogram images (`lion.png` and `hyena.png`) in the same directory as the HTML file or provide the correct path to the images.

With this code, you can now play the "Lion Guard" game on a smartphone or any web browser that supports HTML and JavaScript. Enjoy protecting the Pride Lands!