An Escape the Maze game with a cute spin, created with Three.js

This is a simple “escape the maze” game but I put a clever spin on it by wrapping the maze to a cylinder. It uses three’s instancedMesh’s to render the kernals and the cob beneath them which are all dynamically generated based on width, height and curvature parameters. I borrowed an existing maze generator originally written by chirpinternet.eu and adapted it to create “tunnels” at the top and bottom so that the user can go all the way around the cylinder. ReactJS manages the app state and I leveraged a lot of R3F to manage the scene graph and Drei for some effects. The movement system was a bit complicated (and could still use some work!) but at this point it should work fairly consistently across devices (pc, mobile, mouse, touch, etc).

Give it a try and share if you like it: https://maiz.uno
The source code is here: Dave Seidman / Maiz · GitLab

Thanks for considering this submission to the showcase!

5 Likes

It was fun playing.

I have the impression that the difficulty of the maze only affects the size.

Thanks! That’s correct, the complexity of the maze remains the same so I’m letting the difficulty affect the width of the maze while the timer remains at 60 seconds.

I’ve thought about how to increase the complexity of the maze and that might require switching algorithms or generating several mazes at once, letting the computer solve them (synchronously) to determine which has the longest (and therefore) most difficult path. If there’s more interest in this I’ll look into implementing it.

2 Likes