Randomly generated maze rooms's game

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

No:51426

113

←

Prev Next

→

Randomly generated maze rooms
Developer User21066｜Date and time 24/3/12 2:27:27
Build time 10.768 sec｜Game capacity 3.176KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Random Maze Game</title>
    <style>
        #maze {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 5px;
            max-width: 300px;
            margin: 0 auto;
        }

.room {
            width: 100%;
            height: 100px;
            background-color: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }

.current-room {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="maze"></div>

let currentRoom = 0;
        let rooms = Array.from({ length: 9 }, (_, i) => i);

function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

function generateMaze() {
            shuffle(rooms).forEach((room, index) => {
                const roomElement = document.createElement('div');
                roomElement.classList.add('room');
                roomElement.textContent = index;
                maze.appendChild(roomElement);
            });
        }

updateRooms();
        }

function updateRooms() {
            const allRooms = document.querySelectorAll('.room');
            allRooms.forEach(room => room.classList.remove('current-room'));
            allRooms[currentRoom].classList.add('current-room');
        }

generateMaze();
        updateRooms();

document.addEventListener('keydown', event => {
            switch (event.key) {
                case 'ArrowUp':
                    move('up');
                    break;
                case 'ArrowDown':
                    move('down');
                    break;
                case 'ArrowLeft':
                    move('left');
                    break;
                case 'ArrowRight':
                    move('right');
                    break;
                default:
                    break;
            }
        });
    </script>
</body>
</html>
```