En ésta segunda parte empezaré el archivo Javascript y a integrar todas las funcionalidades que tendrá nuestro juego, pero primero vamos a construir lo básico:
Insertar CODE, HTML o PHP:
'use strict';
window.jQuery(document).ready(function(){
});
Voy a usar el modo estricto de Javascript (del que aún no he hablado en el blog pero que caerá tarde o temprano en posteriores actualizaciones, básicamente nos ayudará a no cometer errores que la propia flexibilidad de Javascript nos permite). Por otra parte lo que quiero es que el juego cargue nada más lo haga la página, por lo que utilizaré el método .ready() de jQuery, que lo que hace es llamar al parámetro que pasamos dentro de la función automáticamente una vez que el DOM está cargado y listo, si como parámetro pasamos una función, podemos meter todo el código dentro y se ejecutará nada más el DOM esté cargado.
Canvas:
Mediante jQuery vamos a coger la id="canvas" de nuestro archivo HTML y le vamos a signar una variable en javascript, acto seguido llamaremos al método HTMLCanvasElement.getContext() y le pasaremos el parámetro '2d' para darle a entender al programa que vamos a renderizar en 2d mediante CanvasRenderingContext2D
Insertar CODE, HTML o PHP:
'use strict';
window.jQuery(document).ready(function(){
var canvas = window.jQuery('#canvas');
var ctx = canvas.getContext('2d');
var cellWidth = 20;
});
Si usamos el método HTMLCanvasElement.getContext() tal como nos dice la documentación nos dará error:
Insertar CODE, HTML o PHP:
TypeError: canvas.getContext is not a function
Parece ser que da error ya que no es un elemento puro del Canvas, sino que es un objeto jQuery, según un amigo de StackOverflow se soluciona devolviendo el elemento real y no el objeto, tal que:
Insertar CODE, HTML o PHP:
var canvas = window.jQuery('#canvas')[0];
La variable cellWidth no será más que un valor arbitrario por ahora que marcará el tamaño de las casillas que conforman tanto la serpiente, como la comida como los movimientos, he puesto 20 pero podréis jugar más adelante con ello, reduciéndolo o aumentándolo a vuestro gusto.
Funciones init() y createSnake():
Lo que buscamos con estas dos funciones es que se genere un bucle (Game Loop) que pinte continuamente la serpiente, como en una película compuesta de n fotogramas por segundo hace que genere movimiento a la vista humana, vamos a hacer lo mismo aquí. Mientras que createSnake() re-dibujará la serpiente cada vez que la función es llamada, mediante init() crearemos un bucle que hará que llamemos a createSnake() continuamente.
Insertar CODE, HTML o PHP:
function init(){
createSnake();
/* GAME LOOP */
}
init();
function createSnake(){
}
El efecto que buscamos es algo como esto cuando añadamos unas cuantas cosas más al código:
Y con esto es todo por hoy, en el siguiente post completaremos las funciones para generar la serpiente en movimiento tal como la veis en las imágenes, pero como quedan aun unas cuantas funciones y cosas que meter por en medio no quiero complicar cada post demasiado, por ahora irle echando un ojo a la documentación de las funciones que hemos ido usando para crear el canvas, ya que serán la base de cualquier juego que queramos hacer en el navegador.