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

No:35191

Animal Race. Horse vs Lion
Developer User16437｜Date and time 24/1/13 15:50:00
Build time 9.56 sec｜Game capacity 2.905KB｜

Script

Sure! Here's an example of an HTML file that implements a simple game called "Animal Race" where a horse races against a lion. The game is designed for smartphone operation and uses pictograms:

Animal Race

To run the game, simply save the above code in a file with an `.html` extension (e.g., `animal_race.html`), and then open the file in a web browser. You'll see a "Start Race" button, and when you click it, the race between the horse and lion will begin. The horse is represented by a brown rectangle with a horse pictogram, and the lion is represented by a goldenrod rectangle with a lion pictogram. The winner will be announced in an alert message when either animal reaches the finish line (i.e., right edge of the canvas).

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's an example of an HTML file that implements a simple game called "Animal Race" where a horse races against a lion. The game is designed for smartphone operation and uses pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Animal Race</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Animal Race</h1>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    <button onclick="startGame()">Start Race</button>

function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");

horse = {
                x: 20,
                y: canvas.height / 2,
                speed: 2,
            };

lion = {
                x: 20,
                y: canvas.height / 2 + 50,
                speed: 3,
            };

raceStarted = true;
            animate();
        }

function animate() {
            requestAnimationFrame(animate);
            if (!raceStarted) return;

moveAnimals();
            drawBackground();
            drawAnimals();
            checkWinner();
        }

function moveAnimals() {
            horse.x += horse.speed;
            lion.x += lion.speed;
        }

function drawBackground() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "lightgreen";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

function drawAnimals() {
            ctx.fillStyle = "brown";
            ctx.fillRect(horse.x, horse.y, 30, 20);

ctx.fillStyle = "goldenrod";
            ctx.fillRect(lion.x, lion.y, 50, 30);

ctx.font = "20px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("🐴", horse.x + 8, horse.y + 16);
            ctx.fillText("🦁", lion.x + 15, lion.y + 20);
        }