Here's an example HTML game that uses the Mazebot API. that renders a random maze and allows the player to navigate around it to find the solution.
Check out the live demo or clone this repository to your computer and open index.html in your browser to play locally.
This game is written without libraries and no build tools -- just JavaScript, HTML, and CSS. If you want to change it, just edit the files and refresh your browser.
It uses the HTML canvas API to render the game.
Use the arrow keys, mouse or touch to navigate the maze. Plus key (+) or double-click/tap to zoom in/out.
-
Change the difficulty: Right now, the size of the maze can be controlled by setting the
minWidthandmaxWidthquery parameters, which are passed along to the Mazebot API. You could make the difficulty increase as the game progresses, or let the player select their difficulty when the game starts. -
Change the graphics: Check out the display rendering code to get some ideas. You could start by changing the colors... or maybe you'd like a different avatar -- try making a vehicle that drives or a creature that walks! You could change the map: try replacing the graphics with a tileset. You could even completely replace the renderer with your own 3D or isometeric renderer!
-
Add a solver: Perhaps you'd like to add a solver to the game that can be triggered somehow by the player.
-
Add a soundtrack: Add some sound effects using the WebAudio API, or background music while you play.
-
Add enemies: Make the maze harder by adding enemies that chase the player around the maze.
-
Add different controls: You could add support for vim keys to the keyboard handler, or try to add tilt controls for players on mobile devices.
-
Animate avatar movement: The avatar moves instantly, and can move as fast as the player can move their mouse or finger. You could try to animate the movement in the game loop to make the game smoother.
Mazebot looks forward to seeing what you can do!