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

No:23830

←

Prev Next

→

ボタンを押すと花火が上がるゲーム
Developer User11163｜Date and time 23/11/3 22:28:22
Build time 60.649 sec｜Game capacity 2.294KB｜

Script

花火ゲーム

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花火ゲーム</title>
    <style>
        body {
            text-align: center;
        }
        
        #canvas {
            width: 300px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>花火ゲーム</h1>
    <button onclick="launchFirework()">花火を打ち上げる</button>
    <div id="canvas"></div>

var firework = {
                x: Math.random() * canvas.width,
                y: canvas.height,
                size: 5,
                speed: 2,
                brightness: Math.random() * 75 + 50,
                angle: Math.random() * Math.PI,
                rotation: Math.random() * Math.PI / 50,
                colors: [
                    '#ff3333', // 赤
                    '#ff9933', // オレンジ
                    '#ffff33', // 黄
                    '#33ff33', // 緑
                    '#3333ff', // 青
                    '#9933ff' // 紫
                ]
            };

function updateFirework() {
                firework.x += Math.cos(firework.angle) * firework.speed;
                firework.y -= Math.sin(firework.angle) * firework.speed;
                firework.angle += firework.rotation;
            }

function drawFirework() {
                context.beginPath();
                context.arc(firework.x, firework.y, firework.size, 0, 2 * Math.PI);
                context.fillStyle = firework.colors[Math.floor(Math.random() * firework.colors.length)];
                context.fill();
            }

function animateFirework() {
                updateFirework();
                drawFirework();

if (firework.y <= 0) {
                    clearInterval(animation);
                }
            }

var animation = setInterval(animateFirework, 10);
        }
    </script>
</body>
</html>