AI game creator

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

No:40676

←

Prev Next

→

パーティクル
Developer User18220｜Date and time 24/2/3 22:26:39
Build time 9.81 sec｜Game capacity 2.457KB｜

Script

以下に参考のため、1枚のhtmlファイルで実装されたパーティクルのゲームのサンプルコードを示します。このコードは、スマホでの操作を想定しており、絵文字を使用しています。

このコードでは、指定された数（`particleCount`）のパーティクルがランダムに生成され、指定した色（`colors`）の絵文字が表示されます。パーティクルはランダムに上に移動し、画面の外に出た場合は再度ランダムな位置に戻ります。 `moveParticles` 関数が呼び出され、パーティクルの移動が開始されます。

←

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>
    #container {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    #particle {
        position: absolute;
        display: inline-block;
        width: 30px;
        height: 30px;
        font-size: 25px;
    }
</style>
</head>
<body>
<div id="container"></div>
<script>
    // パーティクルの数
    var particleCount = 100;

// パーティクルの色
    var colors = ["🔴", "🔵", "🟢", "🟡"];

// パーティクルを生成
    for (var i = 0; i < particleCount; i++) {
        var particle = document.createElement("span");
        particle.id = "particle" + i;
        particle.innerHTML = colors[Math.floor(Math.random() * colors.length)];
        particle.style.top = Math.random() * 100 + "vh";
        particle.style.left = Math.random() * 100 + "vw";
        document.getElementById("container").appendChild(particle);
    }

// パーティクルの移動
    function moveParticles() {
        var particles = document.querySelectorAll("#container span");
        for (var i = 0; i < particles.length; i++) {
            var particle = particles[i];
            particle.style.top = parseInt(particle.style.top) + Math.random() * 10 + "vh";
            particle.style.left = parseInt(particle.style.left) + Math.random() * 10 - 5 + "vw";
            if (parseInt(particle.style.top) > window.innerHeight) {
                particle.style.top = -30 + "px";
                particle.style.left = Math.random() * 100 + "vw";
            }
        }
        requestAnimationFrame(moveParticles);
    }

// パーティクルの移動を開始
    moveParticles();
</script>
</body>
</html>
```