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

No:39041

103

←

Prev Next

→

You Are a Boy, Watch Out for Lions and Crocodiles,..ALL
Developer User17486｜Date and time 24/1/26 12:34:46
Build time 31.746 sec｜Game capacity 6.988KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It is an interactive game where you play as a boy and need to watch out for lions and crocodiles while finding 10 zebras to win. The elephant and giraffe will protect you.

You Are a Boy - Watch Out for Lions and Crocodiles, Find 10 Zebras to Win!

In this game, you can control the boy (representing your character) by clicking on different areas of the game board. The objective is to find and collect 10 zebras while avoiding collisions with lions and crocodiles. The game will end if you get caught by a lion or eaten by a crocodile. However, if you collide with either the elephant or the giraffe, you will win the game. Your score will be displayed at the top, and a message will be shown when you win or lose the game. Have fun playing!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>You Are a Boy - Game</title>
  <style type="text/css">
    #game-board {
      width: 400px;
      height: 400px;
      border: 2px solid black;
      position: relative;
    }
    .player {
      position: absolute;
      font-size: 30px;
      text-align: center;
      cursor: pointer;
    }
    .zebra {
      width: 50px;
      height: 50px;
    }
    .lion, .crocodile {
      width: 80px;
      height: 80px;
    }
    .elephant, .giraffe {
      width: 120px;
      height: 120px;
    }
    .message {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>You Are a Boy - Watch Out for Lions and Crocodiles, Find 10 Zebras to Win!</h1>
  <div id="game-board">
  </div>
  <div class="message"></div>

// Game board size
    var boardWidth = 400;
    var boardHeight = 400;

// Player position
    var playerX = 50;
    var playerY = 50;

// Create the game board
    var gameBoard = document.getElementById("game-board");

// Display the player on the game board
    var player = document.createElement("div");
    player.className = "player";
    player.innerHTML = "👦";
    player.style.left = playerX + "px";
    player.style.top = playerY + "px";
    gameBoard.appendChild(player);

// Display zebras on the game board
    function addZebra() {
      if (zebrasCount >= 10) {
        endGame();
        return;
      }

var zebra = document.createElement("div");
      zebra.className = "zebra";
      zebra.innerHTML = "🦓";
      zebra.style.left = getRandomPosition(boardWidth) + "px";
      zebra.style.top = getRandomPosition(boardHeight) + "px";
      gameBoard.appendChild(zebra);
      zebrasCount++;
    }

// Display the lion on the game board
    function addLion() {
      var lion = document.createElement("div");
      lion.className = "lion";
      lion.innerHTML = "🦁";
      lion.style.left = getRandomPosition(boardWidth) + "px";
      lion.style.top = getRandomPosition(boardHeight) + "px";
      gameBoard.appendChild(lion);
    }

// Display the crocodile on the game board
    function addCrocodile() {
      var crocodile = document.createElement("div");
      crocodile.className = "crocodile";
      crocodile.innerHTML = "🐊";
      crocodile.style.left = getRandomPosition(boardWidth) + "px";
      crocodile.style.top = getRandomPosition(boardHeight) + "px";
      gameBoard.appendChild(crocodile);
    }

// Display the elephant on the game board
    var elephant = document.createElement("div");
    elephant.className = "elephant";
    elephant.innerHTML = "🐘";
    elephant.style.left = getRandomPosition(boardWidth) + "px";
    elephant.style.top = getRandomPosition(boardHeight) + "px";
    gameBoard.appendChild(elephant);

// Display the giraffe on the game board
    var giraffe = document.createElement("div");
    giraffe.className = "giraffe";
    giraffe.innerHTML = "🦒";
    giraffe.style.left = getRandomPosition(boardWidth) + "px";
    giraffe.style.top = getRandomPosition(boardHeight) + "px";
    gameBoard.appendChild(giraffe);

// Move the player
    gameBoard.addEventListener("click", function(event) {
      if (gameOver) {
        return;
      }
      
      playerX = event.clientX - gameBoard.getBoundingClientRect().left - 25;
      playerY = event.clientY - gameBoard.getBoundingClientRect().top - 25;
      player.style.left = playerX + "px";
      player.style.top = playerY + "px";
      
      checkCollision();
    });

// Generate random position within the game board
    function getRandomPosition(max) {
      return Math.floor(Math.random() * max);
    }

// Check for collision with zebras, lions, crocodiles, elephant, and giraffe
    function checkCollision() {
      var zebras = document.getElementsByClassName("zebra");
      var lions = document.getElementsByClassName("lion");
      var crocodiles = document.getElementsByClassName("crocodile");

for (var i = 0; i < zebras.length; i++) {
        if (isColliding(player, zebras[i])) {
          zebras[i].parentNode.removeChild(zebras[i]);
          score++;
          zebrasCount--;
          updateScore();
        }
      }

for (var j = 0; j < lions.length; j++) {
        if (isColliding(player, lions[j])) {
          loseGame("You got caught by a lion! Game Over.");
        }
      }

for (var k = 0; k < crocodiles.length; k++) {
        if (isColliding(player, crocodiles[k])) {
          loseGame("You got eaten by a crocodile! Game Over.");
        }
      }

if (isColliding(player, elephant) || isColliding(player, giraffe)) {
        winGame();
      }
    }

// Check if two elements are colliding
    function isColliding(elem1, elem2) {
      var rect1 = elem1.getBoundingClientRect();
      var rect2 = elem2.getBoundingClientRect();

return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right ||
        rect1.right < rect2.left
      );
    }

// Update the game score
    function updateScore() {
      var scoreElement = document.getElementById("score");
      scoreElement.innerHTML = "Score: " + score;
    }

// End the game
    function endGame() {
      gameOver = true;
      var messageElement = document.querySelector(".message");
      messageElement.innerHTML = "Congratulations! You found all the zebras!<br>You won the game!";
    }

// Lose the game
    function loseGame(message) {
      gameOver = true;
      var messageElement = document.querySelector(".message");
      messageElement.innerHTML = message;
    }

// Win the game
    function winGame() {
      gameOver = true;
      var messageElement = document.querySelector(".message");
      messageElement.innerHTML = "Congratulations! The elephant and giraffe saved you!<br>You won the game!";
    }

// Start the game
    setTimer();
    
    function setTimer() {
      setInterval(function() {
        if (!gameOver) {
          addZebra();
          addLion();
          addCrocodile();
        }
      }, 2000);
    }
  </script>
</body>
</html>
```