Want to create interactive content? It’s easy in Genially!
EL AHORCADO CON CANVAS
Conchi Iglesias G
Created on May 28, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Memories Presentation
View
Pechakucha Presentation
View
Decades Presentation
View
Color and Shapes Presentation
View
Historical Presentation
View
To the Moon Presentation
View
Projection Presentation
Transcript
CANVAS
CANVAS
Juego del ahorcado
Juego del ahorcado
Juego
En este juego se introduce la palabra que queremos que se averigue y se pulsa el botón "iniciar juego". En ese momento, tanto el campo donde se introduce la palabra como el botón de inicio se deshabilitan y la palabra escrita se borra, para que el jugador no la vea. En el siguiente campo, el jugador puede ingresar letras usando el teclado, y verificar si son correctas pulsando el botón "verificar letra". El juego continúa hasta que el jugador adivine la palabra o se complete el dibujo del ahorcado. Se podrán tener seis fallos, que son las partes del ahorcado que pondremos: cabeza, cuerpo, brazos y piernas.
Juego
La estructura de nuestro código sería algo así: - elementos html : -lienzo, - campos input para palabra y letras, con sus correspondientes botones, - dos mesajes, uno para mostrar las letras adivinadas y otro para mostrar avisos al jugador. - scripts: capturamos lienzo de html, declararemos variables, establecemos funciones: -iniciarJuego() -dibujarLinea() -dibujarHorca() -dibujarAhorcado() -verificarLetra() -actualizarPalabra() -verificarFinJuego().
Preparando html
Vamos a crear ese juego con canvas. En primer lugar prepararemos nuestro lienzo, esta vez le daremos antes (dentro del <head>) algo de estilo. Este código simplemente enmarca nuestro canvas.
Pondremos en nuestro html el lienzo, canvas, dándole nombre y dimensiones. Y añadiremos una cabecera con <h2>. Después del canvas, pondremos dos saltos de línea, para situar debajo (y no a la derecha) el campo de palabra y botón de inicio.
Preparando html
Ahora crearemos un input para introducir la palabra que queremos que los demás averiguen. Y un botón con el nombre de la función que capturará la palabra e iniciará el juego. También pondremos nombre al botón, para deshabilitarlo una vez pulsado, hasta que termine el juego. Añadiremos dos saltos de línea para separarlo del siguiente campo y botón.
Creamos otro input para recoger la letra que pulse el jugador y un botón con la función que se encargará de obtener la letra ingresada por el jugador, verificar si está presente en la palabra que hay que adivinar y actualizar las variables correspondientes.
Lo último que añadiremos será una variable que utilizaremos para mostrar mensajes al jugador y otra que mostrará las letras que vamos adivinando.
Preparando script
Preparando script
Creando script
Vamos a comenzar el script añadiendo todas las variables que necesitamos en el juego. Como siempre en primer lugar obtenemos el elemento canvas y creamos el contexto 2d para dibujar en él.
var canvas = document.getElementById("gameAhorcado"); var ctx = canvas.getContext("2d");
Ahora crearemos el resto de variables que necesitaremos para el juego:
var palabraAdivinar = ""; --- será la palabra que capturemos para adivinar. var letrasAdivinadas = []; --- en este array almacenaremos las letras adivinadas. var intentos = 6; --- establecemos el número de intentos. Comenzará en 6 y se irá reduciendo cuando fallemos. De ese modo, según su valor, sabremos qué parte del cuerpo del ahorcado debemos dibujar.
Función inicio
Función inicio
Creando script
Vamos a crear la función iniciarJuego (), a la que llamamos desde el primer botón que creamos en el html, que tiene el texto "Iniciar juego".
Primero capturamos la palabra que se ha escrito en el input y que tiene id "wordInput", mediante la función .getElementById ("nombre del elemento que queremos capturar").value;. Queremos que busque el elemento en todo el html, por tanto, pondremos como objeto document. Veamos cómo sería:
palabraAdivinar = document.getElementById("wordInput").value;
Después de guardar la palabra en la variable "palabraAdivinar", podemos borrar el campo, para que no se vea la palabra durante el juego, y también deshabilitarlo para que no se introduzca ninguna palabra más hasta que acabe el juego. También deshabilitaremos el botón de inicio, hasta finalizar el juego.
Función iniciar
Después reiniciamos el array "letrasAdivinadas" y los "intentos". Terminamos llamando a la función dibujarAhorcado(); que crearemos en el siguiente paso.
Dibujo de línea
Dibujo de línea
Función dibujarLínea
Ahora crearemos la función para pintar líneas, dibujarLinea(), ya que la necesitaremos en las funciones de dibujarHorca() y dibujarAhorcado().
Para dibujar una línea se utilizan siempre los siguientes códigos:
1.- ctx.beginPath (); --- se utiliza para comenzar un nuevo trazo en el lienzo, sería algo así como coger un lápiz y prepararse para dibujar.
2.- ctx.moveTo (40, 250); --- establece el punto de partida de la línea, indicándole como parámetro las coordenadas x=40 e y=250. Sería como colocar el lápiz justo en ese punto para comenzar a dibujar.
3.- ctx.lineTo (150, 250); --- establece el punto final de la línea, indicándole en este caso el punto final con las coordenadas x=150 e y=250. Esto no dibuja la línea, sólo establece el punto donde terminará.
4.- ctx.stroke (); --- traza la línea desde el punto de partida hasta el punto final utilizando los valores que acabamos de establecer.
En este caso se dibujaría una línea horizontal, ya que los valores del eje vertical (y) no han cambiado, pero sí los del eje horizontal (x).
Función dibujarLínea
Teniendo en cuenta que para cada línea a dibujar se utilizan siempre los mismos cuatro comandos, y que lo único que varía son los valores de los ejes x e y, lo más eficiente sería crear una función a la que le pasemos esos parámetros. La invocaríamos cada vez que necesitemos dibujar una línea, sin necesidad de escribir los cuatro comandos una y otra vez, lo que nos dejaría un código demasiado extenso.
Dibujar horca
Dibujar horca
Función dibujar horca
Podríamos hacer una sola función para dibujar tanto horca como ahorcado, pero la horca será una parte estática del dibujo y no queremos actualizarla según el número de intentos. Vamos a comenzar con el dibujo de la horca.
Como vemos, si no hubiésemos hecho la función dibujarLinea(), habríamos tenido que poner cuatro comandos por cada línea y el código habría sido excesibamente largo.
Dibujar ahorcado
Dibujar ahorcado
Función dibujar ahorcado
Ahora crearemos la función dibujarAhorcado(). La diferencia con la anterior (dibujarHorca()) es que esta vez vamos a actualizarla cada vez que verifiquemos una letra.
La haremos funcionar con condicionales. Tenemos 6 intentos y, cada vez que cometamos un fallo, se dibujará una línea (o un círculo en el caso de la cabeza). Por tanto, la condición será el número de intentos.
Haremos por tanto una condición por cada número de intentos, es decir seis condiciones.
La cabeza será lo primero en dibujarse. El número de intentos quedará en 5 cuando cometamos el primer fallo, por tanto se cumplirá la primera condición y dibujará la cabeza. Así se hará progresivamente.
Cuando tengamos un número inferior, también pasará por el primero. El ahorcado se actualiza entero en cada comprobación de letra.
Verificar letra
Verificar letra
Función verificar letra
El siguiente paso es verificar la letra introducida. La función verificarLetra() se encarga de manejar la lógica del juego cuando el jugador ingresa una letra para adivinar la palabra. Sus funciones son: verificar si la letra está presente en la palabra, actualizar el mensaje mostrado al usuario, dibujar el ahorcado en el lienzo, actualizar la visualización de la palabra y verificar si el juego ha llegado a su fin.
Para crear la función seguiremos los siguientes pasos:
1.) var letra = document.getElementById("letterInput").value.toLowerCase();Obtenemos el valor del campo de entrada de texto con el id "letterInput" y lo almacenamos en la variable "letra". Le hemos añadido .toLowerCase() para convertir la letra ingresada a minúscula.
2.) document.getElementById("letterInput").value = "";Limpiamos el campo de entrada de texto después de obtener el valor de la letra ingresada.
3.) if (palabraAdivinar.indexOf(letra) !== -1) Establecemos la condición que verifica si la letra ingresada ("letra") está presente en la palabra a adivinar ("palabraAdivinar") y, si es así, se ejecuta el bloque de código dentro del if.
Función verificar letra
El método .indexOf() del punto 3, se utiliza para buscar la primera aparición de un elemento en un array o en una cadena de texto. Devuelve el índice de la primera ocurrencia del elemento buscado, o devuelve -1 si el elemento no se encuentra en el array o la cadena de texto.
Es por eso que con esta condición lo que hacemos es verificar que el resultado de .indexOf(letra) sea distinto de -1, lo que indica que la letra sí está en la palabra y por eso entra a ejecutar el bloque if.
4.) letrasAdivinadas.push(letra);Dentro del bloque if, añadimos la letra adivinada al array "letras adivinadas". Utilizamos para ello el método .push(), que añade uno o más elementos al final de un array y devuelve la nueva longitud de dicho array.
5.) document.getElementById("message").textContent = "¡Letra correcta!";Actualizamos el contenido del elemento con el id "message" para mostrar un mensaje de "Letra correcta".
Cerramos bloque if.
Función verificar letra
6.) Bloque else. Si la letra no se encuentra en la palabra a adivinar, se ejecuta el bloque de código dentro del else:
intentos--; Reduce el contador de intentos en 1.
document.getElementById("message").textContent = "¡Letra incorrecta!"; Actualiza el contenido del elemento con el id "message" para mostrar un mensaje de "Letra incorrecta".
7.) Llamada a funciones:
dibujarAhorcado(); ---> para dibujar o actualizar el ahorcado en el lienzo.
actualizarPalabra(); ---> llamamos a esta función para actualizar la visualización de la palabra a adivinar en el lienzo, mostrando las letras adivinadas y espacios en blanco para las letras aún no adivinadas.
verificarFinJuego(); ---> Llamamos a esta función para comprobar si el juego ha terminado, bien porque se han adivinado todas las letras o porque se han agotado los intentos.
Actualizar palabra
Actualizar palabra
Función actualizar palabra
Nuestra siguiente función será actualizarPalabra() y se encarga de actualizar en el lienzo la visualización de la palabra a adivinar. Primero recorrerá cada letra de la palabra a adivinar y comprobará si ha sido adivinada o no. Después construirá una cadena de texto donde mostrar las letras adivinadas y espacios en blanco para las letras no adivinadas. Para terminar, actualizará el contenido del elemento "message" en el HTML para mostrar la representación visual de la palabra.
Comencemos la función:
var palabraMostrar = "Palabra a adivinar: "; Declaramos una variable llamada "palabraMostrar" y le asignamos el valor inicial de "Palabra a adivinar: ". Esta variable se utilizará para construir la representación visual de la palabra a adivinar, mostrando las letras adivinadas y espacios en blanco para las letras aún no adivinadas.
Función actualizar palabra
Bloque for:
for (var i = 0; i < palabraAdivinar.length; i++) Usaremos este bucle para recorrer cada letra de la palabra a adivinar. La variable i se utiliza como contador para recorrer el array "palabraAdivinar", que contiene todas las letras de la palabra a adivinar. var letra = palabraAdivinar[i]; En cada iteración, se obtiene la letra correspondiente en la posición i del array y se almacena en la variable "letra".if (letrasAdivinadas.indexOf(letra) !== -1) Verificamos si la letra actual ("letra") está presente en el array "letrasAdivinadas" y si está, entramos.palabraMostrar += letra + " "; Se agrega la letra a la variable "palabraMostrar" seguida de un espacio en blanco. Esto construye la representación visual de la palabra a adivinar, mostrando las letras adivinadas. else Si la letra no está:palabraMostrar += "_ ";Se agrega un guión bajo y un espacio en blanco a la variable "palabraMostrar" para representar una letra no adivinada. Cerramos bloque for
Función actualizar palabra
document.getElementById("message").textContent = palabraMostrar;Para terminar, se actualiza el contenido del elemento con el id "message" en el HTML para mostrar la palabra a adivinar, que se ha construido en la variable "palabraMostrar". Cerramos función. El código sería el siguiente:
Verificarfin juego
Verificarfin juego
Función verificar fin juego
Para terminar nos queda verificar si el juego ha llegado o no a su fin .La función verificarFinJuego() se encargará de verificar si se ha terminado el juego, bien porque el jugador ha agotado todos los intentos y ha perdido, o porque ha adivinado todas las letras y ha ganado. Dependiendo del resultado, se actualiza el contenido del elemento "message" en el HTML para mostrar el mensaje correspondiente.
if (intentos === 0) Con esta condición verificamos si el jugador ha agotado todos los intentos y ha perdido el juego. Si no quedan intentos entramos en el bloque if: document.getElementById("message").textContent ="¡Has perdido! La palabra era: " + palabraAdivinar; Mostramos un mensaje indicando que el jugador ha perdido e incluimos la palabra que había que adivinar (palabraAdivinar) en el mensaje, para que el jugador sepa cuál era la palabra correcta.
Función verificar fin juego
Si la primera condición no se cumple: else if (letrasAdivinadas.length === palabraAdivinar.length) Comprobamos si el número de letras adivinadas es igual al número total de letras en la palabra a adivinar, si se cumple significa que el jugador ha ganado. document.getElementById("message").textContent = "¡Has ganado!"; Se actualiza el mensaje para mostrar al jugador que ha ganado.
Si probamos el juego veremos que todo lo que le hemos pedido funciona perfectamente.
¡Hasta pronto!
¡Hasta pronto!