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

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

No:35377

←

Prev Next

→

The Run. You Are a Zebra, Watch Out for the Lion, ..ALL
Developer User16498｜Date and time 24/1/14 9:23:40
Build time 16.472 sec｜Game capacity 4.882KB｜

Script

Sure! Here's a simple game implementation in a single HTML file where you play as a zebra and need to avoid the lion while collecting rocks with the help of an elephant and a giraffe. The game will end once the player collects 10 rocks.

In this implementation, the game board is represented by a `<div>` element with a width and height of 400px. The zebra, lion, elephant, giraffe, and rocks are all positioned using absolute positioning within the game board. The zebra can be controlled using the arrow keys. Please note that for this game to work properly, you need to have the respective image files (zebra.png, lion.png, elephant.png, giraffe.png, and rock.png) in the same directory as the HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Zebra Game</title>
    <style>
      #game {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid black;
      }
      .item {
        position: absolute;
        width: 50px;
        height: 50px;
      }
      #zebra {
        background-image: url('zebra.png');
      }
      #lion {
        background-image: url('lion.png');
      }
      #elephant {
        background-image: url('elephant.png');
      }
      #giraffe {
        background-image: url('giraffe.png');
      }
      #rock {
        background-image: url('rock.png');
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="zebra" class="item"></div>
      <div id="lion" class="item"></div>
      <div id="elephant" class="item"></div>
      <div id="giraffe" class="item"></div>
      <div id="rock1" class="item rock"></div>
      <div id="rock2" class="item rock"></div>
      <div id="rock3" class="item rock"></div>
      <div id="rock4" class="item rock"></div>
      <div id="rock5" class="item rock"></div>
      <div id="rock6" class="item rock"></div>
      <div id="rock7" class="item rock"></div>
      <div id="rock8" class="item rock"></div>
      <div id="rock9" class="item rock"></div>
      <div id="rock10" class="item rock"></div>
    </div>

// Event Listeners
      document.addEventListener('keydown', moveZebra);

// Move the zebra based on arrow key presses
      function moveZebra(event) {
        const key = event.keyCode;
        const zebra = document.getElementById('zebra');
        const step = 50;

if (key === 37) { // Left Arrow: Move zebra to the left
          if (zebraPosition.x > 0) {
            zebraPosition.x -= step;
          }
        } else if (key === 39) { // Right Arrow: Move zebra to the right
          if (zebraPosition.x < 350) {
            zebraPosition.x += step;
          }
        } else if (key === 38) { // Up Arrow: Move zebra up
          if (zebraPosition.y > 0) {
            zebraPosition.y -= step;
          }
        } else if (key === 40) { // Down Arrow: Move zebra down
          if (zebraPosition.y < 350) {
            zebraPosition.y += step;
          }
        }

zebra.style.left = zebraPosition.x + 'px';
        zebra.style.top = zebraPosition.y + 'px';

checkCollisions();
      }

// Check for collisions between zebra and other items
      function checkCollisions() {
        // Check if zebra collides with lion
        const lion = document.getElementById('lion');
        if (zebraPosition.x === lionPosition.x && zebraPosition.y === lionPosition.y) {
          endGame();
          return;
        }

// Check if zebra collects a rock
        const rocks = Array.from(document.getElementsByClassName('rock'));

rocks.forEach((rock) => {
          if (
            zebraPosition.x === parseInt(rock.style.left) &&
            zebraPosition.y === parseInt(rock.style.top)
          ) {
            rock.style.display = 'none';
            rockCount++;
          }
        });

if (rockCount >= 10) {
          winGame();
        }
      }

// End the game when the zebra collides with the lion
      function endGame() {
        alert('Game Over! The lion caught you!');
        resetGame();
      }

// Win the game when the zebra collects 10 rocks
      function winGame() {
        alert('Congratulations! You collected all the rocks!');
        resetGame();
      }

// Reset game variables and item positions
      function resetGame() {
        zebraPosition = { x: 0, y: 0 };
        rockCount = 0;

document.getElementById('zebra').style.top = '0px';
        document.getElementById('zebra').style.left = '0px';

Array.from(document.getElementsByClassName('rock')).forEach((rock) => {
          rock.style.display = 'block';
        });
      }     
      
      // Start the game
      resetGame();
    </script>
  </body>
</html>
```

Please note that for this game to work properly, you need to have the respective image files (zebra.png, lion.png, elephant.png, giraffe.png, and rock.png) in the same directory as the HTML file.