Playing card game! Choose a card from your favorite options!'s game

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

No:3902

1020

←

Prev Next

→

Playing card game! Choose a card from your favorit..ALL
Developer User3589｜Date and time 23/6/26 22:42:44
Build time 4.748 sec｜Game capacity 0.309KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

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

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

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>了解しました。以下に、打ち上げ花火を自動で表示するゲームのプログラムを示します。

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