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

No:6753

174

←

Prev Next

→

Zookeeper
Developer User3922｜Date and time 23/7/3 14:42:44
Build time 33.413 sec｜Game capacity 3.941KB｜

Script

As an AI text-based model, I can provide you with the JavaScript code to create a simple Zookeeper game. You can then embed this code into an HTML file. Here's a playable sample game implemented in JavaScript:

Welcome to the Zookeeper Game!

Use your smartphone to play and help the zookeeper.

To play the game: 1. Create an HTML file and copy the above code into it (enclose the code within `script` tags). 2. Save the file with an `.html` extension (e.g., `zookeeper_game.html`). 3. Open the file on your smartphone using a web browser. 4. Tilt your smartphone to control the zookeeper and try to catch the animals (green squares). Note: The game uses the `mousemove` event, which is not supported by all web browsers. Make sure to test it on a browser that supports this event (e.g., Chrome on Android).

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Zookeeper Game</title>
    </head>
    <body>
        <h1>Welcome to the Zookeeper Game!</h1>
        <p>Use your smartphone to play and help the zookeeper.</p>
        
        <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the position and size of the zookeeper (player)
            var zookeeper = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                width: 50,
                height: 50
            };

// Initialize the position and size of the animals
            var animals = [
                { x: 50, y: 50, width: 25, height: 25 },
                { x: 200, y: 150, width: 35, height: 35 },
                { x: 300, y: 300, width: 40, height: 40 }
            ];

// Function to draw the zookeeper and animals on the canvas
            function draw() {
                // Clear the canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the zookeeper
                ctx.fillStyle = "blue";
                ctx.fillRect(zookeeper.x - zookeeper.width / 2, zookeeper.y - zookeeper.height / 2, zookeeper.width, zookeeper.height);

// Draw the animals
                ctx.fillStyle = "green";
                animals.forEach(function(animal) {
                    ctx.fillRect(animal.x - animal.width / 2, animal.y - animal.height / 2, animal.width, animal.height);
                });
            }

// Function to handle player movement based on smartphone tilting
            function handleTilt(event) {
                var x = event.beta;  // X-axis tilt (left/right)
                var y = event.gamma; // Y-axis tilt (front/back)

// Update the zookeeper position based on tilting
                zookeeper.x += x;
                zookeeper.y += y;

// Ensure the zookeeper stays within the canvas boundaries
                if (zookeeper.x < zookeeper.width / 2) {
                    zookeeper.x = zookeeper.width / 2;
                }
                if (zookeeper.x > canvas.width - zookeeper.width / 2) {
                    zookeeper.x = canvas.width - zookeeper.width / 2;
                }
                if (zookeeper.y < zookeeper.height / 2) {
                    zookeeper.y = zookeeper.height / 2;
                }
                if (zookeeper.y > canvas.height - zookeeper.height / 2) {
                    zookeeper.y = canvas.height - zookeeper.height / 2;
                }
            }

// Add event listener to handle smartphone tilting
            window.addEventListener('deviceorientation', handleTilt, true);

// Game loop to continuously update and redraw the canvas
            function gameLoop() {
                draw();
                requestAnimationFrame(gameLoop);
            }

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

To play the game:

1. Create an HTML file and copy the above code into it (enclose the code within `script` tags).
2. Save the file with an `.html` extension (e.g., `zookeeper_game.html`).
3. Open the file on your smartphone using a web browser.
4. Tilt your smartphone to control the zookeeper and try to catch the animals (green squares).

Note: The game uses the `deviceorientation` event, which is not supported by all web browsers. Make sure to test it on a browser that supports this event (e.g., Chrome on Android).