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:6010

3431

←

Prev Next

→

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

Script

以下に、指定された要件に基づいたHTMLファイルの例を示します。

このHTMLファイルは、タップするとタップした位置にランダムに色が変わる花火が打ち上がるシンプルなゲームです。各パーティクルはランダムな速度で移動し、徐々に小さくなります。また、一つの花火には100から200個のパーティクルが使われます。詳細な実装方法については十分な情報が提供されていないため、実際のプログラムとしては一例です。実際にブラウザ上で実行して動作を確認してみてください。

←

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 {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <script>
        function createFirework(x, y) {
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");

const particles = [];
            const particleCount = Math.floor(Math.random() * 100) + 100;

for (let i = 0; i < particleCount; i++) {
                particles.push({
                    x: x,
                    y: y,
                    size: Math.random() * 4 + 1,
                    speedX: Math.random() * 3 - 1.5,
                    speedY: Math.random() * 3 - 1.5,
                    color: "#" + ((1 << 24) * Math.random() | 0).toString(16)
                });
            }

function drawParticle(particle) {
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fillStyle = particle.color;
                ctx.fill();
            }

function updateParticle(particle) {
                particle.x += particle.speedX;
                particle.y += particle.speedY;
                particle.size -= 0.05;
            }

function loop() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < particles.length; i++) {
                    const particle = particles[i];
                    drawParticle(particle);
                    updateParticle(particle);

if (particle.size <= 0.15) {
                        particles.splice(i, 1);
                    }
                }

if (particles.length > 0) {
                    requestAnimationFrame(loop);
                }
            }

loop();
        }

document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.createElement("canvas");
            canvas.id = "canvas";
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            document.body.appendChild(canvas);

canvas.addEventListener("click", function(event) {
                const x = event.pageX;
                const y = event.pageY;
                createFirework(x, y);
            });
        });
    </script>
</body>
</html>

このHTMLファイルは、タップするとタップした位置にランダムに色が変わる花火が打ち上がるシンプルなゲームです。各パーティクルはランダムな速度で移動し、徐々に小さくなります。また、一つの花火には100から200個のパーティクルが使われます。

詳細な実装方法については十分な情報が提供されていないため、実際のプログラムとしては一例です。実際にブラウザ上で実行して動作を確認してみてください。