Skip to content

Tag: canvas

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:

https://bitbucket.org/jahepi/jstetris

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

http://games.jahepi.net/jstetris/index.html

1 Comment

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 https://www.gamedevmarket.net and the opengameart community at https://www.opengameart.org 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 – https://games.jahepi.net/dungeon/index.html

Source Code – https://bitbucket.org/jahepi/html5gameengine/wiki/Home

Regards

 

Leave a Comment

HTML5 vs FLASH

Hace muchos años vimos el nacimiento de una plataforma que abrió un abanico de posibilidades en el mundo de Internet, la plataforma de desarrollo conocida como Flash, en un principio creada por Macromedia para más tarde ser adoptada por Adobe permitió realizar cosas que antes nunca habíamos visto en la web, sitios con animaciones espectaculares, juegos que jamás llegamos a imaginar que pudiera ser posible ejecutarlos desde un navegador, en fin; grandes cosas surgieron en ese periodo.
Tengo un gran cariño a esta tecnología porque fue uno de los catalizadores que hicieron que me interesara en la programación y en el desarrollo de aplicaciones, Actionscript lenguaje nativo de Flash fue uno de los primeros lenguajes que aprendí, programé muchas cosas utilizándolo, me atrevo a decir que ha sido el lenguaje que más he disfrutado ya que me permitió hacer cosas que no creí posibles en aquella época.

La popularidad de Flash ha ido disminuyendo con el tiempo, todo esto por el advenimiento de HTML5, además que el plugin de Flash no es soportado en ciertos dispositivos, ¿alguien mencionó Apple? , Steve Jobs rechazó el uso de esta tecnología; pero a pesar de todo lo negativo estos últimos años, Flash sigue, no tan fuerte como antes pero aún es una gran herramienta para el desarrollo de aplicaciones.

Este es el motivo de esta entrada en el blog, quería ver las virtudes que HTML5 ofrece para el desarrollo de aplicaciones, compararla con Flash y dar mis conclusiones. Así que me vi en la tarea de hacer un pequeño juego usando el elemento Canvas y Javascript; cabe mencionar que este es mi primer intento de hacer un juego con HTML5, los juegos que llegué a desarrollar siempre fueron en Flash así que hice esto para tener un panorama más claro de lo que es HTML5 y porque está desplazando a Flash.
Dejo el código completo, tiene algunos errores en la detección de colisiones, no pude identificarlo hasta el momento pero si alguien lo encuentra o tiene algún comentario sobre el fuente estoy ansioso por escuchar sus comentarios.

 

Las teclas con las fechas hacía abajo y arriba rotan el personaje y las flechas izquierda y derecha lo mueven sobre el eje X y Y, con la tecla A disparan, el objetivo es destruir las rocas que salen volando, no tiene niveles, ni jefes, sólo es un juego sencillo a modo de aprendizaje.

Enlace al juego: http://games.jahepi.net/testgame/index.html

No voy a decir la verdad absoluta, el siguiente comentario está basado en la corta experiencia que tuve implementando esta demo.
HTML5 es una tecnología que no ha alcanzado el nivel de madurez que tiene Flash, no hay duda que trae grandes cosas, pero al final se me ha hecho más difícil programar y depurar el código, además que Javascript le faltan algunos detalles para llegar a ser un lenguaje 100% orientado a objetos como lo es Java o ActionScript 3, me hubiera gustado manejar mi clases en paquetes o indicar el tipo de dato en las variables, extrañe el uso de movieclips, sprites y todas las bondades que tiene Flash para facilitar el desarrollo pero aun así considero que como todo en la vida nos adaptamos a los cambios, en un futuro no tengo la menor duda que HTML5 junto con Javascript marcarán la web como Flash lo hizo en su día.

Leave a Comment