Fireworks A game in which you only watch fireworks that are launched automatically. Fireworks are drawn by JavaScript.'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 A game in which you only watch fireworks that are launched automatically. Fireworks are drawn by JavaScript.'s game | AI game creator

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

No:7678

8863

←

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]現在の人気グッズランキング

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要素の幅と高さをウィンドウのサイズに合わせて設定しています。