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

No:35378

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

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript. The game is called "The Run: You Are a Zebra". Your goal is to collect 10 rocks while avoiding the lion. The elephant and the giraffe will protect you from the lion. The game can be played on a smartphone using pictograms.

The Run: You Are a Zebra

To play the game, you would need to save the pictogram images for zebra, lion, elephant, giraffe, and rock, and update the respective image URLs (`emozi_all/play.png`, `emozi_all/lion.png`, `emozi_all/elephant.png`, `emozi_all/giraffe.png`, `emozi_all/rock.png`) in the CSS section of the code. Please note that this is just a simple example to demonstrate the game mechanics and does not include advanced features or graphics. The visuals can be enhanced by using appropriate pictograms, adjusting the sizes, and improving the overall design.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>The Run: You Are a Zebra</title>
    <style>
        body {
            background-color: #d8d8d8;
            text-align: center;
            font-family: Arial, sans-serif;
        }

#game-container {
            margin-top: 50px;
        }

#zebra {
            width: 100px;
            height: 100px;
            background-image: url('zebra.png');
            background-size: cover;
            position: absolute;
        }

#rock {
            width: 50px;
            height: 50px;
            background-image: url('rock.png');
            background-size: cover;
            position: absolute;
        }

#lion {
            width: 150px;
            height: 150px;
            background-image: url('lion.png');
            background-size: cover;
            position: absolute;
        }

#elephant {
            width: 150px;
            height: 150px;
            background-image: url('elephant.png');
            background-size: cover;
            position: absolute;
        }

#giraffe {
            width: 150px;
            height: 150px;
            background-image: url('giraffe.png');
            background-size: cover;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>The Run: You Are a Zebra</h1>
    <div id="game-container">
        <div id="zebra"></div>
        <div id="rock"></div>
        <div id="lion"></div>
        <div id="elephant"></div>
        <div id="giraffe"></div>
    </div>

// Get game elements
        var zebra = document.getElementById('zebra');
        var rock = document.getElementById('rock');
        var lion = document.getElementById('lion');
        var elephant = document.getElementById('elephant');
        var giraffe = document.getElementById('giraffe');

// Update score display
        function updateScore() {
            document.getElementById('score').innerText = score + ' Rocks';
        }

// Move zebra
        function moveZebra(event) {
            if (!isGameOver) {
                switch (event.key) {
                    case 'ArrowUp':
                        zebra.style.top = (zebra.offsetTop - 10) + 'px';
                        break;
                    case 'ArrowDown':
                        zebra.style.top = (zebra.offsetTop + 10) + 'px';
                        break;
                    case 'ArrowLeft':
                        zebra.style.left = (zebra.offsetLeft - 10) + 'px';
                        break;
                    case 'ArrowRight':
                        zebra.style.left = (zebra.offsetLeft + 10) + 'px';
                        break;
                }

// Check collision with rocks
                if (checkCollision(zebra, rock)) {
                    rock.style.display = 'none';
                    score++;

if (score >= 10) {
                        endGame(true); // Win
                    }
                }

// Check collision with lion
                if (checkCollision(zebra, lion)) {
                    endGame(false); // Lose
                }
            }
        }

// Check collision between two elements
        function checkCollision(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();

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

// End the game
        function endGame(isWin) {
            isGameOver = true;

if (isWin) {
                alert('Congratulations! You collected all the rocks. You win!');
            } else {
                alert('Game over! The lion caught you. Try again!');
            }
        }

// Initialize game
        function initializeGame() {
            updateScore();
            document.addEventListener('keydown', moveZebra);
        }

initializeGame();
    </script>
</body>
</html>
```

To play the game, you would need to save the pictogram images for zebra, lion, elephant, giraffe, and rock, and update the respective image URLs (`zebra.png`, `lion.png`, `elephant.png`, `giraffe.png`, `rock.png`) in the CSS section of the code.

Please note that this is just a simple example to demonstrate the game mechanics and does not include advanced features or graphics. The visuals can be enhanced by using appropriate pictograms, adjusting the sizes, and improving the overall design.