Rumah > Artikel > hujung hadapan web > Cipta Permainan Wordle dalam HTML, CSS dan JS

Cipta Permainan Wordle dalam HTML, CSS dan JS

WBOYasal: 2024-09-08 22:30:33800semak imbas

Create a Wordle Game in HTML,CSS, and JS

Buat fail bernama 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>

Buat fail bernama 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;
}

Buat fail bernama 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);

Anda juga boleh mengklon terus: https://github.com/prince-dev007/wordle-game

Baca Lebih Lanjut Mengenai Permainan Wordle

Atas ialah kandungan terperinci Cipta Permainan Wordle dalam HTML, CSS dan JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html JS github https

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：npm vs yarn: Perbezaan Utama dan Perbandingan MendalamArtikel seterusnya：npm vs yarn: Perbezaan Utama dan Perbandingan Mendalam

Artikel berkaitan

Lihat lagi