First Person Shooter Html5 Game – Raycasting

It has been a long time since i published a game in my blog. I have been working for the past 3.5 weeks in a very short FPS game inspired by Wolfenstein3D which is a groundbreaking game made by ID software in the 90´s decade. In those days John Carmack and John Romero achieved to render pseudo 3d graphics with no cost on the current hardware. In that time was not possible to render true 3D graphics at reasonably frame-rate because of this hardware limitations, computers weren’t fast enough as today´s.

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

This game was made from scratch on Javascript and HTML5. I reused some sprites from my previous games and the enemy sprites were taken from Wolfestein3D 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 a floor raycasting to improve the visuals which Wolfenstein3D 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 without it.

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:

And the code repository:

Leave a Reply