Line Fragrance and Flower Fire's game

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

No:5131

4522

←

Prev Next

→

Line Fragrance and Flower Fire
Developer User3812｜Date and time 23/6/29 19:13:04
Build time 36.083 sec｜Game capacity 4.194KB｜

Script

了解しました。以下に、スマートフォンでプレイできるシンプルなゲームの例を示します。このゲームは、プレイヤーが画面をタップすることで花火が打ち上がるというものです。

上記のコードは、線香花火のゲームを1枚のHTMLファイルに実装したものです。スマートフォンの画面をタップすることで花火が打ち上がり、爆発する様子が表示されます。花火は重力の影響を受けてパーティクルとなり、画面上を移動します。

←

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>
        body {
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            padding: 0;
            margin: 0;
        }
        
        canvas {
            border: 1px solid #fff;background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

let fireworks = [];

// 花火のクラス
        class Firework {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.dy = -5;
                this.exploded = false;
                this.particles = [];

// パーティクルの初期設定
                for(let i = 0; i < 30; i++) {
                    let particle = {
                        x: this.x,
                        y: this.y,
                        color: "#" + Math.floor(Math.random()*16777215).toString(16),
                        radius: Math.random() * 10 + 1,
                        dx: Math.random() * 6 - 3,
                        dy: Math.random() * 6 - 3
                    };
                    this.particles.push(particle);
                }
            }

// 花火の描画
            draw() {
                for(let i = 0; i < this.particles.length; i++) {
                    let p = this.particles[i];
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                    ctx.fillStyle = p.color;
                    ctx.fill();
                    ctx.closePath();
                }
            }

// 花火のアニメーション
            update() {
                if(!this.exploded) {
                    this.y += this.dy;
                    if(this.y <= 0) {
                        this.explode();
                    }
                }
                else {
                    for(let i = 0; i < this.particles.length; i++) {
                        let p = this.particles[i];
                        p.x += p.dx;
                        p.y += p.dy;
                        p.dy += 0.1; // 重力
                    }
                }
            }

// 花火の爆発
            explode() {
                this.exploded = true;
            }
        }

// ゲームのメインループ
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

for(let i = 0; i < fireworks.length; i++) {
                fireworks[i].draw();
                fireworks[i].update();
                if(fireworks[i].exploded && fireworks[i].particles.length === 0) {
                    fireworks.splice(i, 1);
                }
            }

requestAnimationFrame(gameLoop);
        }

// タップ時の処理
        canvas.addEventListener("touchstart", function(event) {
            let rect = canvas.getBoundingClientRect();
            let x = event.touches[0].clientX - rect.left;
            let y = event.touches[0].clientY - rect.top;
            fireworks.push(new Firework(x, y));
        });

requestAnimationFrame(gameLoop);
    </script>
</body>
</html>
```