Beautiful Fireworks When you tap the screen, fireworks drawn by JavaScript are shot up at the position where you tap. Each particle is made up of very small particles (1px unit). Also, many particles are used for one firework. The color is random, and the color changes depending on the fireworks. However, the color of each firework itself is the same.'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
Beautiful Fireworks When you tap the screen, fireworks drawn by JavaScript are shot up at the position where you tap. Each particle is made up of very small particles (1px unit). Also, many particles are used for one firework. The color is random, and the color changes depending on the fireworks. However, the color of each firework itself is the same.'s game | AI game creator

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

No:6198

11326

←

Prev Next

→

Beautiful Fireworks When you tap the screen, firew..ALL
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 2.79KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Beautiful Fireworks</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

canvas {
            display: block;
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        window.onload = function() {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');

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

canvas.addEventListener('click', createFirework);

var particles = [];

function createFirework(e) {
                var mouseX = e.clientX;
                var mouseY = e.clientY;

var numberOfParticles = Math.floor(Math.random() * 100) + 100;

for (var i = 0; i < numberOfParticles; i++) {
                    var angle = Math.random() * Math.PI * 2;

var speed = Math.random() * 5 + 1;

var xVelocity = Math.cos(angle) * speed;
                    var yVelocity = Math.sin(angle) * speed;

var hue = Math.floor(Math.random() * 360);

particles.push(new Particle(mouseX, mouseY, xVelocity, yVelocity, hue));
                }
            }

function Particle(x, y, xVelocity, yVelocity, hue) {
                this.x = x;
                this.y = y;
                this.xVelocity = xVelocity;
                this.yVelocity = yVelocity;
                this.hue = hue;
                this.opacity = 1;
                this.gravity = 0.1;

this.update = function() {
                    this.x += this.xVelocity;
                    this.y += this.yVelocity + this.gravity;
                    this.opacity -= 0.01;

if (this.opacity <= 0) {
                        particles.splice(particles.indexOf(this), 1);
                    }
                };

this.draw = function() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, 1, 0, Math.PI * 2);
                    ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, ' + this.opacity + ')';
                    ctx.fill();
                };
            }

function animate() {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

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

requestAnimationFrame(animate);
            }

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