迷路's game | AI game creator

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

No:31228

59

迷路
Developer User14987｜Date and time 23/12/25 16:53:04
Build time 52.917 sec｜Game capacity 5.212KB｜

以下は、HTMLとJavaScriptを使用して実装された、迷路ゲームのサンプルコードです。このコードは1枚のHTMLファイルとして実装されており、スマートフォンで遊ぶことを前提としています。コード内では、絵文字を使用して迷路の壁やキャラクターを表現しています。

このコードでは、5x5の迷路が表示されます。プレイヤーは黄色の背景で表され、ゴールは緑色の背景で表示されます。プレイヤーは矢印キーを使用して移動できます。ゴールに到達すると、「ゲームクリア！」というメッセージが表示されます。注意：このサンプルコードは、基本的なゲームの動作原理を示すものであり、完全なゲームとしては機能しません。実際のゲームを作成する場合は、さまざまな要素（迷路のデザインやレベルの作成、プレイヤーのアニメーションなど）を追加する必要があります。

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

以下は、HTMLとJavaScriptを使用して実装された、迷路ゲームのサンプルコードです。このコードは1枚のHTMLファイルとして実装されており、スマートフォンで遊ぶことを前提としています。コード内では、絵文字を使用して迷路の壁やキャラクターを表現しています。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>迷路ゲーム</title>
    <style>
        .maze {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-auto-rows: minmax(50px, auto);
        }

.cell {
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }

.wall {
            background-color: black;
        }

.player {
            background-color: yellow;
        }

.goal {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="maze"></div>

<script>
        // 迷路のマップデータ
        const mazeData = [
            [1, 0, 1, 1, 1],
            [1, 0, 0, 0, 1],
            [1, 1, 1, 0, 1],
            [1, 0, 0, 0, 0],
            [1, 1, 1, 1, 1]
        ];

const mazeElement = document.querySelector('.maze');
        const tileSize = 50; // 1マスのサイズ

// プレイヤーの初期位置
        let playerX = 0;
        let playerY = 0;

// ゴールの位置
        const goalX = mazeData[0].length - 1;
        const goalY = mazeData.length - 1;

// ゲームの初期化
        function initGame() {
            // 迷路を描画
            for (let y = 0; y < mazeData.length; y++) {
                for (let x = 0; x < mazeData[y].length; x++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    if (mazeData[y][x] === 1) {
                        cell.classList.add('wall');
                    }
                    if (x === playerX && y === playerY) {
                        cell.classList.add('player');
                    }
                    if (x === goalX && y === goalY) {
                        cell.classList.add('goal');
                    }
                    mazeElement.appendChild(cell);
                }
            }

// キーボードイベントの処理を追加
            document.addEventListener('keydown', handleKeyPress);
        }

// キーボード入力の処理
        function handleKeyPress(event) {
            let newX = playerX;
            let newY = playerY;

// キー押下による座標の更新
            switch (event.key) {
                case 'ArrowUp':
                    newY--;
                    break;
                case 'ArrowDown':
                    newY++;
                    break;
                case 'ArrowLeft':
                    newX--;
                    break;
                case 'ArrowRight':
                    newX++;
                    break;
            }

// 移動可能な場合はプレイヤーの座標を更新
            if (canMoveTo(newX, newY)) {
                playerX = newX;
                playerY = newY;
                updateGame();
            }

// ゴールに到達した場合はゲームクリア
            if (playerX === goalX && playerY === goalY) {
                alert('ゲームクリア！');
            }
        }

// 移動可能かどうかの判定
        function canMoveTo(x, y) {
            // 迷路の範囲を超えている場合は移動不可
            if (x < 0 || x >= mazeData[0].length || y < 0 || y >= mazeData.length) {
                return false;
            }

// 移動先が壁の場合は移動不可
            if (mazeData[y][x] === 1) {
                return false;
            }

return true;
        }

// ゲームの状態の更新
        function updateGame() {
            // プレイヤー位置の更新
            const cells = document.querySelectorAll('.cell');
            cells.forEach(cell => {
                cell.classList.remove('player');
            });
            mazeElement.children[playerY * mazeData[0].length + playerX].classList.add('player');
        }

// ゲームの初期化と開始
        initGame();
    </script>
</body>
</html>
```

このコードでは、5x5の迷路が表示されます。プレイヤーは黄色の背景で表され、ゴールは緑色の背景で表示されます。プレイヤーは矢印キーを使用して移動できます。ゴールに到達すると、「ゲームクリア！」というメッセージが表示されます。

注意：このサンプルコードは、基本的なゲームの動作原理を示すものであり、完全なゲームとしては機能しません。実際のゲームを作成する場合は、さまざまな要素（迷路のデザインやレベルの作成、プレイヤーのアニメーションなど）を追加する必要があります。