Home >Web Front-end >JS Tutorial >Create a Wordle Game in HTML,CSS, and JS

Create a Wordle Game in HTML,CSS, and JS

WBOYOriginal: 2024-09-08 22:30:33933browse

Create a file named index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wordle Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Wordle Game</h1>
        <div id="game-board"></div>
        <input type="text" id="guess-input" maxlength="5" placeholder="Enter your guess">
        <button id="submit-btn">Submit</button>
        <p id="message"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Create a file named styles.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;
}

Create a file named 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 < 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);

You can also directly clone: https://github.com/prince-dev007/wordle-game

Create a Wordle Game in HTML,CSS, and JS

Related articles