Como construir um clone do Wordle com JavaScript

Worlde é um jogo popular que conquistou o mundo no início de 2022. Recriar o jogo Wordle ou pelo menos construir uma versão mais simples dele é algo que os desenvolvedores iniciantes em JavaScript devem considerar.

Como Funciona o Wordle

Em Wordle, há uma palavra secreta de cinco letras. O jogador tem seis tentativas e deve adivinhar diferentes palavras de cinco letras para ver o quão perto elas estão da palavra secreta.

Depois que o jogador dá um palpite, o Wordle usa cores para dizer ao jogador o quão perto ele está da palavra secreta. Se uma letra tiver a cor amarela, significa que a letra está na palavra secreta, mas na posição errada.

A cor verde informa ao usuário que a letra está na palavra secreta e na posição correta, enquanto a cor cinza informa ao jogador que a letra não está na palavra.

Configurando o servidor de desenvolvimento

O projeto usa o Ferramenta de construção do Vite através do Interface de linha de comando (CLI) para andaimes. Certifique-se de ter o Yarn instalado em seu computador porque geralmente é mais rápido que o Gerenciador de pacotes de nós (NPM). Abra seu terminal e execute o seguinte comando:

fio criar vite

Isso criará um novo projeto Vite. O quadro deve ser Baunilha e a variante deve ser definida como JavaScript. Agora execute:

fio

Isso instalará todas as dependências necessárias para fazer o projeto funcionar. Após esta instalação, execute o seguinte comando para iniciar o servidor de desenvolvimento:

desenvolvedor de fios

Configurando o jogo e projetando o teclado

Abra o projeto em seu editor de código, limpe o conteúdo do main.js arquivo e certifique-se de que a pasta do seu projeto esteja assim:

Agora, substitua o conteúdo do index.html arquivo com o seguinte código clichê:

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8" />
<linkrele="ícone"tipo="imagem/svg+xml"href="/vite.svg" />
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0" />
<título>JS WordleGenericNametítulo>
cabeça>
<corpo>
<diveu ia="aplicativo">
<div>
<h1>Wordle Cloneh1>
<diveu ia="controles">
<botãoeu ia="reiniciar-btn">Repetirbotão>
<botãoeu ia="show-btn">Mostre a respostabotão>
div>
<diveu ia="mensagem">Por favor, aguarde. O jogo está carregando...div>
div>
<diveu ia="interface">
<diveu ia="quadro">div>
<divaula="teclado">div>
div>
div>
<roteirotipo="módulo"origem="/main.js">roteiro>
corpo>
html>

Para o CSS, acesse o Repositório GitHub deste projeto e copie o conteúdo do estilo.css arquivo em seu próprio país estilo.css arquivo.

Agora, no terminal, instale o pacote Toastify NPM executando o seguinte comando:

fio adicionar toastify -S

Toastify é um pacote JavaScript popular que permite mostrar alertas ao usuário. A seguir, no main.js arquivo, importe o estilo.css arquivo e o torrar Utilitário.

importar"./estilo.css"
importar Torrar de'toastify-js'

Defina as seguintes variáveis ​​para facilitar a interação com os elementos DOM:

deixar placa = documento.querySelector("#quadro");
deixar mensagem = documento.querySelector("#mensagem");
deixar chaves = "QWERTYUIOPASDFGHJKLZXCVBNM".dividir("");
deixar reiniciarBtn = documento.querySelector("#restart-btn");
deixar showBtn = documento.querySelector("#show-btn");
showBtn.setAttribute("desabilitado", "verdadeiro");
keys.push("Retrocesso");
deixar teclado = documento.querySelector(".teclado");

Configurando o Tabuleiro do Jogo

Como o Wordle é um jogo em que o usuário deve adivinhar uma palavra de cinco letras em seis tentativas, defina uma variável chamada conteúdo do quadro que contém uma matriz de seis matrizes. Em seguida, defina as variáveis atualLinha e currentBox para facilitar a passagem conteúdo do quadro.

deixar boardContent = [
 [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],
];
deixar atualLinha = 0;
deixar currentBox = 0;
deixar palavra secreta;

Para renderizar o quadro com cinco caixas em cada uma das seis linhas usando elementos HTML, use loops aninhados para iterar e criar os elementos. Por fim, anexe-os ao quadro.

para (deixar eu = 0; eu <= 5; i++) {
deixar linha = documento.createElement('div')
para (deixar y = 0; e <= 4; e++) {
deixar caixa = documento.createElement('período');
 row.appendChild (caixa);
 row.className = `linha-${i + 1}`
 }
 board.appendChild (linha);
}

Adicionando o teclado e ouvindo a entrada do teclado

Para criar o teclado, percorra as teclas usando para cada, criando um elemento de botão para cada entrada. Defina o texto do botão como Backspace se a entrada for *, caso contrário, defina-o como o valor de entrada.

Atribuir o chave class para o botão e defina o chave de dados atributo para o valor de entrada em maiúsculas. Em seguida, adicione um ouvinte de evento de clique ao botão que chama a função inserirchave com o valor de entrada em maiúsculas.

keys.forEach(entrada => {
deixar chave = documento.createElement("botão");
se (entrada "*") {
 key.innerText = "Retrocesso";
 } outro {
 key.innerText = entrada;
 }
 key.className = "chave";
 key.setAttribute("chave de dados", entrada.toUpperCase());
 key.addEventListener("clique", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
documento.querySelector(`botão[data-key=${entry.toUpperCase()}]`).borrão();
 }, 250)
 })
 keyboard.append (tecla);
})

Obtendo uma nova palavra de uma API

Quando o usuário carrega o jogo pela primeira vez, o jogo deve buscar uma nova palavra de cinco letras do palavra aleatória API. Esta palavra é então armazenada no palavra secreta variável.

funçãogetNewWord() {
assíncronofunçãobuscarPalavra() {
tentar {
const resposta = aguardam buscar(" https://random-word-api.herokuapp.com/word? comprimento = 5");
se (resposta.ok) {
const dados = aguardam resposta.json();
retornar dados;
 } outro {
lançarnovoErro("Algo deu errado!")
 }
 } pegar (erro) {
 message.innerText = `Algo deu errado. \n${erro}\nVerifique sua conexão com a Internet.`;
 }
 }
 buscarPalavra().then(dados => {
 palavrasecreta = dados[0].toUpperCase();
 principal();
 })
}

No bloco de código acima, o principal A função é executada se a palavra aleatória for buscada com sucesso. Definir um principal função logo abaixo do getNewWord função:

funçãoprincipal(){
}

Para estilizar cada caixa no quadro, você precisará de uma lista de todas as caixas em cada linha. Declare uma variável, linha que pega todas as linhas no DOM. Além disso, defina o mensagem estilo de exibição para nenhum:

 linhas.forEach(linha => [...row.children].forEach(criança => boxes.push (criança)))
 caixas.paraCada((caixa) => {
 box.classList.add("vazio");
 })
 message.style.display = "nenhum";

A seguir, adicione um teclado ouvinte de evento para o objeto janela e verifique se a chave liberada é válida. Se for válido, foque no botão correspondente, simule um clique e desfoque-o após um atraso de 250ms:

janela.addEventListener('keyup', (e) => {
se (isValidCharacter (e.key)) {
documento.querySelector(`botão[data-key=${e.key.toUpperCase()}]`).foco();
documento.querySelector(`botão[data-key=${e.key.toUpperCase()}]`).clique();
 setTimeout(() => {
documento.querySelector(`botão[data-key=${e.key.toUpperCase()}]`).borrão();
 }, 250)
 }
 })

Debaixo de teclado ouvinte de eventos, configure ouvintes de eventos para dois botões: showBtn e restartBtn. Quando o jogador clicar showBtn, exiba uma notificação toast com o valor do palavra secreta variável.

clicando restartBtn recarrega a página. Além disso, certifique-se de incluir um isValidCharacter função para verificar se uma tecla é um caractere válido.

 showBtn.addEventListener('clique', () => {
 Torrar ({
 texto: `Tudo bem! a resposta é ${secretWord}`,
 duração: 2500,
 nome da classe: "alerta",
 }).showToast();
 })
 restartBtn.addEventListener('clique', () => {
 location.reload();
 })
funçãoisValidCharacter(val) {
retornar (val.match(/^[a-zA-Z]+$/) && (val.comprimento 1 || val "Retrocesso"))
 }

Fora da principal função, crie um renderBox função e fornecer três parâmetros: linha (o número da linha), caixa (o índice da caixa dentro da linha) e dados (o conteúdo do texto a ser atualizado).

funçãorenderBox(linha, caixa, dados) {
 [...document.querySelector(`.row-${linha}`).children][box].innerText = dados;
}

Manipulando a entrada do teclado com uma função

Para lidar com as principais entradas e atualizar o quadro, crie um inserirchave funcionar com um chave parâmetro. A função deve se comportar de acordo com o parâmetro passado.

funçãoinserirchave(chave) {
se (chave "Retrocesso".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
se (caixaatual !== 0) {
 currentBox--;
 renderBox (atualRow + 1, currentBox, "");
 }
 } outro {
se (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = chave;
 renderBox (atualRow + 1, currentBox, chave);
 currentBox++;
 }
se (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 avaliar (currentRow, chave);
 currentBox = 0;
 atualLinha++;
 }
 }
}

Avaliando o palpite do jogador

Criar um Avalie função que aceita um parâmetro de linha. Esta função é responsável por avaliar o palpite do jogador.

funçãoAvalie(linha){
}

Cada jogo tem um Mostre a resposta botão que aparece somente após o usuário ter feito quatro tentativas. Portanto, na função, implemente a funcionalidade que faz exatamente isso:

se (linhaatual 4) {
 showBtn.removeAttribute('desabilitado')
}

Em seguida, defina a variável de palpite e uma variável de resposta que verifica se as letras estão na posição correta.

deixar palpite = boardContent[linha].join('').toUpperCase();
deixar resposta = palavra secreta.split("");

O algoritmo de coloração de ladrilhos será útil aqui. Lembre-se de que uma peça ou letra deve ser verde se estiver na palavra e no local correto.

Se o ladrilho estiver na palavra, mas no lugar errado, o ladrilho é amarelo e, finalmente, a cor cinza é para ladrilhos que não estão na palavra.

deixar cores = palpite
 .dividir("")
 .mapa((carta, idx) => letra == resposta[idx]? (resposta[idx] = falso): carta)
 .mapa((carta, idx) =>
 carta
? (idx = resposta.indexOf (letra)) < 0
? "cinza"
: (resposta[idx] = "amarelo")
: "verde"
);

O bloco de código fornecido acima executa uma comparação elemento por elemento entre o adivinhar matriz e o responder variedade. Com base nos resultados dessa comparação, o código atualiza o cores variedade.

A seguir, defina um definir cores função que pode assumir o cores array como um parâmetro e pinte os ladrilhos apropriadamente:

funçãodefinirCor(cores) {
 cores.paraCada((cor, índice) => {
documento.querySelector(`botão[data-key=${palpite[índice].toUpperCase()}]`).style.backgroundColor = cor;
documento.querySelector(`botão[data-key=${palpite[índice].toUpperCase()}]`).style.color= "preto";
 [...document.querySelector(`.row-${linha + 1}`).children][index].style.backgroundColor = cor;
 })
}

O jogo agora está completo. Agora é só ligar para o getNewWord função, e você está pronto para ir.

getNovaPalavra();

Parabéns, você acabou de recriar o Wordle.

Leve suas habilidades de JavaScript para o próximo nível recriando jogos

Aprender um novo idioma como iniciante não é fácil. A recriação de jogos como Tic-tac-toe, Hangman e Wordle em uma linguagem como JavaScript pode ajudar os iniciantes a dominar os conceitos da linguagem, colocando-os em prática.