AI game creator

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

No:26913

←

Prev Next

→

Maze games.io
Developer Rowdagriff｜Date and time 23/12/3 7:36:58
Build time 95.128 sec｜Game capacity 4.054KB｜

Script

Sure! Here is a sample HTML file implementing a simple maze game using JavaScript:

In this maze game, the player can use the arrow keys on a smartphone to navigate through the maze. The maze is represented as a grid, with walls (1's), empty cells (0's), a starting position (s), and an end position (e). The player's position is represented by a different colored cell. When the player reaches the end position, an alert is displayed to congratulate them. Please note that this is a simplified example and can be further enhanced with additional features if desired.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here is a sample HTML file implementing a simple maze game using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Maze Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        
        #maze-container {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
            background-color: #eee;
        }

.maze-cell {
            width: 40px;
            height: 40px;
            float: left;
            border: 1px solid white;
        }

.start-cell {
            background-color: #27ae60;
        }

.end-cell {
            background-color: #e74c3c;
        }

.player-cell {
            background-color: #3498db;
        }
    </style>
</head>
<body>
    <div id="maze-container"></div>

// Player position
        let playerX = 1;
        let playerY = 1;

// Render the maze on the screen
        function renderMaze() {
            const container = document.getElementById('maze-container');
            container.innerHTML = '';

for (let y = 0; y < maze.length; y++) {
                for (let x = 0; x < maze[y].length; x++) {
                    const cell = document.createElement('div');
                    cell.classList.add('maze-cell');

if (maze[y][x] === 0) {
                        cell.classList.add('empty-cell');
                    } else if (maze[y][x] === 1) {
                        cell.classList.add('wall-cell');
                    } else if (maze[y][x] === 's') {
                        cell.classList.add('start-cell');
                    } else if (maze[y][x] === 'e') {
                        cell.classList.add('end-cell');
                    }

if (playerX === x && playerY === y) {
                        cell.classList.add('player-cell');
                    }

container.appendChild(cell);
                }
            }
        }

// Move the player
        function movePlayer(dx, dy) {
            const newX = playerX + dx;
            const newY = playerY + dy;

if (maze[newY][newX] !== 1) {
                playerX = newX;
                playerY = newY;
                renderMaze();

if (maze[newY][newX] === 'e') {
                    alert('Congratulations! You reached the end.');
                }
            }
        }

// Keyboard event listener
        document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowUp') {
                movePlayer(0, -1);
            } else if (event.key === 'ArrowDown') {
                movePlayer(0, 1);
            } else if (event.key === 'ArrowLeft') {
                movePlayer(-1, 0);
            } else if (event.key === 'ArrowRight') {
                movePlayer(1, 0);
            }
        });

// Render initial maze
        renderMaze();
    </script>
</body>
</html>
```

When the player reaches the end position, an alert is displayed to congratulate them.

Please note that this is a simplified example and can be further enhanced with additional features if desired.