Créer un jeu Wordle en HTML, CSS et JS-js tutoriel-php.cn

Créer un jeu Wordle en HTML, CSS et JS

WBOY

Libérer： 2024-09-08 22:30:33

original

921 Les gens l'ont consulté

Create a Wordle Game in HTML,CSS, and JS

Créez un fichier nommé 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>

Copier après la connexion

Créez un fichier nommé 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;
}

Copier après la connexion

Créez un fichier nommé 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);

Copier après la connexion

Vous pouvez également cloner directement : https://github.com/prince-dev007/wordle-game

En savoir plus sur le jeu Wordle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!