Astray WebGL Maze guide
How to play Astray WebGL Maze
Created by wwwtyro, Astray WebGL Maze is a browser-playable 3D maze project. Use this page to launch the published demo, learn its keyboard controls and understand what changes after you guide the ball through an exit. Three.js draws the scene, while Box2dWeb handles the moving ball and its contact with the maze walls.
The game asks you to read nearby passages, steer the ball through them and cross the outer opening. Momentum makes that simple objective a physics challenge. This guide explains the verified behavior without becoming a programming tutorial.
- Load the WebGL scene. Select Play Astray and wait for the project to draw the ball, walls, level label and exit inside the external frame.
- Read the visible route. It starts with the ball inside a dark 3D layout. Follow connected passages toward the opening at the outer edge.
- Move with directional keys. Use the arrow keys to apply force to the ball. H, J, K and L provide alternate directional controls for players familiar with Vim keys.
- Reach the exit. A level completes when the ball crosses the opening. The scene fades and the project generates the next, larger layout.
Astray WebGL Maze controls and ball physics
Each directional input in Astray WebGL Maze applies an impulse to the Box2dWeb ball. The source reduces existing velocity during each physics update, so movement has momentum and gradual slowing rather than an instant grid stop. Short key presses make the route easier to correct before the ball reaches a wall.
The arrow keys and H, J, K and L call the same movement handler. H moves left, J down, K up and L right. Hold I to show the built-in instructions, then release it to hide the panel.
If the keys scroll the page or do nothing, click inside the embedded player to return keyboard focus. Begin with brief taps; holding a direction too long can carry the ball past the intended turn.
What one movement input changes
The source does not move the ball directly between cells. A key handler copies a two-axis direction, and the next physics update turns it into an impulse equal to the ball's mass multiplied by 0.25. The stored axis then returns to zero. Existing velocity is multiplied by 0.95 before the Box2D world advances by a fixed 1/60 step. This is why the Astray ball accelerates, coasts and slows instead of snapping to a square.
The ball fixture has zero friction and restitution of 0.25; maze walls are static bodies. At a T-junction, release the current direction before the center, watch the remaining drift, then add a brief perpendicular input. If the ball reaches the far wall, let the small rebound settle before correcting. These source values describe the simulation settings, not a guaranteed travel time on every device.
What changes after an exit
The first level starts with an 11-cell maze dimension and creates an opening near the outer edge. At the exit, the scene fades, the dimension increases by two and a new 3D layout is generated. The level label advances with the growing dimension.
Each level becomes larger without changing the objective. The next route is generated anew, so memorizing the previous turns does not solve it. Read the corridors again after the fade.
Three.js renders the walls, ground, ball, camera and light, while Box2dWeb creates the dynamic ball and static walls. The camera and light follow the ball, keeping its nearby passages visible.
How the corridors and exit are generated
The maze script starts with a square field filled as walls and begins carving at coordinate 1,1. At each visited cell it considers eligible cells two positions away, chooses a direction at random, opens the wall between them and continues recursively. The process runs again at initialization, explaining why the route must be read after a transition. It supports a generated arrangement; it does not prove that every run or independent fork must produce a layout never seen before.
Initialization opens an edge cell at the current dimension minus one, dimension minus two. During play, the game rounds the ball position to maze coordinates and treats the outside coordinate at that opening as victory. It adds two to the dimension, fades the light and initializes again. The published Astray source creates a level label but no score, timer or lives counter. Visible progress is the increasing level number and larger WebGL layout.
A practical route through the 3D layout
Choose one branch at the first junction, move with short inputs and remember the turn. You can then retrace a clear path if the corridor ends.
When two branches are open, test one and remember the return direction. If it is blocked, roll back and test the other. The goal is to find the exit, not visit every corridor.
Near a corner, let the ball slow before turning. A long press adds force and can send it into the opposite wall. Observe, tap, watch the roll and correct.
Before changing direction, watch whether the ball is still drifting from the previous input. Waiting for a slower approach can make the next turn easier to judge, especially beside a narrow opening where a strong correction may cause another rebound.
Browser and device notes
The WebGL renderer needs JavaScript and working browser graphics. If the player stays blank, select Reload, wait for the frame, then try the original demo directly.
A green Play panel means the external request has not started. If the maze renders but ignores keys, click inside the frame, then test an arrow and hold I; the source binds I to its visible instructions. If neither the scene nor level label appears after Reload, the GitHub Pages link helps distinguish an embedding problem from a wider loading or graphics problem without guessing which failed.
The published controls list arrows and H, J, K and L, but no touch steering. Use a physical keyboard on mobile. On window resize, the source updates the renderer size and camera projection so the scene can adapt to a changed viewing area.
Questions about the rolling-ball puzzle
What is the objective?
Move the ball through connected passages and cross the exit opening. The project then fades out the completed scene and generates the next level.
Which keys control the ball?
Use the four arrow keys. The project also maps H, J, K and L to the same four directions, and each input applies force through its physics system.
How can I see the instructions?
Hold down the I key while the game has keyboard focus. Its instruction panel remains visible while the key is held and disappears when it is released.
Does every level use the same size?
No. The first layout uses an 11-cell maze dimension and adds two after each completed exit, then generates a new arrangement for the next level.
Why does the ball keep rolling?
Momentum persists because the demo applies impulses to a physics body and reduces its velocity over time. Short directional inputs therefore give you more room to correct a turn.
Can I play with touch controls?
The published instructions specify arrow keys and H, J, K and L. They do not document touch steering, so use a physical keyboard rather than assuming a phone screen will control the ball.
What should I do if the player stays blank?
Select Reload and allow the external frame time to initialize. The project creates a WebGL renderer, so it needs working browser graphics support. If it still does not appear, use the original project link below to open the GitHub Pages demo directly.
Source and rights
The embedded player comes from wwwtyro's published GitHub Pages demo. The public Astray repository describes the project as built with Three.js and Box2dWeb and includes a License.md file containing the Unlicense.
Blockdeck embeds the external demo and provides an independent guide; it does not claim authorship of wwwtyro's project. The repository's license applies to the material covered by that repository and does not transfer ownership of unrelated names, services or third-party projects.
Start another maze or choose a new game
Return to the player and play Astray WebGL Maze. To switch from physics movement to pill collecting, open the Pacman Canvas game, or browse all Blockdeck games.