Back

3D Maze

Controls

Move: W, A, S, D

Rotate: Left and Right Arrow Keys

How It Works

The 2D map on the left is rendered using data from a JSON file containing the player's starting position, and the details of each wall (location, size, color). The 3D map on the right is rendered using ray-casting. Imaginary rays are cast from the player's position in a 90 degree fan. The distance to the first wall that each ray intersects with is inversely proportional to height of the corresponding column on the right screen (the shorter distance, the taller the column and visa-versa). The color of each column is determined by the color of the wall that the ray intersects with and is darkened the further away the wall is from the player. This technique creates a 3D-like effect, providing a visual representation of the maze.