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

No:5172

953

←

Prev Next

→

Move the atmosphere. Clear the clouds.
Developer User3589｜Date and time 23/6/29 20:00:29
Build time 34.266 sec｜Game capacity 3.401KB｜

Script

ご要望いただいたゲームは、「大気を動かす。雲を晴らす。」というもので、スマートフォンで操作できるように実装します。今回は部分的にゲーム化します。以下が実際のプログラムです。このコードをHTMLファイルに貼り付けてください。

大気を動かす。雲を晴らす。

このプログラムでは、スマートフォンの傾きに応じて大気の位置が変わり、雲が大気に接近すると雲を晴らすことができます。雲を晴らすと、新しい場所に別の雲が表示されます。大気は絵文字の「☁️」、雲は絵文字の「🌞」で描画されます。以上が「大気を動かす。雲を晴らす。」というゲームの実装です。スマートフォンで実行して、お楽しみください！

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

ご要望いただいたゲームは、「大気を動かす。雲を晴らす。」というもので、スマートフォンで操作できるように実装します。今回は部分的にゲーム化します。

以下が実際のプログラムです。このコードをHTMLファイルに貼り付けてください。

```html
<!DOCTYPE html>
<html>
<head>
    <title>大気を動かす。雲を晴らす。</title>
</head>
<body>
    <h1>大気を動かす。雲を晴らす。</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // ゲームの初期化
        function initGame() {
            // キャンバスの取得と設定
            const canvas = document.getElementById("gameCanvas");
            const ctx = canvas.getContext("2d");

// 大気の初期位置を設定
            let atmosphereX = 200;
            let atmosphereY = 200;

// 雲の初期位置を設定
            let cloudX = 100;
            let cloudY = 100;

// ゲームループ
            function gameLoop() {
                // ゲームの状態を更新
                updateGame();

// ゲームの状態を描画
                drawGame();

// 次のフレームを要求
                requestAnimationFrame(gameLoop);
            }

// ゲームの状態を更新
            function updateGame() {
                // 大気の移動速度
                const atmosphereSpeed = 2;

// スマートフォンの傾きを検知し、大気の位置を更新
                window.addEventListener("deviceorientation", event => {
                    atmosphereX += event.gamma / 10;
                    atmosphereY += event.beta / 10;
                });

// 雲の位置を更新
                cloudX += 1;
                cloudY += 1;

// 大気と雲の衝突判定
                if (Math.abs(atmosphereX - cloudX) < 20 && Math.abs(atmosphereY - cloudY) < 20) {
                    alert("雲を晴らしました！");
                    cloudX = Math.random() * canvas.width;
                    cloudY = Math.random() * canvas.height;
                }
            }

// ゲームの状態を描画
            function drawGame() {
                // キャンバスをクリア
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// 大気を描画
                ctx.font = "48px Arial";
                ctx.fillText("☁️", atmosphereX, atmosphereY);

// 雲を描画
                ctx.font = "48px Arial";
                ctx.fillText("🌞", cloudX, cloudY);
            }

// ゲームのループを開始
            gameLoop();
        }

// ゲームの初期化を行う
        initGame();
    </script>
</body>
</html>
```

このプログラムでは、スマートフォンの傾きに応じて大気の位置が変わり、雲が大気に接近すると雲を晴らすことができます。雲を晴らすと、新しい場所に別の雲が表示されます。大気は絵文字の「☁️」、雲は絵文字の「🌞」で描画されます。

以上が「大気を動かす。雲を晴らす。」というゲームの実装です。スマートフォンで実行して、お楽しみください！