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

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
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 | AI game creator

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

No:6011

6511

←

Prev Next

→

Fireworks (real fireworks?) When you tap the scree..ALL
Developer anonymous｜Date and time 70/1/1 9:49:23
Build time unknown sec｜Game capacity 2.963KB｜

Script

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

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

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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>
```