Desarrollo sencillo de un juego de 2 niveles estilo ARKANOID

EXPLICACIÓN GENERAL El juego consiste en tocar con una pelota todos los recuadros que hay en la pantalla (parte superior) del juego hasta que no quede ninguno. El balón se desplaza por la pantalla y con las teclas "dirección izquierda" y "dirección derecha" del teclado se moverá una rectángulo para tocar la pelota, orientarla hacia los recuadros y evitar que el balón toque el fondo del recuadro de juego antes de tocar todos los recuadros.   El juego sólo dispone de dos niveles y la posición que ocupa cada recuadro en la pantalla, una vez cargados los componentes gráficos para cada nivel, será SIMILAR A LAS IMAGENES ADJUNTAS: CARACTERÍSTICAS DEL JUEGO • Hay que recuperar el color y la posición de los recuadros para cada nivel disponible en un fichero [login to view URL] y dibujar los recuadros que forman un nivel dentro del elemento Canvas. Para ello se ha de implementar la función "draw_canvas" que se encuentra en el archivo javascript [login to view URL] . Tanto el fichero .php como .js se proporcionaran para su implementación. • Se debe crear elemento de marcado HTML que muestre la mejor puntuación del jugador en cada sesión. La mejor puntuación consiste en el tiempo mínimo empleado por el usuario en la sesión actual para eliminar todas las pelotas de los dos niveles. También se deberá mostrar el tiempo empleado en la partida actual. • El juego debe comenzar cuando se haga clic sobre el botón INICIAR PARTIDA y se debe poder pausar y reactivar cuando se haga clic sobre el botón PAUSA. • Se debe definir el movimiento de la paleta que hace rebotar la pelota hacia los recuadros. Para hacerlo al inicio del documento javascript [login to view URL] han definido las líneas: $ (documento) .keydown (function (e) {      if ([login to view URL] == 37) {// Se ha pulsado la tecla de dirección a la izquierda    ... ..    }       if ([login to view URL] == 39) {// Se ha pulsado la tecla de dirección a la derecha            .. ...       } A la hora de implementar el movimiento de la paleta, se debe tener presente que la paleta no debe poder salir de los márgenes del canvas. • Se debe implementar la función "ball_touch_padddle" haciendo que la pelota rebote en dirección contraria cada vez que toque la paleta. • Se debe implementar la función para que cuando el balón toque uno de los recuadros recuperados en el primer ejercicio, este recuadro no vuelva a aparecer hasta que se reinicie la partida o se pase al siguiente nivel. • Se debe controlar la finalización de un nivel y de la partida. El usuario pierde una partida si la pelota llega al fondo del canvas. Si el usuario consigue eliminar todos los recuadros, pueden pasar dos cosas en función del nivel de la partida:      1. Si el jugador ha completado el primer nivel, el juego deberá iniciar el segundo nivel.     2. Si el jugador estaba en el segundo nivel, el juego detendrá su ejecución y mostrará un texto en el centro del canvas indicando al usuario que ha ganado y finalizado el juego. • Cada vez que el balón toque la paleta o uno de los recuadros, se emita el sonido "ball-touch" que se proporcionará. • Se debe tener en cuenta el diseño responsivo para estos dos formatos. Para pantallas de anchura inferiores a 500px los botones de inicio de partida, de pausa y el contenedores de puntuaciones tendrán que mostrar uno al lado del otro debajo del canvas. Para pantallas superiores a 500px los dos botones y los contenedores de las puntuaciones se tendrán que mostrar uno debajo del otro y situados los cuatro en el lado derecho del contenedor del canvas. • Las imágenes del juego son meramente sugerencias. Se debe desarrollar el juego con al menos 10 mejoras visuales en base a CSS3. • Debe documentarse adecuadamente el código fuente. • Archivos [login to view URL] [login to view URL] . Fichero [login to view URL] [login to view URL] [login to view URL]