Curso de programación con JavaScript donde aprenderás a crear el juego Snake

Ricardo y yo estamos muy contentos de tenerte acá. Esperamos que disfrutes mucho el curso. Por favor recuerda dejar tu opinión.

Bienvenido

Introducción al curso

En este video te voy a enseñar los fundamentos de la programación. Vamos a hablar de cómo varios comandos conforman un programa, y la forma de pensar como programador

Cómo piensa un programador y tecnologías que vamos a utilizar

En este video vas a escribir tus primeras líneas de código. Te voy a explicar cómo abrir el REPL de JavaScript y cómo utilizarlo.

Introducción al REPL de JavaScript

En este video te voy a explicar qué son y cómo utilizar las variables en JavaScript

Introducción a variables

En este video vamos a combinar lo que hemos ido aprendiendo para implementar tu primer programa. El programa se llama el gritón.

Tu primer programa

En este video te voy a enseñar sobre los condicionales.

Condicionales

En este video vamos a continuar aprendiendo sobre los condicionales. Vamos a ver los operadores lógicos AND y OR

Operadores lógicos AND y OR

En este video te voy a enseñar una herramienta súper poderosa para encontrar errores en tus programas y analizar línea por línea lo que está ocurriendo: El debugger

Debugger

En este video te voy a introducir a los ciclos, vamos a ver el ciclo while y el ciclo for

Ciclos While y For

En este video te voy a introducir a los arrays. Los array nos permiten agrupas cosas.

Arrays

En este video te enseño lo que son las funciones. Las funciones nos permiten agrupar varios comandos bajo una misma firma.

Funciones

En este video te voy a enseñar sobre los objetos. Los objetos nos permiten agrupar multiples propiedades bajo una entidad.

Objetos

En este video te enseño la importancia de buscar e interpretar documentación

Cómo leer e interpretar documentación

Fundamentos de la programación con JavaScript

Preparate que luego de construir este juego vas a haber dado un salto cuántico en tus habilidades como programador. Escribe el código conmigo, es la mejor manera de aprender.

Qué vamos a construir y recomendación de como tomar el curso

* Instala VS Code aquí: https://code.visualstudio.com/ 
 * Instala Google Chrome aquí: https://www.google.com/chrome/

Editor de código y navegador recomendado

Introducción al proyecto: Culebrita.js

Creamos el archivo de HTML que va a ser la fundación del proyecto. Te enseño los básicos de HTML y mostramos el título del juego en la página.

Mostramos el título del juego en el navegador con HTML

Creamos el archivo de JavaScript que va a contener toda la lógica del juego. Para que el navegador ejecute este archivo debemos incluirlo en el HTML de la página con el script tag.

Creamos el archivo de javascript que va a contener la lógica del juego

Fundación del proyecto

* El elemento canvas es muy utilizado en el mundo de JavaScript para crear juegos y animaciones. 
 * En este video incluimos al canvas en el HTML y le agregamos un poco de CSS para poder ver sus bordes.

Agregamos al HTML un elemento canvas para dibujar

* Para decirle al canvas donde queremos dibujar figuras tenemos que pasarle una coordenada X y una coordenada Y. 
 * La coordenada X especifíca la posición en el eje horizontal, mientras que la Y es para el eje vertícal. 
 * En el próximo video pondremos esta teoría en la práctica.

Introducción al sistema de coordenadas del canvas y a cómo dibujar figuras

* document es un objeto global que esta disponible en todos los navegadores. Nos permite interactuar con elementos de nuestro HTML. 
 * ¡Práctica mover las figuras! Es muy importante que entiendas el sistema de coordenadas porque lo vamos a usar mucho.

Dibujamos figuras y texto en el canvas

* Con unos simples loops dibujamos una cuadrícula que nos va a ayudar mucho cuando empecemos a dibujar a la culebra y la comida. 
 * Cada cuadrado en nuestra cuadrícula mide 20 x 20 pixeles.

Dibujamos la cuadrícula del juego usando loops

* Por los momentos la culebra simplemente va a ser un cuadrado de color negro en nuestra cuadrícula. Más adelante vamos a cambiar este código para poder dibujar culebras de cualquier tamaño.

Dibujamos a la culebra en el canvas

* Las funciones nos permiten organizar nuestro código y también reeusarlo. 
 * Recuerda que en JavaScript las funciones tienen acceso a las variables y otras funciones que están declaradas fuera de ellas. Esto es algo muy común en muchos lenguajes de programación. 
 * Las variables que están declaradas fuera de la función usualmente las llamamos 'variables globales'. Usar variables globales dentro de funciones puede resultar en código confuso y difícil de leer. Es por esto que yo prefiero pasar las variables globales como argumentos a las funciones que creamos en este video.

Envolvemos la lógica para dibujar a la culebra y la cuadrícula en funciones

Canvas y código para dibujar

* La web nos permite utilizar a JavaScript para detectar cuando ciertos eventos ocurren en el navegador: clicks, teclas presionadas, mover el curso encima de un elemento, etc. 
 * Para crear el juego vamos a escuchar a varios eventos: teclas para mover a la culebra, clicks para empezar y reiniciar el juego, etc.

Introducción a los eventos en JavaScript

* Creamos un 'listener' que es ejecutado cada vez que el usuario presiona una tecla en su teclado. 
 * Si la tecla presionada es una de las flechas entonces movemos a la culebra y la volvemos a dibujar. ¡Fácil! 
 * Por ahora el juego no esta animado. La culebra solo se mueve cuando el usuario presiona una tecla. Esto va a cambiar pronto.

Escuchamos a los eventos del teclado y desplazamos a la culebra

* Damos un pequeño paso que nos acerca a poder dibujar y mover culebras de cualquier tamaño.

Guardamos a la posición de la culebra en un objeto

* Idea clave: la culebra no es más que una lista de posiciones en nuestra cuadrícula. Cada elemento en la lista representa un cuadrado de la culebra. Esta es la forma en que vamos a 'modelar' a la culebra. 
 * Para dibujar a culebras de cualquier tamaño simplemente necesitamos usar un loop para dibujar a cada cuadrado.

Escribimos código para dibujar culebras de cualquier tamaño

* Es sorprendente lo fácil que es mover culebras de cualquier tamaño: agrega una nueva cabeza y borra la cola. 
 * El objeto DIRECCIONES es lo que llamamos una 'constante'. Este objeto es la forma en que vamos a representar las direcciones en el juego. Ya verás como esto nos ayudará a escribír código que sea fácil de entender.

Escribimos código para mover culebras de cualquier tamaño


        * En el juego Snake la culebra no se puede mover en retroceso. Mediante un simple condicional podemos prevenir los movimientos inválidos.
      

Escribimos código para prevenir movimientos inválidos

Eventos en la web y como vamos a mover a la culebra

* La función setInterval es muy utilizada en el mundo de JavaScript. Ella recibe como argumento una función y un número que representa una cantidad de milisegundos. Al invocar a setInterval la función que pasamos como argumento se va a ejecutar cada vez que el número de milisegundos haya transcurrido. 
 * En los juegos reales se utilizan soluciones mucho más complejas para crear el ciclo del juego, pero la idea es la misma que vez acá. Para este proyecto setInterval logra un resultado excelente.

Creamos el ciclo del juego para que la culebra siempre se mueva

* Le agregamos un eventListener al canvas para detectar cuando el usuario le haga click. De esta forma podemos saber cuando empezar el juego.

Empezar el juego cuando el usuario hace click en la pantalla


        * El ciclo del juego introdujo un bug que se conoce como una 'condición de carrera'. Este problema permite que la culebra se mueva en retroceso si el usuario presiona las teclas muy rápidamente. Para corregirlo tenemos que hacer unos pequeños cambios al listener de 'keydown'.
      

Corregimos un bug en nuestra solución para prevenir movimientos inválidos


        * Nunca subestimes el valor de la documentación y la organización. Como principiante quiero que te asegures de indentar tu código de forma correcta y que empieces a ver como podemos agrupar a las diferentes partes de nuestro JavaScript.
      

Organizamos nuestro código para que sea más fácil navegarlo

Ciclo del juego

* En el juego la comida no es mas que un simple cuadrado relleno en la cuadrícula. Es por ello que la comida es un objeto con posX y posY, justo como las partes de la culebra. 
 * En el mundo de la programación usualmente es bueno eliminar la duplicación. Es por ello que creamos a la función rellenarCuadrado().

Agregamos función para dibujar la comida en la cuadrícula

* La librería Math esta disponible en todos los navegadores. Math.random() nos retorna un número entre 0 y 1 (el 0 es inclusivo, pero el 1 no). 
 * Math.floor() simplemente redondea hacia abajo. 
 * Estos dos métodos de la librería Math nos permiten calcular una posición randomizada donde poner la comida.

Agregamos función obtener una posición randomizada para la comida


        * Este problema es muy sencillo. Simplemente tenemos que revisar si la cabeza de la culebra tiene la misma posición que la comida.
      

Agregar código para detectar cuando la culebra se come la comida


        * Otro problema que aparenta ser muy difícil pero tiene una solución fácil: simplemente tenemos que no descartar la cola de la culebra si se come la comida. ¡Eso es todo!
      

Hacemos que la culebra crezca al comer

Comida y hacer que la culebra crezca

* Dejamos un margen de 20 pixeles en el canvas que va a ser la pared del juego. En mi opinión esto hace que el jugador pueda entender con más claridad cuando se muere la culebra. 
 * Cambiamos la lógica de generar la comida un poco para asegurarnos de que no sea generada fuera de las paredes del juego. 
 * Recuerda que Math.max() retorna el número que sea más grande de los argumentos que le pasemos.

Dibujamos las paredes del juego


        * Para detectar colisiones con paredes simplemente tenemos que revisar si la cabeza de la culebra esta fuera de las paredes.
      

Agregamos código para detectar colisiones con la pared

* Que la culebra crezca es lo que hace que Snake sea divertido. Cuando la culebra crece se hace más difícil el juego porque te mueres al chocar contra ti mismo. 
 * Como dije en el video las culebras de 4 unidades o menos no pueden chocar consigo mismo.

Detectamos colisiones de la culebra consigo mismo


        * Para contar los puntos creamos una variable de estado que incrementamos cada vez que la culebra se come la comida. Cada vez que el jugador gana un punto cambiamos el texto del div que tenemos en el HTML. 
      

Agregar contador de puntos al juego

* Para volver a jugar tenemos que reinicializar el estado del juego a sus valores originales. Esto lo hacemos con la función empezarJuego(). 
 * Para volver a empezar el ciclo del juego tenemos que hacer que la variable ciclo sea undefined.

Agregamos código para volver a jugar luego de morirse

Colisiones y contador de puntos


        * Con el tag meta le decimos al navegador que la página del juego va a utilizar los caracteres de UTF-8. Esto es lo que permite que letras como 'ñ' o tildes sean mostradas correctamente.
      

Dibujamos texto en el canvas explicando como jugar


        * Creamos a la función gameOver().
      

Dibujamos texto en el canvas explicando como volver a jugar luego de morirse

* Descarga el archivo de sonido aquí (busca el botón que dice "Download"): https://drive.google.com/file/d/192tGMqcr08Z78oce0UbZmx2XN2OoFjgE/view?usp=sharing 
 * El objeto Audio esta disponible en todos los navegadores. 
 * Si quieres aprender más sobre el operador 'new' revisa la documentación de Mozilla: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new

Agregamos un sonido para cuando la culebra se come la comida

Instrucciones de cómo jugar y sonido

* Empezamos nuestro tour por el mundo del CSS. Recuerda que puedes poner estilos a elementos mediante su id o también mediante el tipo de tag de HTML.

Agregar estilos básicos: colores y font

* Usando tags de tipo div podemos agrupar a elementos de HTML. 
 * El contenedorNintendo va a ocupar el 50% del tamaño disponible en su padre, el contenedorJuego. 
 * Es muy fácil centrar contenido en la página utilizando a 'display: flex'.

Agregar contenedores y centrar contenido en la página

* Descarga la imagen del Nintendo aquí (busca el botón que dice "Download"): https://drive.google.com/file/d/1701a5ZB_KKt_uG014RTzvgOx2OBr3ogj/view?usp=sharing 
 * Creamos un nuevo contendor llamado juegoOverlay para el canvas y la imagen del Nintendo. 
 * Mediante 'position: absolute' podemos posicionar al canvas exactamente donde la queremos en su padre (juegoOverlay). 
 * El usar porcentajes es lo que nos permite mantener el canvas donde lo queremos en todos los tamaños de pantalla.

Agregamos la imagen de Nintendo y posicionamos el canvas como su pantalla


        * Recuerda que 'padding' se utiliza para crear espacio dentro de elementos, mientras que 'margin' se utiliza para separar a elementos de sus contenedores.
      

Agregamos márgenes al título y el texto de los puntos

* Mediante los Media Queries podemos alterar nuestro CSS cuando ciertas condiciones se cumplen. Para el juego lo que queremos es cambiar el tamaño del texto y del contenedorNintendo dependiendo del ancho de la pantalla. 
 * No olvides los principios de Mobile First Design: primero diseñamos para móvil, luego adaptamos para lo demás.

Escribimos CSS para que el juego funcione en cualquier tamaño de pantalla

* CSS nos permite crear animaciones increíbles. En esta página las puedes generar: https://animista.net/ 
 * Las clases de CSS empiezan con un punto (ejemplo ".shake") - a diferencia de los id's las clases son reusables. Las puedes asignar a todos los elementos que quieras. Esto es muy útil cuando existen elementos en la página que comparten estilos.

Agregar animación para sacudir el Nintendo cuando el jugador se muere

* Para que el juego funcione en móvil vamos a hacer que la culebra rote a la derecha cuando el usuario hace tap o click en el canvas. 
 * PS: escribí móvil con 'b' cuando grabé el video 😅

Agregar lógica para controlar la culebra en dispositivos móviles

* Muy rápidamente creamos un mensaje que mostramos al detectar eventos de tipo 'orientationchange' en móviles. 
 * En CSS se utiliza '!important' para indicar que un estilo no debe ser sobreescrito por otro.

Mostrar un mensaje explicando que el juego solo funciona en modo vertical en dispositivos móviles

Estilos con CSS

Ha sido un placer tener como estudiante. Ricardo y yo esperamos que le hayas sacado mucho valor al curso. Por favor recuerda dejar tu opinión, nos ayuda muchísimo. 
 Todo lo mejor, 
 Daniel y Ricardo

Introducción al curso

Bienvenido

Fundamentos de la programación con JavaScript

Introducción al proyecto: Culebrita.js

Fundación del proyecto

Canvas y código para dibujar

Eventos en la web y como vamos a mover a la culebra

Ciclo del juego

Comida y hacer que la culebra crezca

Colisiones y contador de puntos

Instrucciones de cómo jugar y sonido

Estilos con CSS

Despedida

Bienvenido

Descripción