Juego de artillería con Canvas

Esta muestra es un juego muy simple, el típico de lanzar un proyectil con un cañón y tratar de alcanzar el objetivo. Es una muestra de como se pueden desplazar objetos por encima del fondo, sin dejar rastros.

Básicamente cada objeto que se mueve (proyectil, cañón, nubes) lleva una propiedad que es el fondo que había antes de colocarlo en el canvas. Para borrar la posición actual basta poner su fondo y luego poner la imagen despues de copiar el fondo existente en la siguiente posición.

He utilizado objetos en Javascript, con propiedades y métodos para facilitar la codificación. Es un uso muy simple del sistema más básico de rogramación orientada a objetos de Javascript.

El programa usa métodos como drawImage()para colocar imágnes del cañón o del objetivo o de las nubes, getImageData() y putImageData() para copiar y poner el fondo de cada objeto, transformaciones como translate()o rotate() para girar el cañón alrededor de su centro (en este caso la rueda). También usa isPointInPath() para detectar si el proyectil llega al objetivo o al suelo, esto lo usa con un objeto path2D, es similar a un contexto donde se pueden dibujar paths pero que se pude manejar como una letiable.

Para desplazar el proyectil o las nubes se calcula su posición mediante funciones matemáticas (no es indispensable que las entiendas, es fácil encontrarlas buscnado con Google lanzamiento de proyectiles o ecuaciones de movimiento. Si has estudiado algo de física te sonarán: tiro parabólico y movimiento uniforme. Estas ecuaciones permiten calcular las coordenadas X e Y para situar los objetos en el canvas. Solo has de recordar que el origen de coordenadas están arriba a la izquierda.

El código es algo extenso por eso no lo voy a colocar en esta página. Si qiueres verlo ve a este enlace, se abrirá una página nueva solo con el canvas, mira el código fuente y desde ahi puedes copiarlo a tu editor HTML, estudiarlo y modificarlo a tu antojo.