suchen

Heim >Web-Frontend >js-Tutorial >Erstellen Sie ein Wordle-Spiel in HTML, CSS und JS

Erstellen Sie ein Wordle-Spiel in HTML, CSS und JS

WBOY
WBOYOriginal
2024-09-08 22:30:33903Durchsuche

Create a Wordle Game in HTML,CSS, and JS

Erstellen Sie eine Datei mit dem Namen 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>

Erstellen Sie eine Datei mit dem Namen „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;
}

Erstellen Sie eine Datei mit dem Namen 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);

Sie können auch direkt klonen: https://github.com/prince-dev007/wordle-game

Lesen Sie mehr über Wordle Game

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Wordle-Spiel in HTML, CSS und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html JS github https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：npm vs. Yarn: Hauptunterschiede und detaillierter VergleichNächster Artikel：npm vs. Yarn: Hauptunterschiede und detaillierter Vergleich

In Verbindung stehende Artikel

Mehr sehen