Skip to content


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. John Carmack and John Romero achieved to render pseudo 3d graphics with no cost with the current hardware in those days. 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 in 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 Comment

Matrix Transformations

This new post is not about a game project but it is related to game development, i dedicated this post to one of the major math concepts use in game programming and computer graphics in general, Matrix Transformations.

The first demo implements a 2D matrix transformations from the ground up on the Html5 Canvas, it is a top-down tile map where you can move the hero “red square”, there are some control sliders below to apply transformations:

Here is the direct link to the demo if you want to see the code:

The second demo implements a 3D rotation using matrix transformations, it rotates the Z axis (XY plane), Y axis (XZ plane) and X axis (YZ plane) of a 3D square.

For reference, this is how 3D rotation on X, Y and Z axis work, we have in total 3 planes, we are going to start with the XY plane first, where we rotate the Z axis, this is is a clockwise rotation in a left handed system, here is a graphic representation of how the XY plane looks like and we are going to plug the values in the matrix:




The basis vectors X and Y were rotated certain degrees, as you can see the hypotenuse length is 1 so the sides of the right triangle corresponds to the ratio of the trigonometric functions cosine and sine.

We plug the values in our matrix (Z axis rotation):

[ x               y         z]
[cos(0),  cos(0), 0][x]
[-sin(0), sin(0), 0][y]
[        0,            0, 1][z]

Now we are going to do the same with the two planes left.





We plug the values in our matrix (X axis rotation):

[ x            y           z]
[1,            0,         0][x]
[0,  cos(0), sin(0)][y]
[0, -sin(0), cos(0)][z]






We plug the values in our matrix (Y axis rotation):

[ x            y            z]
[cos(0),  0 -sin(0)][x]
[0,            1,         0)][y]
[sin(0),   0, cos(0)][z]


Here is the demo when we apply this transformations to the vertices that form the cube:

Here is the direct link to the demo if you want to see the code:

If you want to learn more about this topic i recommend the reading of 3D Math Primer For Graphics And Game Development, while this book does not focus on just matrix transformations, it is really a great resource of knowledge if you want to learn the math behind 2D and 3D programming.




Leave a Comment

Canvas Tetris

Let me share with you my latest addition to my gaming list projects, i have been playing a lot Puyo Puyo Tetris lately which is an awesome game for Nintendo Switch, i was thinking, hey!, i love this game so much, why not create a Tetris clone using HTML5 Canvas and ECMAScript 6 language?, so i started implementing the game a few days ago, i reused some classes from my previous game projects so the development was lighting fast.

The music played in the game is from a group known as PowerGlove, if you have not heard of them, go ahead and look for this incredible group and listen some of their recordings.  

I do not know if i could be committing some copyright infraction here, but i am planning to record my own Tetris metal theme song on my electric guitar soon but meanwhile i am using the PowerGlove version for now, i hope there would be no problems.

Regarding the mechanics of the game, each minute the speed of the game increments, you have to clear 10 lines to avoid the speed increase or if you clear 10 lines the speed reduces, therefore your mission is to clear as many lines as you can to prevent the game to end.

As usual, here is the link to the code repository:

And the link to the playable version (use arrow keys to move tetriminos):

1 Comment

Drip Drop Puzzle Game

I am proud to share Drip Drop Puzzle Game with you, for it is the first time that I created the graphics and sound by myself. It is also the second time that I implemented a web browser game with ECMAScript 6 and HTML5 Canvas.

Although development took about 3 weeks; I was satisfied the whole time and I had a awesome time creating this game for you all even though I had to work 3 times harder than normal. I even started thinking of ways to share this proud experience with you.

My particular objective was to publish my game at Newgrounds which it is a site for an indie developers to show their creations, all content must be done by yourself so this was a great opportunity to share my game and receive some feedback, i am not going to lie, i was scared, i like my own creations but when other people comes into play, there would be some mixed opinions about it, some bad, some good, so i was afraid i could not take the bits of the bad ones, in any case i did it, and i am glad of the decision, at end a received a regular score from the community which is a great start for someone who likes making games as a hobby.

The objective of the game is to extinguish the torch flames with the drips and drops of water from melting ice cube, game instructions are presented while advancing through levels.


  • Mouse


  • 10 Levels, from easy to hard.
  • Leaderboard, top 10 from best times.

Link to the game:

Source code:

Newgrounds link:

Any feedback would be appreciated.
Hope you enjoy it.


HTML5 game demo from scratch

It was a while since I posted my last entry because for 2 months, I was crafting a web game using the programming language Javascript and the HTML5 Canvas element. It was a incredible success and satisfyingly fun!

In this entry I will share with you the details of my latest creation – “Jahepi’s Dungeon”.

Before we begin, I want you to know that I created this 2d scroller game to test my programming skills with Javascript and the HTML5 Canvas element. I did not however design the graphics. With that being said, I would like to thank the gamedevmarket community at and the opengameart community at for providing me with the paid-for and the free graphics and assets that I used on Jahepi’s Dungeon.

Jahepi’s Dungeon Overview:

The Demo I created has a total of 3 levels that each has a set amount of gold coins you need to collect and a boss you need to defeat before passing the level. There are checkpoints in each level that will ease the frustration and agony you endure after falling into lavapits and getting slaughtered by each of the bosses. But do not be too scared! Our main character is a special kind of character that has unlimited lives. So even if you die a few hundred times, you are sure to beat the demo on the 501st try.

After you load the game, you will be familiar with the layout. As a gamer, I am sure you have seen this type of layout a thousand times. The controller is a simple Left, Right, Up, Down, A, B. It is located at the bottom left of the screen so you can play with  a mobile device. You can however use your keys on a keyboard if you are using a PC. Feel free to leave a comment if you have any ideas for a better layout on this sweet 2d scroller.

Demo –

Source Code –



Leave a Comment

Multiplayer Space Deathmatch for Android

This is a game i made for Android devices in 2016, it took about 3 months of development, i am really happy with the final result.

Thanks to Joseph Miraglia for writing such an amazing description.

Description of the game:

Play your Family and Friends, whenever and wherever, in a Local Multiplayer Space Shooter Deathmatch Arcade.

Jahepi presents Multiplayer Space Deathmatch; a 2016 Local Multiplayer Arcade offered free in the Google Play Store for Family and Friends to interact while battling each other in a free for all Space Deathmatch, on Smart Phones, Tablets, and even Computers. And just because it is free, does not mean you are limited from having an amazing time with your Family and Friends.

Strap on your Space Suit and get ready for intense, thrilling, and exciting Space Deathmatch Battles with your Family and Friends!

• Five Spaceships : Columbia, Challenger, Discovery, Atlantis, Endeavour, each with their own diversity.

• Four Battle Locations: Andromeda, Centaurus, Pegaso, Sculptor, each with different twists and turns for unique battles.

• Power Pick Ups: Bigger Missiles, Huge Lasers, Repair Kits, Shrink Rays, but avoid picking up the Slowness!

• Multiplayer Lan Support: One, Two, Three, and Four Players can play!

• English • Spanish

Ultimate LAN Support:
The Ultimate LAN Support allows up to four of any Mobile Devices and Computers to connect and pair with each other, through (A. a Router / B. a Device with Hotspot Tether), for Local Multiplayer Gaming. Ultimate Lan Support does not require an active Internet connection, but does require WiFi.


Play Store:


Leave a Comment

Dog Smash Pumpkins for Android

This is a game i made for Android devices in 2016, the mechanics of the game are really simple, you just have to  kill as many pumpkins as you can to get the most points.

Thanks to Joseph Miraglia for writing such an amazing description.

Description of the game:

The New World is here and for some strange trendy reason, Humans now prefer Pumpkins as Pets, instead of Dogs.

Dogs have been relegated and forgotten by their owners all over the World, and replaced with Pumpkins, but a Dog named Pancho is not satisfied with its owner having Pumpkins as Pets. Pancho the Dog is seeking revenge on all the Pumpkins of the World and knocking them out one by one.

Help Pancho the Dog finish its mission of saving Dogs from their Pet Owners prefering Pumpkins as Pets!

• Knock out the Pumpkins one by one by hopping on top of the them and then smashing the Pumpkins weak spot.

Pancho is not the only Dog risking its life to save humanity from Pumpkin Loving Pet Pumpkin Owners! Destroy more Pumpkins than all the other Dogs in the World, and prove to Panchos Owners that Pancho is the only Pet Worthy Pet ever!

You will not only reunite Pancho with its Owners, but you will go down in history as the best Dog to Smash Pumpkins on the WorldWide List of Dogs to Smash Pumpkin!

Be part of the top 10 worldwide list of dogs, help them to reestablish their life with humans to normal.

Play Store:


Leave a Comment