AI game creator

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

No:25757

←

Prev Next

→

particle
Developer User12657｜Date and time 23/11/24 12:19:35
Build time 60.618 sec｜Game capacity 2.141KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Particle Game</title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>

const pictograms = [
        "🌟", // Star
        "⚡️", // Thunderbolt
        "🔥", // Fire
        "💧", // Water
        "🌺", // Flower
    ];

// Game logic implementation

const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

const width = window.innerWidth;
    const height = window.innerHeight;

canvas.width = width;
    canvas.height = height;
    document.body.appendChild(canvas);

let particles = [];

class Particle {
        constructor(x, y, speedX, speedY, size, pictogram) {
            this.x = x;
            this.y = y;
            this.speedX = speedX;
            this.speedY = speedY;
            this.size = size;
            this.pictogram = pictogram;
        }

draw() {
            ctx.font = `${this.size}px Arial`;
            ctx.fillText(this.pictogram, this.x, this.y);
        }

update() {
            this.x += this.speedX;
            this.y += this.speedY;
            this.size -= 0.1;
        }
    }

function spawnParticle() {
        const x = Math.random() * width;
        const y = Math.random() * height;
        const speedX = (Math.random() - 0.5) * 4;
        const speedY = (Math.random() - 0.5) * 4;
        const size = Math.random() * 40 + 10;
        const pictogram = pictograms[Math.floor(Math.random() * pictograms.length)];

particles.push(new Particle(x, y, speedX, speedY, size, pictogram));
    }

function animate() {
        ctx.clearRect(0, 0, width, height);

for (let i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();

if (particles[i].size <= 0) {
                particles.splice(i, 1);
                i--;
            }
        }

requestAnimationFrame(animate);
    }

setInterval(spawnParticle, 100);
    animate();

</script>

</body>
</html>