Fireworks (real fireworks?) When you tap the screen, fireworks drawn by JavaScript are launched at the tapped position. Each particle consists of very small particles. Also, many particles are used in one firework. The color is random and changes depending on the fireworks.'s game

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

No:6011

4561

←

Prev Next

→

Fireworks (real fireworks?) When you tap the scree..ALL
Developer もちきなこ｜Date and time 23/7/1 14:01:00
Build time 20.172 sec｜Game capacity 2.963KB｜

Script

以下が、指定された要件に基づいたJavaScriptを含むHTMLファイルの例です。この例では、画面をタップすると花火が打ち上がり、ランダムな色で表示されます。

このHTMLファイルを実行すると、画面をタップするたびに花火が打ち上がることになります。一つの花火はランダムな色のパーティクルで構成されており、タップした位置に表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>打ち上げ花火</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var canvas = document.getElementById('fireworks');
            var ctx = canvas.getContext('2d');

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

function Particle(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
            }

Particle.prototype.draw = function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }

function Firework(x, y) {
                this.x = x;
                this.y = y;
                this.particles = [];

for (var i = 0; i < 50; i++) {
                    var particle = new Particle(x, y, getRandomColor());
                    this.particles.push(particle);
                }

this.move = function() {
                    this.particles.forEach(function(particle) {
                        particle.y -= Math.random() * 5;
                        particle.x += (Math.random() - 0.5) * 2;
                        particle.draw();
                    });
                }
            }

function getRandomColor() {
                var letters = '0123456789ABCDEF';
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }

function createFirework(x, y) {
                var firework = new Firework(x, y);
                setInterval(function() {
                    firework.move();
                }, 15);
            }

canvas.addEventListener('click', function(event) {
                var rect = canvas.getBoundingClientRect();
                var x = event.clientX - rect.left;
                var y = event.clientY - rect.top;
                createFirework(x, y);
            });
        });
    </script>
</body>
</html>
```