AI game creator

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

No:18567

←

Prev Next

→

Free fire
Developer User8208｜Date and time 23/9/29 23:35:17
Build time 39.815 sec｜Game capacity 3.53KB｜

Script

Sure, here's a simple game called "PictoFire" implemented as a single HTML file playing on smartphone:

In this game, you need to click on the fire pictogram to put out the fire and earn points. The fire pictogram will move randomly on the canvas, and you need to keep track of your score. The game will start when you click on the canvas, and you can restart it by refreshing the page. Please note that you need to replace `"emozi_rabbit.png"` and `"emozi_all/fire.png"` with actual image files for the fireman and fire icons respectively.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple game called "PictoFire" implemented as a single HTML file playing on smartphone:

```html
<!DOCTYPE html>
<html>
<head>
    <title>PictoFire - A Simple Game</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Load images
        const firemanIcon = new Image();
        firemanIcon.src = "fireman.png";
        const fireIcon = new Image();
        fireIcon.src = "fire.png";

// Game initialization function
        function init() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            firemanX = canvas.width / 2;
            firemanY = canvas.height / 2;
            fireX = Math.random() * canvas.width;
            fireY = Math.random() * canvas.height;
            score = 0;
            gameStarted = false;
            canvas.addEventListener("click", handleClick);
            draw();
        }

// Mouse click event handler
        function handleClick(e) {
            if (!gameStarted) {
                gameStarted = true;
                update();
            } else {
                const rect = canvas.getBoundingClientRect();
                const clickX = e.clientX - rect.left;
                const clickY = e.clientY - rect.top;
                if (clickX > fireX && clickX < fireX + 50 && clickY > fireY && clickY < fireY + 50) {
                    score++;
                    fireX = Math.random() * canvas.width;
                    fireY = Math.random() * canvas.height;
                }
            }
        }

// Game update function
        function update() {
            fireX += Math.random() * 10 - 5;
            fireY += Math.random() * 10 - 5;

if (fireX < 0 || fireX > canvas.width || fireY < 0 || fireY > canvas.height){
                fireX = Math.random() * canvas.width;
                fireY = Math.random() * canvas.height;
            }

draw();

if (gameStarted) {
                requestAnimationFrame(update);
            }
        }

// Drawing function
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(fireIcon, fireX, fireY, 50, 50);
            ctx.drawImage(firemanIcon, firemanX, firemanY, 50, 50);
            ctx.font = "20px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 10, 30);

if (!gameStarted) {
                ctx.font = "30px Arial";
                ctx.fillText("Click to Start", canvas.width/2 - 100, canvas.height/2)
            }
        }

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

Please note that you need to replace `"fireman.png"` and `"fire.png"` with actual image files for the fireman and fire icons respectively.