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

201

←

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>