First Person Shooter Html5 Game – Raycasting

It has been a long time since I published a game on my blog. I have been working for the past 3.5 weeks on a very short FPS game inspired by Wolfenstein 3D, which is a groundbreaking game made by ID Software in the 90s. Back then, John Carmack and John Romero achieved rendering pseudo-3D graphics at no cost at all on the current hardware. At the time, it was not possible to render true 3D graphics at a reasonable frame rate because of hardware limitations; computers weren’t as fast as they are today.

So they implemented a technique known as raycasting, which emulates a sort of rotation in the XZ plane but has several limitations. We can’t look up or down, the walls must be orthogonal, and we can’t represent complex shapes, the only way to do that is to use sprites instead. Thus, the enemies, items, guns, etc., are sprites. Raycasting is fast because all calculations are in 2D, and the projection makes the game look like a real 3D game, but in fact, it is not.

This game was made from scratch in JavaScript and HTML5. I reused some sprites from my previous games, and the enemy sprites were taken from the Wolfenstein 3D game (soldier, dog, and boss).

I tried to implement most of the game functionality:

– Doors
– Moving walls
– Enemy AI
– Sound Effects and Music
– Items
– Sprite animation
– Textures

I was going to implement floor raycasting to improve the visuals, which Wolfenstein 3D does not have. Sadly, I had performance issues. I downgraded the visuals of the floor to improve performance, but it looked awful, so it was not worth it. I do not even know if my algorithm is the right approach for that, so I left it out.

It is not as polished as the original game, but I am really happy with the final result.

Control Scheme
A – Rotate to the left
D – Rotate to the right
W – Move Forward
S – Move Backward
Right Mouse Click – Shooting
E – Open Door

As usual, here is the link to the game:

https://jahepi-mx.github.io/html5-wolfenstein3d-game-demo

And the code repository:

https://github.com/jahepi-mx/html5-wolfenstein-3d-game-demo