sábado, 6 de junio de 2015

Clase 2: Cargar una imagen de fondo

Desarrollo de Tetris en HTML5 (Canvas) y JavaScript


    Como se puede ver en la siguiente imagen del lado izquierdo tenemos nuestro JS y del lado derecho el HTML5 de la clase anterior. 

   En la linea 4 y 5 del JS obtenemos en canvas del archivo HTML y creamos el contexto que nos servirá para dibujar en el lienzo nuestro fondo del videojuego.

   Tenemos en seguida 3 funciones 


  1. CargarContenido: Se encarga de crear un nuevo objeto de tipo imagen y sobre el lee la imagen de fondo. Después creamos la llamada a la función frameLoop con el reloj de la computadora cada 100 milisegundos
  2. La función dibujaFondo: Utiliza el contexto del canvas y dibuja la imagen de fondo en el canvas en la posición x,y (0,0).
  3. La función frameLoop: que como anteriormente dijimos se ejecuta cada 100 milisegundos invoca el dibujado del fondo.
    Como podemos observar en la imagen en el explorador de Chrome se dibuja el fondo de nuestro juego de Tetris.






Clase 1: Creación de HTML5 y liga a código JavaScript


Desarrollo de Tetris en HTML5 (Canvas) y JavaScript




    Pues nada, que con el objetivo de aprender acerca del desarrollo de videojuegos en HTML5 (Canvas) y Java Script vamos a iniciar paso a paso el desarrollo de nuestro ya conocido Tetris en HTML5.

    Lo primero que haremos es escribir nuestro HTML5 siguiente y guardarlo como index.html


<!DOCTYPE html>
<html lang="es">
<head>
<title>Hercoka Games - Tetris</title>
<meta charset="utf-8" />
</head>

<body>
<canvas id="game" width='200' height='400'>Tu navegador no soporta canvas<canvas>
<script src='main.js'></script>
</body>
</html>


    Como podemos ver creamos el objeto canvas con las propiedades de ancho y alto, así como un mensaje que indica que tu navegador no soporta canvas en caso de que no este actualizado. En la actualidad la mayoría de los exploradores en sus ultimas versiones soportan esta etiqueta de HTML5.

    Después del canvas tenemos la llamada al archivo de nuestro javascript llamado main.js el cual se deberá guardar en la misma ruta que nuestro HTML.
   
     A lo largo del curso se utilizara el siguiente software recomendado:


  • Editor HTML y JS:    http://www.sublimetext.com/3
  • Explorador Web:     https://www.google.es/chrome/