Debes haber jugado el juego de Wordle. Así es como puede crear su propia versión de Wordle usando JavaScript.

Worlde es un juego popular que cautivó al mundo a principios de 2022. Recrear el juego de Wordle o al menos construir una versión más simple es algo que los desarrolladores que son nuevos en JavaScript deberían considerar.

Cómo funciona Wordle

En Wordle, hay una palabra secreta de cinco letras. El jugador tiene seis intentos y debe adivinar diferentes palabras de cinco letras para ver qué tan cerca está de la palabra secreta.

Después de que el jugador envía una suposición, Wordle usa colores para decirle al jugador qué tan cerca está de la palabra secreta. Si una letra tiene el color amarillo, significa que la letra está en la palabra secreta, pero en la posición incorrecta.

El color verde le dice al usuario que la letra está en la palabra secreta y en la posición correcta, mientras que el color gris le dice al jugador que la letra no está en la palabra.

Configuración del servidor de desarrollo

instagram viewer

El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT. Si desea ver una versión en vivo de este proyecto, puede consultar este manifestación.

El proyecto utiliza el Herramienta de compilación virtual mediante el Interfaz de línea de comandos (CLI) para andamios. Asegúrese de tener Yarn instalado en su computadora porque generalmente es más rápido que el Administrador de paquetes de nodos (NPM). Abre tu terminal y ejecuta el siguiente comando:

hilo crear vite

Esto creará un nuevo proyecto de Vite. El marco debe ser Vainilla y la variante debe establecerse en JavaScript. Ahora ejecuta:

hilo

Esto instalará todas las dependencias necesarias para que el proyecto funcione. Después de esta instalación, ejecute el siguiente comando para iniciar el servidor de desarrollo:

desarrollador de hilo

Configurar el juego y diseñar el teclado

Abra el proyecto en su editor de código, borre el contenido del principal.js y asegúrese de que la carpeta de su proyecto se vea así:

Ahora, reemplace el contenido de la índice.html archivo con el siguiente código repetitivo:

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8" />
<enlacereal="icono"tipo="imagen/svg+xml"href="/vite.svg" />
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0" />
<título>Palabra JStítulo>
cabeza>


<cuerpo>
<divisiónidentificación="aplicación">
<división>
<h1>Clon de Wordleh1>
<divisiónidentificación="control S">
<botónidentificación="reiniciar-btn">Repeticiónbotón>
<botónidentificación="mostrar-btn">Mostrar respuestabotón>
división>
<divisiónidentificación="mensaje">Espere por favor. El juego se está cargando...división>
división>
<divisiónidentificación="interfaz">
<divisiónidentificación="junta">división>
<divisiónclase="teclado">división>
división>
división>
<guiontipo="módulo"origen="/principal.js">guion>
cuerpo>
html>

Para el CSS, diríjase al Repositorio de GitHub de este proyecto y copie el contenido del estilo.css archivo en su propio estilo.css archivo.

Ahora, en la terminal, instale el paquete Toastify NPM ejecutando el siguiente comando:

añadir hilo tostado -S

Toastify es un popular paquete de JavaScript que le permite mostrar alertas al usuario. A continuación, en el principal.js archivo, importe el estilo.css archivo y el tostar utilidad.

importar"./estilo.css"
importar tostar de'tostar-js'

Defina las siguientes variables para facilitar la interacción con los elementos DOM:

dejar tablero = documento.querySelector("#junta");
dejar mensaje = documento.querySelector("#mensaje");
dejar llaves = "QWERTYUIOPASDFGHJKLZXCVBNM".dividir("");
dejar reiniciarBtn = documento.querySelector("#restart-btn");
dejar mostrarBtn = documento.querySelector("#mostrar-btn");
mostrarBtn.setAttribute("desactivado", "verdadero");
teclas.pulsar("Retroceso");
dejar teclado = documento.querySelector(".teclado");

Configuración del tablero de juego

Dado que Wordle es un juego en el que el usuario tiene que adivinar una palabra de cinco letras en seis intentos, defina una variable llamada tableroContenido que contiene una matriz de seis matrices. Luego define las variables fila actual y caja actual para que sea más fácil atravesar tableroContenido.

dejar contenido del tablero = [
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
];
dejar FilaActual = 0;
dejar CajaActual = 0;
dejar palabra secreta;

Para representar el tablero con cinco cuadros en cada una de las seis filas usando elementos HTML, use bucles anidados para iterar y crear los elementos. Finalmente, agréguelos al tablero.

para (dejar yo = 0; yo <= 5; i++) {
dejar fila = documento.createElement('div')
para (dejar y = 0; y <= 4; y++) {
dejar caja = documento.createElement('durar');
 fila.appendChild (caja);
 fila.className = `fila-${yo + 1}`
 }
 tablero.appendChild (fila);
}

Agregar el teclado y escuchar la entrada del teclado

Para crear el teclado, itere a través de las teclas usando para cada, creando un elemento de botón para cada entrada. Establezca el texto del botón en Retroceso si la entrada es *, de lo contrario, configúrelo en el valor de entrada.

Asignar el llave clase al botón, y configure el clave de datos atributo al valor de entrada en mayúsculas. A continuación, agregue un detector de eventos de clic al botón que llama a la función insertar clave con el valor de entrada en mayúsculas.

claves.paracada(entrada => {
dejar clave = documento.createElement("botón");
si (entrada "*") {
 clave.textointerno = "Retroceso";
 } demás {
 key.innerText = entrada;
 }
 clave.className = "llave";
 clave.setAttribute("clave de datos", entrada.toUpperCase());
 clave.addEventListener("hacer clic", () => {
 insertKey (entry.toUpperCase())
 establecerTiempo de espera(() => {
documento.querySelector(`botón[clave-datos=${entrada.toUpperCase()}]`).difuminar();
 }, 250)
 })
 teclado.agregar (clave);
})

Obtener una nueva palabra de una API

Cuando el usuario carga el juego por primera vez, el juego debe obtener una nueva palabra de cinco letras del palabra aleatoria API. Luego, esta palabra se almacena en el palabra secreta variable.

funciónobtenerNuevaPalabra() {
asíncronofunciónbuscarPalabra() {
intentar {
constante respuesta = esperar buscar(" https://random-word-api.herokuapp.com/word? longitud = 5");
si (respuesta.ok) {
constante datos = esperar respuesta.json();
devolver datos;
 } demás {
tirarnuevoError("¡Algo salió mal!")
 }
 } atrapar (error) {
 mensaje.textointerno = `Algo salió mal. \norte${error}\nComprueba tu conexión a Internet.`;
 }
 }
 buscarPalabra().entonces(datos => {
 palabrasecreta = datos[0].toMayúsculas();
 principal();
 })
}

En el bloque de código anterior, el principal La función se ejecuta si la palabra aleatoria se obtiene con éxito. Definir un principal función justo debajo de la obtenerNuevaPalabra función:

funciónprincipal(){
}

Para diseñar cada cuadro en el tablero, necesitará una lista de todos los cuadros en cada fila. Declarar una variable, fila que agarra todas las filas en el DOM. Además, establezca el mensaje estilo de visualización para ninguno:

 filas.paraCada(fila => [...fila.hijos].forEach(niño => boxes.push (niño)))
 cajas.paraCada((caja) => {
 caja.classList.add("vacío");
 })
 mensaje.estilo.pantalla = "ninguno";

A continuación, agregue un tecla Arriba detector de eventos al objeto de la ventana y verifique si la clave liberada es válida. Si es válido, concéntrese en el botón correspondiente, simule un clic y desenfoque después de un retraso de 250 ms:

ventana.addEventListener('tecla Arriba', (e) => {
si (isValidCharacter (e.key)) {
documento.querySelector(`botón[clave-datos=${e.key.toUpperCase()}]`).enfocar();
documento.querySelector(`botón[clave-datos=${e.key.toUpperCase()}]`).hacer clic();
 establecerTiempo de espera(() => {
documento.querySelector(`botón[clave-datos=${e.key.toUpperCase()}]`).difuminar();
 }, 250)
 }
 })

Bajo la tecla Arriba detector de eventos, configure detectores de eventos para dos botones: mostrarBtn y reiniciarBtn. Cuando el jugador hace clic mostrarBtn, mostrar una notificación de brindis con el valor de la palabra secreta variable.

haciendo clic reiniciarBtn recarga la página. Además, asegúrese de incluir un es un personaje válido función para comprobar si una clave es un carácter válido.

 showBtn.addEventListener('hacer clic', () => {
 tostar({
 texto: `¡Muy bien! la respuesta es ${palabrasecreta}`,
 duración: 2500,
 nombre de la clase: "alerta",
 }).mostrarbrindis();
 })
 reiniciarBtn.addEventListener('hacer clic', () => {
 ubicación.recargar();
 })
funciónes un personaje válido(valor) {
devolver (val.coincidencia(/^[a-zA-Z]+$/) && (longitud val. 1 || valor "Retroceso"))
 }

Afuera de principal función, crear un renderBox funcionan y proporcionan tres parámetros: fila (el número de fila), caja (el índice del cuadro dentro de la fila), y datos (el contenido del texto a actualizar).

funciónrenderBox(fila, caja, datos) {
 [...document.querySelector(`.fila-${fila}`).niños][caja].innerText = datos;
}

Manejo de entrada de teclado con una función

Para manejar las entradas clave y actualizar el tablero, cree un insertar clave funcionar con un llave parámetro. La función debe comportarse de acuerdo con el parámetro pasado.

funcióninsertar clave(llave) {
si (llave "Retroceso".toUpperCase() && currentRow < contenidodeltablero.longitud) {
 contenidodeltablero[filaActual][CuadroActual] = 0;
si (CajaActual !== 0) {
 cajaActual--;
 renderBox (fila actual + 1, caja actual, "");
 }
 } demás {
si (filaactual  boardContent[currentRow][currentBox] = clave;
 renderBox (fila actual + 1, caja actual, clave);
 CajaActual++;
 }
si (filaactual < contenidodeltablero.longitud && contenidodeltablero[filaactual][cuadroactual] !== 0) {
 evaluar (filaactual, clave);
 CajaActual = 0;
 filaActual++;
 }
 }
}

Evaluación de la suposición del jugador

Crear un evaluar función que acepta un parámetro de fila. Esta función es responsable de evaluar la conjetura del jugador.

funciónevaluar(fila){
}

Cada juego tiene un Mostrar respuesta botón que aparece solo después de que el usuario haya realizado cuatro intentos. Entonces, en la función, implemente la funcionalidad que hace precisamente eso:

si (fila actual 4) {
 mostrarBtn.removeAttribute('desactivado')
}

Luego defina la variable de adivinanza y una variable de respuesta que verifique si las letras están en la posición correcta.

dejar adivinar = tableroContenido[fila].join('').toUpperCase();
dejar respuesta = palabrasecreta.split("");

El algoritmo de coloreado de mosaicos será útil aquí. Recuerde que un mosaico o letra debe ser verde si está en la palabra y en el lugar correcto.

Si el mosaico está en la palabra pero en el lugar equivocado, el mosaico es amarillo y, finalmente, el color gris es para los mosaicos que no están en la palabra.

dejar colores = adivinar
 .dividir("")
 .mapa((carta, idx) => letra == respuesta[idx]? (respuesta[idx] = FALSO): carta)
 .mapa((carta, idx) =>
 carta
? (idx = respuesta.indexOf (letra)) < 0
? "gris"
: (respuesta[idx] = "amarillo")
: "verde"
);

El bloque de código anterior realiza una comparación elemento por elemento entre el adivinar matriz y el respuesta formación. Según los resultados de esta comparación, el código actualiza el colores formación.

A continuación, defina un establecerColores función que puede tomar en el colores array como parámetro y colorea los mosaicos apropiadamente:

funciónestablecerColor(colores) {
 colores.paraCada((Indice de color) => {
documento.querySelector(`botón[clave-datos=${adivinar[índice].toUpperCase()}]`).style.backgroundColor = color;
documento.querySelector(`botón[clave-datos=${adivinar[índice].toUpperCase()}]`).estilo.color= "negro";
 [...document.querySelector(`.fila-${fila + 1}`).niños][índice].estilo.backgroundColor = color;
 })
}

El juego ya está completo. Todo lo que tiene que hacer ahora es llamar al obtenerNuevaPalabra función, y usted es bueno para ir.

obtenerNuevaPalabra();

Felicidades, acabas de recrear Wordle.

Lleve sus habilidades de JavaScript al siguiente nivel recreando juegos

Aprender un nuevo idioma como principiante no es fácil. Recrear juegos como Tic-tac-toe, Hangman y Wordle en un lenguaje como JavaScript puede ayudar a los principiantes a dominar los conceptos del lenguaje poniéndolos en práctica.