Welcome to the Maze Online Game! This simple web-based game challenges you to navigate through mazes, avoid obstacles, and reach the goal. The game is built using HTML, CSS, and JavaScript. Play this game here 👈
- Objective: Reach the goal represented by the 🎁 emoji while avoiding obstacles (🌳) and staying within the maze boundaries.
- Controls:
- On desktop, use the arrow keys to move the player (🏃♂️).
- On mobile, touch the directional buttons to navigate.
- Lives: You start with 3 lives (❤️). Colliding with obstacles (🌳) reduces your lives. If you run out of lives, you lose.
- Winning: Complete all levels to win the game! Your time is recorded, and you can compete to achieve the best time.
The game includes multiple levels, each represented by a unique maze. As you progress, the mazes become more challenging.
- Rules Modal: Explains the game rules and controls. Press "ENTER" or touch the screen to start the game.
- Win Modal: Displays when you successfully complete all levels. Shows your score and best time.
- Lose Modal: Appears when you run out of lives. Displays the level reached and encourages you to try again.
- game.js: The main JavaScript file containing the game logic.
- index.html: The HTML file with the game layout and modals.
- maps.js: Defines different maze levels using a 10x10 grid.
- styles.css: The stylesheet for styling the game interface.
- Clone or download the project files.
- Open the
index.html
file in a web browser. - Create new mazes in
maps.js
.
- Google Fonts (Press Start 2P): Used for the retro gaming font.
- SVG Icons: Arrow icons for directional buttons.
Enjoy playing the Maze Online Game! If you encounter any issues or have suggestions for improvement, feel free to contribute or provide feedback.