Skip to content

Author: jahepi

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 square:

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

Nano MVC Framework PHP

Nano framework es un marco de trabajo muy pequeñito en PHP totalmente en español que utiliza el patrón MVC (Modelo, Vista, Controlador) para la separación de código por responsabilidades en los proyectos.

El marco de trabajo cuenta con:

  • Soporte de namespaces.
  • Integración con DBAL (Capa de Abstracción de Base de Datos) de Doctrine, soporte de los motores más populares como MySQL y Postgres.
  • Auto-completado total al integrarse con algún IDE como NetBeans o Eclipse.


./controlador: Contiene las clases controladoras.
./libreria: Contiene las clases de terceros.
./modelo: Clases de la capa de negocio, responsables de la recuperación y guardado de información en un medio persistente (Base de datos, XMLS, TXTS, etc.), envío de
correos, servicios web, etc.
./recursos: Contiene las carpetas CSS y JS para almacenar los archivos CSS y scripts
en Javascript.
./sistema: Clases necesarias para el funcionamiento del framework.
./vista: Almacena los archivos PHP que pintan las páginas (código html).


  • Apache
  • PHP 5.3+


El primer paso es habilitar el módulo mod_rewrite de Apache, hay muchas guías disponibles en Google.

Lo siguiente es editar el archivo config.php que se encuentra en la carpeta sistema:

La primera constante DIRECCION es la ruta de nuestro proyecto, la constante MOSTRAR_ERRORES es una bandera para activar o desactivar los errores en el proyecto y por último la variable $conexiones, arreglo asociativo con el listado de conexiones a la base de datos, bd1 es la llave con la que podremos recuperar la referencia de conexión desde código, y los datos de conexión mysql://root:1234@localhost/test, donde mysql es el motor a utilizar, root es el usuario, 1234 es el password, localhost el dominio o IP del servidor y test el nombre de la base de datos, se pueden agregar las conexiones que se deseen y hacer referencia desde código usando la llave que se asignó.


Los controladores se crean en la carpeta controlador, ejemplo de implementación:

Por defecto se crea una instancia del controlador Index y se llama a su método index si se entra a la dirección del proyecto sin indicar ningún parámetro, las siguientes direcciones imprimirían Hola Mundo!:

  • http://localhost/nano
  • http://localhost/nano/Index/index

No estamos limitados a crear los controladores en la carpeta controlador, también podemos crear subcarpetas dentro de esta y organizar nuestros controladores de una mejor manera, para ello también hay que indicar el namespace en el controlador ya que el nombre del namespace se traduce a la ruta de carpetas del proyecto, por ejemplo:

El controlador estará ubicado en la ruta controlador/modulo1, ve además como el namespace está declarado: namespace controlador\modulo1;

Para llamar al método index de este controlador llamamos la siguiente dirección desde nuestro navegador de preferencia:


Con el guión bajo separamos el namespace de la clase desde la dirección a invocar, por lo que el guión bajo no debería se utilizado como parte del nombre de las clases.

Nota: Recuerda que los controladores sólo tienen como responsabilidad manejar los eventos del sistema.


Las clases del modelo van en la carpeta de modelo, al igual que los controladores podemos organizar las clases en carpetas y sólo definir el namespace de acuerdo a la ruta de la carpeta donde se encuentra ubicada, es importante recalcar que en esta capa del modelo va la lógica principal de nuestra aplicación por lo que además de incluir los servicios de recuperación y guardado de datos a algún medio persistente, también podemos hacer uso de otros servicios como el envío de correo, la validación de datos, etc.

La clases definitivas en el modelo, quedan a nuestro criterio el cómo crearlas, tenemos la libertad de hacer nuestro modelado de clases, coloco ejemplo de implementación de una clase llamada Usuario que viene en la demostración:

El namespace de esta clase es modelo\com\jahepi, por lo que la clase se encuentra en la siguiente ruta de carpetas modelo/com/jahepi.

Otro punto importante es la siguiente instrucción:

Con la cual podemos hacer referencia a la conexión de la base de datos que definimos en el archivo config.php en el apartado de configuración.


Las vistas o los archivos que tienen los elementos visuales se deben guardar en la carpeta vista, desde nuestro controlador podemos cargar un vista de la siguiente forma:

Donde bienvenida.php es nuestro archivo vista que se encuentra ubicado en vistas/bienvenida.php:

Sólo el controlador tiene que regresar una instancia de tipo Respuesta donde tenga como salida el contenido de bienvenida.php.


Nano framework viene con una demostración de un login de acceso básico junto con un ABC o CRUD de usuarios.

Para descargar Nano Framework clic aqui.

Para ver demostración en línea clic aquí.


Leave a Comment