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

No:5837

1671

←

Prev Next

→

Extensive field generator
Developer User3840｜Date and time 23/6/30 21:56:35
Build time 37.412 sec｜Game capacity 3.948KB｜

Script

了解しました。以下に、広大なフィールドを生成し、スマートフォンで遊べるゲームの実装例を示します。このゲームでは、絵文字を使用してフィールドの表示を行います。

広大なフィールドゲーム

このゲームは、広大なフィールドが表示され、フィールド上をスマートフォンの方向キーで移動することができます。フィールド上のプレイヤーは絵文字で表されています。フィールドのサイズは`width`と`height`で設定できます。実行すると、ゲームが開始され、プレイヤーを操作してフィールド上を移動することができます。

←

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 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>広大なフィールドゲーム</h1>
    <div id="field"></div>
    <script>
        // フィールドのサイズ
        const width = 10;
        const height = 10;

// フィールドの生成
        let field = [];
        for (let i = 0; i < height; i++) {
            field.push([]);
            for (let j = 0; j < width; j++) {
                field[i].push('🌱');
            }
        }

// プレイヤーの位置
        let playerX = Math.floor(width / 2);
        let playerY = Math.floor(height / 2);
        field[playerY][playerX] = '😄';

// フィールドの表示
        let fieldElement = document.getElementById('field');
        for (let i = 0; i < height; i++) {
            let row = document.createElement('div');
            for (let j = 0; j < width; j++) {
                let cell = document.createElement('span');
                cell.textContent = field[i][j];
                row.appendChild(cell);
            }
            fieldElement.appendChild(row);
        }

// ゲームループ
        function gameLoop() {
            // 一時停止
            setTimeout(function () {
                // 移動処理
                handleInput();
                // フィールドの更新
                updateField();
                // 表示の更新
                renderField();
                // ゲームループの再起呼び出し
                gameLoop();
            }, 500);
        }
        
        // 入力処理
        function handleInput() {
            document.addEventListener('keydown', function (event) {
                switch (event.key) {
                    case 'ArrowUp':
                        playerY = Math.max(0, playerY - 1);
                        break;
                    case 'ArrowDown':
                        playerY = Math.min(height - 1, playerY + 1);
                        break;
                    case 'ArrowLeft':
                        playerX = Math.max(0, playerX - 1);
                        break;
                    case 'ArrowRight':
                        playerX = Math.min(width - 1, playerX + 1);
                        break;
                }
            });
        }

// フィールドの更新
        function updateField() {
            for (let i = 0; i < height; i++) {
                for (let j = 0; j < width; j++) {
                    if (i === playerY && j === playerX) {
                        field[i][j] = '😄';
                    } else {
                        field[i][j] = '🌱';
                    }
                }
            }
        }

// 表示の更新
        function renderField() {
            let rows = fieldElement.childNodes;
            for (let i = 0; i < height; i++) {
                let cells = rows[i].childNodes;
                for (let j = 0; j < width; j++) {
                    cells[j].textContent = field[i][j];
                }
            }
        }

// ゲームの開始
        gameLoop();
    </script>
</body>
</html>
```