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

No:13025

←

Prev Next

→

Maze Game
Developer User5733｜Date and time 23/8/26 9:08:44
Build time 26.246 sec｜Game capacity 4.635KB｜

Script

Sure! Here's an example of a simple maze game implemented as a single HTML file using JavaScript:

Maze Game

This is a simple maze game where the player can navigate through the maze using arrow keys on a smartphone. The maze is represented using a two-dimensional array, where `1` represents walls and `0` represents open paths. The player is represented by a smiling face (`😎`) and the goal is represented by a checkered flag (`🏁`). The player's current position and goal position are stored as objects with `x` and `y` coordinates. The player can move to neighboring cells as long as there is no wall blocking the path. When the player reaches the goal, an alert is shown congratulating the player.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's an example of a simple maze game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Maze Game</title>
    <style>
        #maze {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
        }
        .cell {
            width: 20px;
            height: 20px;
            border: 1px solid black;
            box-sizing: border-box;
            background-color: white;
        }
    </style>
</head>
<body>
    <h1>Maze Game</h1>
    <div id="maze"></div>
    
    <script>
        // Define the maze structure
        const maze = [
            [1, 1, 1, 1, 1],
            [1, 0, 0, 0, 1],
            [1, 1, 1, 0, 1],
            [1, 0, 0, 0, 1],
            [1, 1, 1, 1, 1]
        ];
        
        // Define the player's starting position and goal
        const player = {
            x: 1,
            y: 1
        };
        const goal = {
            x: 3,
            y: 3
        };
        
        // Generate the maze grid using pictograms
        const mazeElement = document.getElementById('maze');
        for (let i = 0; i < maze.length; i++) {
            for (let j = 0; j < maze[i].length; j++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                
                if (maze[i][j] === 1) {
                    cell.innerHTML = '🗺'; // Wall pictogram
                }
                
                if (player.x === j && player.y === i) {
                    cell.innerHTML = '😎'; // Player pictogram
                }
                
                if (goal.x === j && goal.y === i) {
                    cell.innerHTML = '🏁'; // Goal pictogram
                }
                
                mazeElement.appendChild(cell);
            }
        }
        
        // Handle player movement
        document.addEventListener('keydown', (event) => {
            const key = event.key;
            let newX = player.x;
            let newY = player.y;
            
            if (key === 'ArrowUp' && maze[player.y - 1][player.x] !== 1) {
                newY--;
            } else if (key === 'ArrowDown' && maze[player.y + 1][player.x] !== 1) {
                newY++;
            } else if (key === 'ArrowLeft' && maze[player.y][player.x - 1] !== 1) {
                newX--;
            } else if (key === 'ArrowRight' && maze[player.y][player.x + 1] !== 1) {
                newX++;
            }
            
            if (maze[newY][newX] !== 1) {
                maze[player.y][player.x] = 0;
                maze[newY][newX] = 2;
                
                player.x = newX;
                player.y = newY;
                
                // Update the maze grid
                mazeElement.innerHTML = '';
                for (let i = 0; i < maze.length; i++) {
                    for (let j = 0; j < maze[i].length; j++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell';
                
                        if (maze[i][j] === 1) {
                            cell.innerHTML = '🗺'; // Wall pictogram
                        }
                
                        if (player.x === j && player.y === i) {
                            cell.innerHTML = '😎'; // Player pictogram
                        }
                
                        if (goal.x === j && goal.y === i) {
                            cell.innerHTML = '🏁'; // Goal pictogram
                        }
                
                        mazeElement.appendChild(cell);
                    }
                }
                
                // Check if player reached the goal
                if (player.x === goal.x && player.y === goal.y) {
                    alert('Congratulations! You reached the goal!');
                }
            }
        });
    </script>
</body>
</html>
```