AI game creator

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

No:8046

1322

←

Prev Next

→

one-stroke maze
Developer User3252｜Date and time 23/7/12 11:40:22
Build time 25.532 sec｜Game capacity 4.537KB｜

Script

了解です。以下に、一筆書き迷路として遊べるHTMLファイルのプログラムを示します。この迷路では、プレイヤーはスマホで操作し、絵文字を使って迷路をクリアすることが目標です。

このプログラムでは、10x10の迷路が表示されます。スタート位置は緑色の絵文字で表され、ゴール位置は赤色の絵文字で表されます。プレイヤーは黄色の絵文字で表され、スマホの矢印キーを使用して移動させることができます。プレイヤーがゴール位置に到達すると、「クリアしました！」とアラートが表示されます。

←

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>
        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .maze {
            display: flex;
            flex-wrap: wrap;
            width: 90vw;
            height: 90vw;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
        .maze div {
            width: calc(100% / 10);
            height: calc(100% / 10);
            border: 1px solid #ccc;
        }
        .emoji-start {
            background-color: #8be086;
        }
        .emoji-end {
            background-color: #ff8e8e;
        }
        .emoji-player {
            background-color: #ffc107;
        }
    </style>
</head>
<body>
    <div class="maze"></div>

const mazeContainer = document.querySelector('.maze');
        let playerPosition = { x: 0, y: 0 };

createMaze();

function updatePlayerPosition() {
            const player = document.querySelector('.emoji-player');
            player.style.top = playerPosition.x * (100 / 10) + '%';
            player.style.left = playerPosition.y * (100 / 10) + '%';
        }

function checkGameStatus() {
            if (maze[playerPosition.x][playerPosition.y] === 1) {
                alert("クリアしました！");
            }
        }

document.addEventListener('keydown', movePlayer);
    </script>
</body>
</html>
```