lunes, 25 de julio de 2016

Hacer un Juego con HTML5 / Canvas. Parte 3.

Realizado los dibujos del juego (Hacer un Juego con HTML5 / Canvas. Parte 1.), y el código para rotar el cuadrado con los triángulos de colores al hacer click (Hacer un Juego con HTML5 / Canvas. Parte 2.), vamos aumentar el código con el mecanismo de circulo que cae desde la parte superior y que debemos hacer coincidir en el color con el triangulo superior.

Vamos a cambiar el código para dibujar los triángulos dentro del cuadrado,  iniciando con el triangulo superior, luego continuamos a la derecha, luego el triangulo inferior, y por ultimo el triangulo de la izquierda, es decir siguiendo el orden de las manecillas del reloj, el mismo orden que sigue al momento de rotar el cuadrado con el click.

Tenemos una matriz de cuatro colores [Color1,Color2,Color3,Color4], el Color1 se utiliza para el triangulo superior, el Color2 para el triangulo derecho, y así sucesivamente. Para conocer que color se encuentra actualmente en la parte superior vamos a utilizar el valor de rotación actual: Según este valor tenemos 0 => Color1, 90 => Color2, 180=> Color3, 270 => Color4.

Por lo tanto la formula para obtener el numero de color es; Rotación Actual / 90.

Para realizar el mecanismo de caída del circulo, colocamos una variable de velocidad a Ball, dicho valor aumenta el valor de "y" de Ball en cada ciclo de animación, con lo cual le damos el movimiento al circulo.

En cada ciclo de animación, debemos verificar si el circulo se encuentra colisionado con el cuadrado, si es el caso debemos verificar si el color de Ball coincide con el valor del triangulo superior para reiniciar el valor de "y" de Ball a 0, para que comience a caer desde la parte superior nuevamente con otro color "aleatorio" de los cuatro colores posibles. Si no coincide el color finalizar el juego.

Para reiniciar nuevo juego, si perdemos, damos un click.

Debemos colocar algún contador de cantidad de aciertos que se ha tenido, para lo cual vamos a crear un objeto "Scope" para realizar esto.

El código y resultado a continuación:


See the Pen Juego - Canvas. Parte 3 by Juan Carlos Saavedra (@jcsuscriptor) on CodePen.

domingo, 24 de julio de 2016

Hacer un Juego con HTML5 / Canvas. Parte 2.

Un vez que hemos dibujado los elementos del juego en la parte 1, vamos a proceder a colocar el código para permitir rotar el cuadrado al dar un click.

Los ángulos de rotación serán 0, 90, 180, 270, 360, para lo cual vamos a tener una variable global para almacenar el valor actual de rotación, en cada click se aumentara en 90 este valor, si llega a 360 el valor sera establecido a 0, de esta forma tenemos un ciclo continuo.

Todo el contenido de canvas, es una imagen, por lo que si deseamos tener interacción debemos volver a dibujar el contenido del mismo. Para esto vamos a utilizar un animación continua utilizando window.requestAnimationFrame, que nos permite llamar a una función en cada ciclo de animación.

 function play(){
    //1. Limpiar todo el contenido del canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);  
   
    //2. Dibujar el contenido
    ...
    ctx.rotate((Math.PI / 180) * rotate); 
    square.draw(); 
   
    //3. Continuar con el siguiente ciclo de animacion
    window.requestAnimationFrame(play); 
 }
 
 window.requestAnimationFrame(play);


Antes de dibujar el cuadrado con los triangulos realizamos una rotacion, segun el valor global de la variable rotate. Utilizamos "Math.PI/180 * Grados" para convertir los grados a radianes que utiliza ctx.rotate(radianes)

Vemos el resultado:

See the Pen Juego - Canvas. Parte 2. by Juan Carlos Saavedra (@jcsuscriptor) on CodePen.

Se tiene una falla, al momento de rotar el cuadrado con los triángulos, el eje de rotación es el vértice izquierdo superior, para corregir esto debemos realizar un traslado del eje según el valor del angulo, para lo cual utilizaremos translate.

See the Pen Juego - Canvas. Parte 2. 1 by Juan Carlos Saavedra (@jcsuscriptor) on CodePen.


En la "Hacer un Juego con HTML5 / Canvas. Parte 3.", vamos a completar el código para la caída del circulo y verificación si coincide el color del circulo con el color del triangulo superior.

Hacer un Juego con HTML5 / Canvas. Parte 1.


Voy a realizar un serie de post de crear un juego en html5, javascript, canvas. Según como avancen en los post, voy aumentando características hasta tener un juego final.

El juego que voy a realizar es un clon de Impossible Rush.

Parte. 1.

La primera parte consisten en crear las geometrías necesarias para el juego con instrucciones javascript en un elemento Canvas.

Se crea un circulo, y un cuadrado formado por 4 triángulos de 4 colores diferentes. Ver a continuación el código html, javascript y el resultado:


See the Pen Juego - Canvas. Parte 1. by Juan Carlos Saavedra (@jcsuscriptor) on CodePen.


Para aprender mas sobre canvas, pueden revisar el siguiente Tutorial Canvas

En la segunda parte, vamos a colocar la lógica para rotar el cuadrado al momento de dar un click.

Hacer un Juego con HTML5 / Canvas. Parte 2.