Raycaster World

Below is a map editor. Basically, this program will take the grid below and transform it into a pseudo-3D world after you're done editing it. Simply tap on each square to change it's color, try tapping on it more than once;)! All the colors represent solid walls, except for white, which represents empty space.

How does this work? Basically, take a grid. Imagine that 0 stands for no wall(white) and numbers greater than 0 stand for a wall(any other color). Say there's a player standing somewhere in that grid, and invisible rays are coming out of it. These rays keep streaming out of the player, until they reach a wall - a part of the grid represented by a number greater than one.

Taking the color of these rays, the program draws a line with the color perspective to the player. For example, if the player was staring straight, then the program would draw the current line towards the left

On the computer, you can move with the normal keys W, A, S, D. On mobile, Hammer.js is implemented, so you can swipe to rotate left and right, and click and hold the up and down buttons to move. Note that on mobile, there are occasional glitches involving movement.

3D Map Editor