AI game creator

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

No:36721

←

Prev Next

→

パーティクル
Developer User16795｜Date and time 24/1/18 9:24:40
Build time 12.754 sec｜Game capacity 3.185KB｜

Script

了解しました。以下に、パーティクルの移動するシンプルなゲームの実装例を示します。スマートフォンでプレイ可能です。

このゲームでは、画面内にランダムな位置と速度でパーティクル（赤い円）が生成され、移動します。画面の端にパーティクルが接触すると、反射します。定期的に新しいパーティクルが生成されるため、画面上には複数のパーティクルが存在します。スクリプトの部分は`
`タグで囲まれており、JavaScriptでゲームのロジックを実装しています。Canvas要素を使用して描画を行っています。スマートフォンでプレイする場合は、ブラウザでHTMLファイルを開くだけで遊ぶことができます。スワイプなどの操作を使って遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、パーティクルの移動するシンプルなゲームの実装例を示します。スマートフォンでプレイ可能です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>パーティクルゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

const WIDTH = window.innerWidth;
        const HEIGHT = window.innerHeight;

canvas.width = WIDTH;
        canvas.height = HEIGHT;

const particles = [];

// パーティクルのクラス
        class Particle {
            constructor(x, y, size, speedX, speedY) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.speedX = speedX;
                this.speedY = speedY;
            }

update() {
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.x < 0 || this.x > WIDTH) {
                    this.speedX *= -1;
                }
                if (this.y < 0 || this.y > HEIGHT) {
                    this.speedY *= -1;
                }
                this.draw();
            }

draw() {
                context.beginPath();
                context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                context.fillStyle = 'red';
                context.fill();
                context.closePath();
            }
        }

// 新しいパーティクルを生成する関数
        function createParticle() {
            const x = Math.random() * WIDTH;
            const y = Math.random() * HEIGHT;
            const size = Math.random() * 10 + 5;
            const speedX = (Math.random() - 0.5) * 3;
            const speedY = (Math.random() - 0.5) * 3;
            const particle = new Particle(x, y, size, speedX, speedY);
            particles.push(particle);
        }

function updateParticles() {
            context.clearRect(0, 0, WIDTH, HEIGHT);
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
            }
        }

setInterval(createParticle, 500);
        setInterval(updateParticles, 30);
    </script>
</body>
</html>
```

このゲームでは、画面内にランダムな位置と速度でパーティクル（赤い円）が生成され、移動します。画面の端にパーティクルが接触すると、反射します。定期的に新しいパーティクルが生成されるため、画面上には複数のパーティクルが存在します。

スクリプトの部分は`<script>`タグで囲まれており、JavaScriptでゲームのロジックを実装しています。Canvas要素を使用して描画を行っています。

スマートフォンでプレイする場合は、ブラウザでHTMLファイルを開くだけで遊ぶことができます。スワイプなどの操作を使って遊ぶことができます。