Crie um arquivo chamado estilos.css:

body {    font-family: Arial, sans-serif;    display: flex;    justify-content: center;    align-items: center;    height: 100vh;    margin: 0;    background-color: #f0f0f0;}.container {    text-align: center;}#game-board {    display: grid;    grid-template-columns: repeat(5, 40px);    gap: 10px;    margin-bottom: 20px;}.cell {    width: 40px;    height: 40px;    display: flex;    justify-content: center;    align-items: center;    border: 1px solid #ddd;    font-size: 18px;}.correct {    background-color: #6aaa64;    color: white;}.present {    background-color: #c9b458;    color: white;}.absent {    background-color: #787c7e;    color: white;}

Crie um arquivo chamado script.js:

const possibleWords = [\\'apple\\', \\'brave\\', \\'crane\\', \\'dough\\', \\'eagle\\']; // List of possible wordsconst targetWord = possibleWords[Math.floor(Math.random() * possibleWords.length)]; // Random target wordconst gameBoard = document.getElementById(\\'game-board\\');const guessInput = document.getElementById(\\'guess-input\\');const submitBtn = document.getElementById(\\'submit-btn\\');const message = document.getElementById(\\'message\\');function createBoard() {    for (let i = 0; i < 6; i  ) { // 6 rows for 6 guesses        for (let j = 0; j < 5; j  ) { // 5 columns for 5 letters            const cell = document.createElement(\\'div\\');            cell.classList.add(\\'cell\\');            gameBoard.appendChild(cell);        }    }}function checkGuess(guess) {    const cells = gameBoard.querySelectorAll(\\'.cell\\');    const targetWordArray = targetWord.split(\\'\\');    const guessArray = guess.split(\\'\\');    let index = 0;    for (let i = 0; i < 5; i  ) {        if (guessArray[i] === targetWordArray[i]) {            cells[index].classList.add(\\'correct\\');        } else if (targetWordArray.includes(guessArray[i])) {            cells[index].classList.add(\\'present\\');        } else {            cells[index].classList.add(\\'absent\\');        }        cells[index].textContent = guessArray[i];        index  ;    }}function handleSubmit() {    const guess = guessInput.value.toLowerCase();    if (guess.length !== 5 || !possibleWords.includes(guess)) {        message.textContent = \\'Invalid word. Try again.\\';        return;    }    checkGuess(guess);    guessInput.value = \\'\\';    // Additional game logic (e.g., end game if correct guess or number of attempts) can be added here}createBoard();submitBtn.addEventListener(\\'click\\', handleSubmit);

Você também pode clonar diretamente: https://github.com/prince-dev007/wordle-game

Leia mais sobre o jogo Wordle

","image":"http://www.luping.net/uploads/20241001/172777969166fbd36b7819f.jpg","datePublished":"2024-11-01T09:51:21+08:00","dateModified":"2024-11-01T09:51:21+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Ferramentas on-line
Tutorial de software
Navegação no site
Programação
Primeira página > Programação > Crie um jogo Wordle em HTML, CSS e JS

Crie um jogo Wordle em HTML, CSS e JS

Publicado em 01/11/2024
Navegar:954

Create a Wordle Game in HTML,CSS, and JS

Crie um arquivo chamado index.html:



    
    
    Wordle Game
    


    

        
Wordle Game

Crie um arquivo chamado estilos.css:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    gap: 10px;
    margin-bottom: 20px;
}

.cell {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    font-size: 18px;
}

.correct {
    background-color: #6aaa64;
    color: white;
}

.present {
    background-color: #c9b458;
    color: white;
}

.absent {
    background-color: #787c7e;
    color: white;
}

Crie um arquivo chamado script.js:

const possibleWords = ['apple', 'brave', 'crane', 'dough', 'eagle']; // List of possible words
const targetWord = possibleWords[Math.floor(Math.random() * possibleWords.length)]; // Random target word

const gameBoard = document.getElementById('game-board');
const guessInput = document.getElementById('guess-input');
const submitBtn = document.getElementById('submit-btn');
const message = document.getElementById('message');

function createBoard() {
    for (let i = 0; i 




Você também pode clonar diretamente: https://github.com/prince-dev007/wordle-game



Leia mais sobre o jogo Wordle
Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/devops_den/create-a-wordle-game-in-htmlcss-and-js-4d17?1 Se houver alguma violação, entre em contato com [email protected] para excluir isto
Tutorial mais recente Mais>
ClassificaçãoMais>
Aprenda japonês Aprender coreano Aprenda chinês Aprender língua estrangeira Jogo Problema comum Periféricos de tecnologia IA Tutorial de software Programação Artigo

Estude chinês

FerramentaMais>
Decodificação de imagem base64
pinyin chinês
Codificação Unicode
Compressão de criptografia de ofuscação JS
Ferramenta de criptografia hexadecimal de URL
Ferramenta de conversão de codificação UTF-8
Ferramentas online de codificação e decodificação Ascii
Ferramenta de criptografia MD5
Ferramenta on-line de criptografia e descriptografia de texto Hash/Hash
Criptografia SHA on-line

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3