Introducción
*Zona de: Desarrolladores Intel
Estoy seguro de que la mayoría de nosotros tiene entre sus planes programar un videojuego demente o no tan demente. La mayoría de estos planes quedan en la nada porque muchos piensan que programar videojuegos es excepcionalmente complicado. Eso es relativamente cierto, pero no es tan difícil como algunos creen.
Todos aquellos que comprendan la esencia de HTML, CSS y JavaScript* cumplen con los requisitos para comenzar un proyecto simple.
* Cómo agregar el elemento canvas a una página web
Una de las funcionalidades que más entusiasman de HTML5 es el elemento que se puede usar para dibujar gráficos vectoriales y crear asombrosos efectos, juegos interactivos y animaciones. "Canvas" significa "lienzo" y en la Web se lo define como un área rectangular que permite hacer representaciones dinámicas, y que admite el uso de scripts, de formas bidimensionales e imágenes de mapas de bits. El canvas de HTML5 es ideal para crear materiales visuales fabulosos que enriquezcan las interfaces de usuario, los diagramas, los álbumes de fotos, los cuadros, los gráficos, las animaciones y las aplicaciones de dibujo integradas. Este elemento funciona con bibliotecas de JavaScript y CSS3, lo cual permite crear juegos y animaciones interactivos basados en la Web.
* El código elemental para usar y configurar un canvas se ve así:
Esto se parece al elemento ; la diferencia es que no tiene los atributos src y alt. El elemento solo tiene dos características: ancho (width) y altura (height). Si las representaciones parecen no ser precisas, se puede intentar designar explícitamente el ancho y la altura en los atributos de en lugar de con CSS. Los valores predeterminados de los atributos de ancho altura son de 300 y 300, respectivamente. Se usará la id para inicializar el canvas por medio de JavaScript. El texto junto al signo de igual se usará como llamada de respuesta cuando el navegador móvil no lo admita.
* Dibujo del fondo y la nave espacial de un juego, con canvas de HTML5 y JavaScript
La variable "canvas" crea el canvas que necesitamos para dibujar los objetos gráficos, y la variable "ctx" retiene el contexto de representación. En este caso es un objeto gráfico bidimensional.
Este contexto contiene los métodos elementales para dibujar en el canvas, tales como arc(), lineto() y fill().
A continuación pintamos el fondo de negro, colocamos sobre él asteroides luminosos y dibujamos la nave con el objeto de contexto.
Cuando ejecutamos el código, la pantalla se ve como la imagen de la Figura 1.
Figura 1
Ahora vamos a mover la nave de nuestro juego con el elemento canvas de HTML5 y JavaScript. El ejemplo de código está compuesto por HTML5 y JavaScript, y muestra cómo mover la nave sobre las estrellas. Canvas usa el modo rápido para crear esta imagen animada. Son dos los pasos necesarios para ejecutar esto en el juego. Debemos volver a dibujar la imagen cada vez que la movamos. Luego debemos restablecer el trabajo preliminar (fondo) que se destruyó cuando le dibujamos la nave encima.
El código de abajo muestra cómo borrar la imagen de la nave a medida que se mueve y dibujar otra en una ubicación diferente. También muestra cómo evitar y restaurar vistas previas de la nave y el fondo. Canvas no memoriza la trayectoria de dibujo de los píxeles, por eso el ejemplo muestra las maneras óptimas de mantener la trayectoria de cada píxel a medida que se recupera, elimina, mueve y restaura en el código.
* Veamos cómo declarar algunas de las variables:
* Cómo establecer un bucle de juego para procesar los eventos principales del juego
* El código de abajo guarda el fondo anterior para que podamos borrar la nave y luego dibujarla en la nueva ubicación. Así se logra la ilusión de que la nave se ha movido.
Para obtener la información de cada píxel de una sección rectangular del canvas, una opción es obtener el objeto de datos de la imagen con la estrategia getimagedata() para la configuración del canvas y después acceder a la información de los píxeles desde la propiedad de información. Cada píxel de la información de la imagen contiene cuatro partes: una roja, una verde, una azul y una alfa.
Para jugar, tenemos que llamar al método Loopgame(). Para ello, llamamos al método setInterval. Este último método pide una función o evalúa una expresión a intervalos definidos. A este LoopGame se lo llama en bucles de 20 milisegundos, que se utilizan mucho en los juegos porque con ellos se logran procesos de animación básicos a intervalos fijos.
* Animación en canvas
La etiqueta