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:

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.

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.