Create a file named index.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
Read More About Wordle Game
The above is the detailed content of Create a Wordle Game in HTML,CSS, and JS. For more information, please follow other related articles on the PHP Chinese website!