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.