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:35379

←

Prev Next

→

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

Script

Sure! Here's a simple game that meets your requirements:

Notes: - You would need to replace the `"emozi_all/zebra.png"`, `"emozi_all/lion.png"`, `"emozi_all/elephant.png"`, `"emozi_all/giraffe.png"`, `"emozi_all/rock.png"` with actual image URLs or use your own custom pictograms. - The game uses arrow keys to move the zebra. - If the zebra collides with the lion or giraffe, the game ends and a game over message is shown. - If the zebra collects all 10 rocks by colliding with them, the game ends and a congratulations message is shown. - The game is displayed on a canvas element with a size of 400x400 pixels. - The game loop runs every 20 milliseconds to update the game state and re-draw the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple game that meets your requirements:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Zebra Run Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Game variables
        var canvas;
        var context;
        var zebra;
        var lion;
        var elephant;
        var giraffe;
        var rocks;
        var score;
        var isGameOver;
        
        // Pictogram images
        var zebraImg = new Image();
        zebraImg.src = "zebra.png";
        
        var lionImg = new Image();
        lionImg.src = "lion.png";
        
        var elephantImg = new Image();
        elephantImg.src = "elephant.png";
        
        var giraffeImg = new Image();
        giraffeImg.src = "giraffe.png";
        
        var rockImg = new Image();
        rockImg.src = "rock.png";
        
        // Game initialization
        function init() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            zebra = { x: 50, y: 50, width: 50, height: 50 };
            lion = { x: 150, y: 150, width: 50, height: 50 };
            elephant = { x: 200, y: 250, width: 50, height: 50 };
            giraffe = { x: 300, y: 50, width: 50, height: 50 };
            rocks = [
                { x: 80, y: 200, width: 30, height: 30 },
                // Add more rocks here...
            ];
            score = 0;
            isGameOver = false;
            
            document.addEventListener("keydown", handleKeyPress);
            
            // Start game loop
            setInterval(update, 20);
        }
        
        // Game loop
        function update() {
            if (!isGameOver) {
                moveZebra();
                checkCollisions();
                draw();
            }
        }
        
        // Move zebra based on arrow key press
        function handleKeyPress(event) {
            if (event.keyCode === 37) { // Left arrow
                zebra.x -= 10;
            } else if (event.keyCode === 38) { // Up arrow
                zebra.y -= 10;
            } else if (event.keyCode === 39) { // Right arrow
                zebra.x += 10;
            } else if (event.keyCode === 40) { // Down arrow
                zebra.y += 10;
            }
        }
        
        // Check for collisions between zebra, lion, giraffe, and rocks
        function checkCollisions() {
            if (collided(zebra, lion) || collided(zebra, giraffe)) {
                isGameOver = true;
                alert("Game over! You were caught by the lion or giraffe.");
            }
            
            for (var i = 0; i < rocks.length; i++) {
                if (collided(zebra, rocks[i])) {
                    rocks.splice(i, 1); // Remove rock from array
                    score++;
                    if (score === 10) {
                        isGameOver = true;
                        alert("Congratulations! You found all the rocks and won the game!");
                    }
                }
            }
        }
        
        // Check if two objects have collided
        function collided(obj1, obj2) {
            return obj1.x < obj2.x + obj2.width &&
                   obj1.x + obj1.width > obj2.x &&
                   obj1.y < obj2.y + obj2.height &&
                   obj1.y + obj1.height > obj2.y;
        }
        
        // Move the zebra within the game boundaries
        function moveZebra() {
            if (zebra.x < 0) zebra.x = 0;
            if (zebra.x + zebra.width > canvas.width) zebra.x = canvas.width - zebra.width;
            if (zebra.y < 0) zebra.y = 0;
            if (zebra.y + zebra.height > canvas.height) zebra.y = canvas.height - zebra.height;
        }
        
        // Draw the game objects on the canvas
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            context.drawImage(zebraImg, zebra.x, zebra.y, zebra.width, zebra.height);
            context.drawImage(lionImg, lion.x, lion.y, lion.width, lion.height);
            context.drawImage(elephantImg, elephant.x, elephant.y, elephant.width, elephant.height);
            context.drawImage(giraffeImg, giraffe.x, giraffe.y, giraffe.width, giraffe.height);
            
            for (var i = 0; i < rocks.length; i++) {
                context.drawImage(rockImg, rocks[i].x, rocks[i].y, rocks[i].width, rocks[i].height);
            }
        }
        
        // Start the game
        init();
    </script>
</body>
</html>
```

Notes:
- You would need to replace the `"zebra.png"`, `"lion.png"`, `"elephant.png"`, `"giraffe.png"`, `"rock.png"` with actual image URLs or use your own custom pictograms.
- The game uses arrow keys to move the zebra.
- If the zebra collides with the lion or giraffe, the game ends and a game over message is shown.
- If the zebra collects all 10 rocks by colliding with them, the game ends and a congratulations message is shown.
- The game is displayed on a canvas element with a size of 400x400 pixels.
- The game loop runs every 20 milliseconds to update the game state and re-draw the canvas.