Fireworks A game in which you only watch fireworks that are launched automatically. Fireworks are drawn by JavaScript.'s game

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

No:7678

8499

←

Prev Next

→

Fireworks A game in which you only watch fireworks..ALL
Developer もちきなこ｜Date and time 23/7/9 12:00:59
Build time 11.276 sec｜Game capacity 3.018KB｜

Script

了解しました。以下に、打ち上げ花火を自動で表示するゲームのプログラムを示します。

このプログラムでは、自動で花火が打ち上がり、画面上に表示されます。花火はランダムな位置から打ち上げられ、上に向かって上昇し、爆発して円形の花火が広がります。花火の色やサイズはランダムに変化し、状態が変化していく様子が観察できます。なお、このプログラムはHTMLのcanvas要素を使用しています。JavaScriptで生成した花火オブジェクトをcanvas上に描画し、アニメーションさせることで、打ち上げ花火を表現しています。スマホでも正しく表示されるように、canvas要素の幅と高さをウィンドウのサイズに合わせて設定しています。

←

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%;
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// 花火オブジェクト
        function Firework() {
            this.x = Math.random() * canvas.width;
            this.y = canvas.height;
            this.velocityX = (Math.random() - 0.5) * 5;
            this.velocityY = Math.random() * -15 - 10;
            this.color = "#" + Math.floor(Math.random() * 16777215).toString(16);
            this.radius = Math.random() * 5 + 2;
            this.gravity = 0.2;
            this.opacity = 1;
            this.life = Math.random() * 80 + 80;
        }

Firework.prototype.update = function() {
            this.velocityY += this.gravity;
            this.x += this.velocityX;
            this.y += this.velocityY;
            this.opacity -= 0.01;
            this.life--;

if (this.life <= 0) {
                fireworks.splice(fireworks.indexOf(this), 1);
            }
        }

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

function generateFirework() {
            fireworks.push(new Firework());
        }

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

generateFirework();

for (var i = 0; i < fireworks.length; i++) {
                fireworks[i].update();
                fireworks[i].draw();
            }

requestAnimationFrame(update);
        }

update();
    </script>
</body>
</html>
```

このプログラムでは、自動で花火が打ち上がり、画面上に表示されます。花火はランダムな位置から打ち上げられ、上に向かって上昇し、爆発して円形の花火が広がります。花火の色やサイズはランダムに変化し、状態が変化していく様子が観察できます。

なお、このプログラムはHTMLのcanvas要素を使用しています。JavaScriptで生成した花火オブジェクトをcanvas上に描画し、アニメーションさせることで、打ち上げ花火を表現しています。スマホでも正しく表示されるように、canvas要素の幅と高さをウィンドウのサイズに合わせて設定しています。