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

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

No:6198

7850

←

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>