N° 07 / 08 — Game · 3D
Dédale
Memorise a maze from above, then find the exit from inside. One mistake, and it's over.
- Role
- Design and development
- Year
- 2023
- Status
- LivePersonal
- Stack
- React · TypeScript · Three.js · WebGL · Sensors (gyroscope, orientation) · Git
- Links
- Play ↗
01 / 07
The problem
Can you find your way from inside a maze you have only seen from above? The idea was to make a game out of that one question.
02 / 07
What I did
You see the maze from above, just long enough to find the path and memorise it. Then you are inside it, in 3D: the slightest mistake is fatal. You have 3 lives to finish as many as possible.
On a computer you play with the keyboard; on a phone, you move the device to look around and swipe to walk.
03 / 07
How it's built
A web game in React, TypeScript and Three.js, in the browser, using the phone's orientation sensors.
- Maze seen from above
- Memorising the path
- Three.js first person
- Phone sensors
04 / 07
Challenges
- 01
Switching viewpoint without losing the player
The same maze, seen from above then from inside, in Three.js: the switch has to be harsh for the game, but never confusing.
- 02
Playing by moving the phone
On a phone, the orientation sensors turn the camera and a swipe moves you forward: a second way to play, designed for touch.
05 / 07
Results
The game is playable online, at dedale.run.
06 / 07
What I learned
Going from the top view to first person is a harsh change of frame of reference, and that is the whole game: here 3D rendering serves a memory mechanic, not decoration.
07 / 07
Tech stack
- Front end
- ReactTypeScript
- 3D, motion and real time
- Three.jsWebGL
- Mobile
- Sensors (gyroscope, orientation)
- DevOps, cloud and testing
- Git
Next project · 08 / 08
Orapa Mine
Orapa Mine
