Uso de Canvas
Páginas: 4 (784 palabras)
Publicado: 5 de abril de 2014
Parte 1. Dibujando en el canvas.
Para crear un juego en canvas, necesitaremos dos archivos: Una página HTML para mostrarlo, y el código en JavaScript del juego. Comencemos creando un archivo llamado“index.html”, lo abrimos para editar (Clic derecho » Abrir con » Notepad++, o el que uses) y copiemos dentro el siguiente código:
My First Canvas Game
My First Canvas GameCanvas not supported by your browser.
No me detendré a explicar el código HTML, ya que no es necesario para comprender el desarrollo de juegos. Digamos que el código arriba es lo básico paramostrar una página web donde mostraremos nuestro juego. Solo hay dos líneas importantes que debes comprender:
Mediante esa etiqueta “script”, llamamos al archivo game.js, que contendrá todo elcódigo de nuestro juego.
Canvas not supported by your browser.
En esta etiqueta canvas, será donde dibujaremos nuestro juego, el ancho de 300px y alto de 150px son los valores predeterminados, por loque se creará un lienzo del mismo tamaño en caso de no especificarse estos atributos. Puedes personalizarlos de acuerdo al juego que desarrolles, mas para este ejemplo, los dejaremos así.
El ID esel nombre único de nuestro elemento en la página, y es necesario para hacer referencia a él desde el juego; podemos cambiarlo al que deseemos, pero necesitaremos también cambiarlo en nuestro código(Que veremos en un momento).
Por último, agregamos un fondo gris para identificar dónde se encuentra nuestro lienzo (canvas). Si hay un problema con tu código, únicamente se mostrará el fondo gris,funcionando esto como una alerta. Posteriormente podrás borrarlo o cambiarlo, pero por ahora, será mejor dejarlo ahí.
Ahora, crearemos el código para nuestro juego. Comenzaremos por lo mássencillo: Dibujar un rectángulo dentro de él. Para ello, crearemos un segundo archivo de nombre “game.js”, y copiaremos el siguiente código dentro:
window.addEventListener('load',init,false);
var...
Para crear un juego en canvas, necesitaremos dos archivos: Una página HTML para mostrarlo, y el código en JavaScript del juego. Comencemos creando un archivo llamado“index.html”, lo abrimos para editar (Clic derecho » Abrir con » Notepad++, o el que uses) y copiemos dentro el siguiente código:
My First Canvas Game
My First Canvas GameCanvas not supported by your browser.
No me detendré a explicar el código HTML, ya que no es necesario para comprender el desarrollo de juegos. Digamos que el código arriba es lo básico paramostrar una página web donde mostraremos nuestro juego. Solo hay dos líneas importantes que debes comprender:
Mediante esa etiqueta “script”, llamamos al archivo game.js, que contendrá todo elcódigo de nuestro juego.
Canvas not supported by your browser.
En esta etiqueta canvas, será donde dibujaremos nuestro juego, el ancho de 300px y alto de 150px son los valores predeterminados, por loque se creará un lienzo del mismo tamaño en caso de no especificarse estos atributos. Puedes personalizarlos de acuerdo al juego que desarrolles, mas para este ejemplo, los dejaremos así.
El ID esel nombre único de nuestro elemento en la página, y es necesario para hacer referencia a él desde el juego; podemos cambiarlo al que deseemos, pero necesitaremos también cambiarlo en nuestro código(Que veremos en un momento).
Por último, agregamos un fondo gris para identificar dónde se encuentra nuestro lienzo (canvas). Si hay un problema con tu código, únicamente se mostrará el fondo gris,funcionando esto como una alerta. Posteriormente podrás borrarlo o cambiarlo, pero por ahora, será mejor dejarlo ahí.
Ahora, crearemos el código para nuestro juego. Comenzaremos por lo mássencillo: Dibujar un rectángulo dentro de él. Para ello, crearemos un segundo archivo de nombre “game.js”, y copiaremos el siguiente código dentro:
window.addEventListener('load',init,false);
var...
Leer documento completo
Regístrate para leer el documento completo.