Particle effect maker. Put in the text in the text box to make your particle click on the black area to try out your particle effect's game

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

No:44671

144

←

Prev Next

→

Particle effect maker. Put in the text in the text..ALL
Developer User17401｜Date and time 24/2/18 23:59:11
Build time 8.084 sec｜Game capacity 2.058KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Particle Effect Maker</title>
    <style>
        #canvas {
            width: 100%;
            height: 80vh;
            background: black;
        }
    </style>
</head>
<body>
    <input type="text" id="textInput" placeholder="Enter text here">
    <canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight * 0.8;

let particles = [];

function Particle(x, y) {
            this.x = x;
            this.y = y;
            this.size = Math.random() * 10 + 2;
            this.speedX = Math.random() * 3 - 1.5;
            this.speedY = Math.random() * 3 - 1.5;
        }

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

function createParticles(x, y) {
            for (let i = 0; i < 10; i++) {
                particles.push(new Particle(x, y));
            }
        }

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

particles.forEach((particle, index) => {
                particle.update();
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                ctx.fill();

if (particle.size <= 0) {
                    particles.splice(index, 1);
                }
            });

requestAnimationFrame(animate);
        }

canvas.addEventListener('click', (event) => {
            createParticles(event.x, event.y);
        });

document.getElementById('textInput').addEventListener('input', (event) => {
            ctx.font = '30px Arial';
            ctx.fillStyle = 'white';
            ctx.fillText(event.target.value, 10, 50);
        });

animate();
    </script>
</body>
</html>