A simple raycaster written in JavaScript and CoffeeScript


I’ve always been fascinated with games that try to create the illusion of 3D using 2D drawing techniques. A while back I decided to challenge myself to finally figure out how raycasting works and attempt to build my own basic engine that is comparable in function to the engines found in games like Wolfenstein 3D and Ultima Underworld.

References and Samples

After doing some research I found that the principles behind raycasting are actually very simple. I’m not going to go into great detail about how raycasting works but it you want to know the specifics then I recommend checking out the articles below. I used these for reference and inspiration in my design.

It’s fun to think that since raycasting utilizes basic math and trigonometry, one can created even on some of the most constrained systems. A really neat example of this that I found is the raycaster below that someone made on a Gamebuino (an Arduino based handheld).

And here’s another one that someone created for the NES.

The Engine

To keep the amount of code that I needed to write to a minimum I decided to write my engine using JavaScript. Later I moved up to CoffeeScript in order to make it even leaner.

This is a fiddle of the engine in JavaScript.

Go to the Result tab and click the Run button see it in action.

And this is a fiddle of the same engine in CoffeeScript.

Future Improvements

At this point you can see it’s basically just a rotating tech demo but I’ve got the framework established. These are some of the features I’m hoping to incorporate in the future.

  • Keyboard controls
  • Textured walls
  • Variable height walls
  • Doors
  • Sprites

Additional at some point I’m hoping to get my hands on an Arduboy once they come out and hopefully port the engine to that platform.

  • Why would you write it in CoffeeScript instead of EcmaScript 2015 (a.k.a. ES6)?

    • archenoth

      For the same reason you would write it in ES6 instead of CoffeeScript: Personal preference.

      Either way, it’s a pretty neat.

    • As @archenoth:disqus said it’s a matter of personal preference. I’m not ready to bank on ES6 yet. ES5 is more than sufficient and using CoffeeScript eliminates the need for a lot of verbosity which makes me more productive and keeps my code leaner.