Create a Wordle Game in HTML,CSS, and JS

WBOY
Release: 2024-09-08 22:30:33
Original
787 people have browsed it

Create a Wordle Game in HTML,CSS, and JS

Create a file named index.html:

     Wordle Game  

Wordle Game

Copy after login

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; }
Copy after login

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);
Copy after login

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!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!