AI game creator

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

No:29561

←

Prev Next

→

パーティクル
Developer User14508｜Date and time 23/12/17 13:21:48
Build time 20.904 sec｜Game capacity 3.098KB｜

Script

了解です。以下に、スマホで遊べる簡単なパーティクルゲームのサンプルコードを記述します。

このコードでは、指定した数の白い円が画面上をランダムに移動します。パーティクルの数や色や大きさなど、表示方法をカスタマイズすることもできます。

←

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>
        #game {
            width: 100%;
            height: 100vh;
            background-color: black;
            overflow: hidden;
            position: relative;
        }
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: white;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game"></div>

// パーティクルクラス
            class Particle {
                constructor(x, y, dx, dy) {
                    this.x = x;
                    this.y = y;
                    this.dx = dx;
                    this.dy = dy;
                    this.element = document.createElement("div");
                    this.element.classList.add("particle");
                    gameDiv.appendChild(this.element);
                    this.updatePosition();
                }

updatePosition() {
                    this.x += this.dx;
                    this.y += this.dy;
                    this.element.style.transform = `translate(${this.x}px, ${this.y}px)`;
                }
            }

// 初期化処理
            function initializeParticles() {
                for (let i = 0; i < 50; i++) {
                    const x = Math.random() * window.innerWidth;
                    const y = Math.random() * window.innerHeight;
                    const dx = (Math.random() - 0.5) * 2;  // x方向の速度
                    const dy = (Math.random() - 0.5) * 2;  // y方向の速度

particles.push(new Particle(x, y, dx, dy));
                }
            }

// パーティクルの移動処理
            function moveParticles() {
                particles.forEach(function(particle) {
                    particle.updatePosition();

// 画面端で跳ね返る
                    if (particle.x <= 0 || particle.x >= window.innerWidth) {
                        particle.dx *= -1;
                    }
                    if (particle.y <= 0 || particle.y >= window.innerHeight) {
                        particle.dy *= -1;
                    }
                });
            }

// ゲームループ
            function gameLoop() {
                moveParticles();
                requestAnimationFrame(gameLoop);
            }

initializeParticles();
            gameLoop();
        });
    </script>
</body>
</html>
```