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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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 | AI game creator

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

No:44671

226

←

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>