<!DOCTYPE html>

Create Your Own Wordle Game with HTML, CSS, and JavaScript

 body { font-family: sans-serif; margin: 0; padding: 20px; } h1, h2, h3 { text-align: center; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .wordle-board { display: grid; grid-template-columns: repeat(5, 50px); grid-template-rows: repeat(6, 50px); gap: 5px; } .tile { width: 50px; height: 50px; border: 2px solid #ccc; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; transition: background-color 0.2s; } .tile.correct { background-color: #6aaa64; /* Green */ } .tile.present { background-color: #c9b458; /* Yellow */ } .tile.absent { background-color: #787c7e; /* Dark Gray */ } <h1> <a name="keyboard-" href="#keyboard-" class="anchor"> </a> keyboard { </h1> display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; } .keyboard-key { width: 40px; height: 40px; border: 1px solid #ccc; border-radius: 5px; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 18px; cursor: pointer; transition: background-color 0.2s; } .keyboard-key.correct { background-color: #6aaa64; /* Green */ } .keyboard-key.present { background-color: #c9b458; /* Yellow */ } .keyboard-key.absent { background-color: #787c7e; /* Dark Gray */ } .message { margin-top: 20px; text-align: center; }

Building Your Own Wordle

// 1. Setup: const board = document.getElementById('wordle-board'); const keyboard = document.getElementById('keyboard'); const message = document.getElementById('message'); const wordLength = 5; // Wordle's standard word length const maxGuesses = 6; // Wordle's standard number of guesses let currentRow = 0; let currentColumn = 0; let wordToGuess = ''; let guessedLetters = []; let gameOver = false; // 2. Choose the Secret Word: function chooseWord() { const words = [ 'crane', 'apple', 'piano', 'house', 'water', 'beach', 'ocean', 'earth', 'train', 'cloud', 'smile', 'music', 'light', 'bread', 'power', 'space', // Add your own words here! ]; const randomIndex = Math.floor(Math.random() * words.length); wordToGuess = words[randomIndex].toUpperCase(); } // 3. Generate the Keyboard: function createKeyboard() { const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const keys = alphabet.split(''); keys.push('ENTER'); keys.push('DELETE'); keys.forEach(key => { const keyElement = document.createElement('div'); keyElement.classList.add('keyboard-key'); keyElement.textContent = key; keyElement.addEventListener('click', () => handleKeyboardInput(key)); keyboard.appendChild(keyElement); }); } // 4. Generate the Board: function createBoard() { for (let i = 0; i < maxGuesses; i++) { for (let j = 0; j < wordLength; j++) { const tile = document.createElement('div'); tile.classList.add('tile'); tile.dataset.row = i; tile.dataset.column = j; tile.addEventListener('click', () => handleTileClick(tile)); board.appendChild(tile); } } } // 5. Event Handlers: // Handle tile clicks (for keyboard-less interaction) function handleTileClick(tile) { if (gameOver || currentRow >= maxGuesses || tile.textContent) return; if (currentColumn < wordLength) { tile.textContent = guessedLetters[currentColumn] || ''; currentColumn++; } } // Handle keyboard input function handleKeyboardInput(key) { if (gameOver) return; if (key === 'ENTER') { handleEnterPress(); } else if (key === 'DELETE') { handleBackspacePress(); } else { handleLetterPress(key); } } // Handle letter presses function handleLetterPress(letter) { if (currentColumn < wordLength) { guessedLetters[currentColumn] = letter; updateBoard(); currentColumn++; } } // Handle backspace press function handleBackspacePress() { if (currentColumn > 0) { currentColumn--; guessedLetters[currentColumn] = ''; updateBoard(); } } // Handle enter press function handleEnterPress() { if (currentColumn === wordLength) { const guessedWord = guessedLetters.join(''); if (guessedWord.length === wordLength) { const result = checkGuess(guessedWord); updateBoard(result); updateKeyboard(result); guessedLetters = []; currentColumn = 0; currentRow++; if (result.includes('correct') && result.length === wordLength) { gameOver = true; message.textContent = 'You guessed it!'; } else if (currentRow >= maxGuesses) { gameOver = true; message.textContent = <code>The word was ${wordToGuess}</code>; } } else { message.textContent = 'Please enter a 5-letter word.'; } } } // 6. Update Board and Keyboard: // Update the visual representation of the board function updateBoard(result = []) { const tiles = board.querySelectorAll('.tile'); for (let i = 0; i < wordLength; i++) { const tile = tiles[currentRow * wordLength + i]; if (tile.textContent) { if (result[i] === 'correct') { tile.classList.add('correct'); } else if (result[i] === 'present') { tile.classList.add('present'); } else if (result[i] === 'absent') { tile.classList.add('absent'); } } } } // Update the keyboard based on the guess result function updateKeyboard(result = []) { const keys = keyboard.querySelectorAll('.keyboard-key'); result.forEach((letter, index) => { const key = keys[letter.charCodeAt(0) - 65]; // A = 65 in ASCII if (key) { if (letter === 'correct') { key.classList.add('correct'); } else if (letter === 'present') { key.classList.add('present'); } else if (letter === 'absent' && !key.classList.contains('present')) { key.classList.add('absent'); } } }); } // 7. Check the Guess: // Compare the guessed word to the secret word and return the result function checkGuess(guessedWord) { let result = []; const wordArray = wordToGuess.split(''); // Check for exact matches (green) for (let i = 0; i < wordLength; i++) { if (guessedWord[i] === wordArray[i]) { result[i] = 'correct'; wordArray[i] = ''; // Mark the letter as used } } // Check for present letters (yellow) for (let i = 0; i < wordLength; i++) { if (result[i] !== 'correct' && wordArray.includes(guessedWord[i])) { result[i] = 'present'; wordArray[wordArray.indexOf(guessedWord[i])] = ''; // Mark the letter as used } else if (result[i] === undefined) { result[i] = 'absent'; } } return result; } // 8. Initialize the Game: chooseWord(); createBoard(); createKeyboard();

Introduction

Welcome to the world of Wordle! This popular word game has captivated players with its simplicity and addictive nature. In this article, we'll delve into the process of creating your own Wordle game using HTML, CSS, and JavaScript.

Why build your own Wordle?

Customization: You can tailor the game to your preferences, choosing different word lists, difficulty levels, and game modes.
Learning: It's an excellent way to enhance your web development skills, specifically in HTML, CSS, and JavaScript, with a fun and engaging project.
Sharing: You can share your creation with friends and family, or even deploy it online for others to enjoy.

Building Your Wordle Game

We'll break down the development process into eight key steps:

1. Setup

HTML Structure:

Create a basic HTML file (index.html) with the following structure:

<!DOCTYPE html>
<html>
<head>
<title>
Wordle Game
</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="wordle-board" id="wordle-board">
</div>
<div id="keyboard">
</div>
<div class="message" id="message">
</div>
</div>
<script src="script.js">
</script>
</body>
</html>

CSS Styling (style.css):
- Style the game elements using CSS. The provided CSS code in the HTML above will give you a basic Wordle layout. You can customize colors, fonts, and spacing to your liking.
JavaScript Logic (script.js):
- Create a JavaScript file (script.js) to handle the game logic, including:
- Choosing a secret word
- Generating the game board and keyboard
- Handling user input (letter presses, enter, backspace)
- Checking the guess and updating the board and keyboard
- Determining game over conditions (correct guess or maximum guesses reached)

2. Choosing the Secret Word

Word List: Create an array of words to use in your game. You can use a pre-existing word list or create your own.
Random Selection: Use Math.random() to randomly select a word from the array.

const words = [
  'crane', 'apple', 'piano', 'house', 'water', 'beach', 'ocean', 'earth',
  'train', 'cloud', 'smile', 'music', 'light', 'bread', 'power', 'space'
];
const randomIndex = Math.floor(Math.random() * words.length);
const wordToGuess = words[randomIndex].toUpperCase();

3. Generating the Keyboard

Keyboard Layout: Create a container for the keyboard (in your HTML) and then dynamically create buttons for each letter, 'ENTER', and 'DELETE' using JavaScript.
Event Listeners: Attach click event listeners to each keyboard button to handle user input.

const keyboard = document.getElementById('keyboard');
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const keys = alphabet.split('');
keys.push('ENTER');
keys.push('DELETE');

keys.forEach(key =&gt; {
  const keyElement = document.createElement('div');
  keyElement.classList.add('keyboard-key');
  keyElement.textContent = key;
  keyElement.addEventListener('click', () =&gt; handleKeyboardInput(key));
  keyboard.appendChild(keyElement);
});

4. Generating the Board

Grid Structure: Use CSS grid layout to create a grid of tiles for the game board. Each tile will represent a letter in the word.
Dynamic Creation: Dynamically create the tiles using JavaScript, setting their row and column properties for later reference.
Event Listeners: Add click event listeners to each tile to allow users to interact with the board directly (optional, as you can also use the keyboard).

const board = document.getElementById('wordle-board');
const maxGuesses = 6; // Wordle's standard number of guesses
const wordLength = 5; // Wordle's standard word length

for (let i = 0; i &lt; maxGuesses; i++) {
  for (let j = 0; j &lt; wordLength; j++) {
    const tile = document.createElement('div');
    tile.classList.add('tile');
    tile.dataset.row = i;
    tile.dataset.column = j;
    tile.addEventListener('click', () =&gt; handleTileClick(tile)); // Optional
    board.appendChild(tile);
  }
}

5. Event Handlers

Key Press Handling (handleKeyboardInput):
- This function will be called whenever a keyboard key is pressed.
- Distinguish between letter keys, 'ENTER', and 'DELETE'.
- For letter keys, store the letter in the guessedLetters array.
- For 'ENTER', check if the word is complete and valid; if so, call checkGuess().
- For 'DELETE', remove the last letter from the guessedLetters array.
Tile Click Handling (handleTileClick):
- This function (optional) will be called when a tile on the board is clicked.
- Allow the user to input a letter into the tile if the current row and column are valid.

let currentRow = 0;
let currentColumn = 0;
let guessedLetters = [];
let gameOver = false;

// Handle keyboard input
function handleKeyboardInput(key) {
  if (gameOver) return;
  if (key === 'ENTER') {
    handleEnterPress();
  } else if (key === 'DELETE') {
    handleBackspacePress();
  } else {
    handleLetterPress(key);
  }
}

// Handle letter presses
function handleLetterPress(letter) {
  if (currentColumn &lt; wordLength) {
    guessedLetters[currentColumn] = letter;
    updateBoard(); // Update the board to reflect the letter
    currentColumn++;
  }
}

// Handle backspace press
function handleBackspacePress() {
  if (currentColumn &gt; 0) {
    currentColumn--;
    guessedLetters[currentColumn] = ''; // Clear the letter at the current position
    updateBoard(); // Update the board to reflect the change
  }
}

// Handle enter press
function handleEnterPress() {
  if (currentColumn === wordLength) {
    const guessedWord = guessedLetters.join('');
    if (guessedWord.length === wordLength) {
      const result = checkGuess(guessedWord);
      updateBoard(result); // Update the board with the result of the guess
      updateKeyboard(result); // Update the keyboard with the result of the guess
      guessedLetters = [];
      currentColumn = 0;
      currentRow++;
      if (result.includes('correct') &amp;&amp; result.length === wordLength) {
        gameOver = true;
        message.textContent = 'You guessed it!';
      } else if (currentRow &gt;= maxGuesses) {
        gameOver = true;
        message.textContent = `The word was ${wordToGuess}`;
      }
    } else {
      message.textContent = 'Please enter a 5-letter word.';
    }
  }
}

// Handle tile clicks (for keyboard-less interaction)
function handleTileClick(tile) {
  if (gameOver || currentRow &gt;= maxGuesses || tile.textContent) return;
  if (currentColumn &lt; wordLength) {
    tile.textContent = guessedLetters[currentColumn] || '';
    currentColumn++;
  }
}

6. Update Board and Keyboard

Board Updates (updateBoard):
- This function is called after each guess to visually update the board.
- It will set the background color of each tile based on the result (correct, present, absent) returned by checkGuess().
Keyboard Updates (updateKeyboard):
- This function is called to visually update the keyboard based on the guess result.
- Highlight letter keys in green, yellow, or gray to indicate their status.

// Update the visual representation of the board
function updateBoard(result = []) {
  const tiles = board.querySelectorAll('.tile');
  for (let i = 0; i &lt; wordLength; i++) {
    const tile = tiles[currentRow * wordLength + i];
    if (tile.textContent) {
      if (result[i] === 'correct') {
        tile.classList.add('correct');
      } else if (result[i] === 'present') {
        tile.classList.add('present');
      } else if (result[i] === 'absent') {
        tile.classList.add('absent');
      }
    }
  }
}

// Update the keyboard based on the guess result
function updateKeyboard(result = []) {
  const keys = keyboard.querySelectorAll('.keyboard-key');
  result.forEach((letter, index) =&gt; {
    const key = keys[letter.charCodeAt(0) - 65]; // A = 65 in ASCII
    if (key) {
      if (letter === 'correct') {
        key.classList.add('correct');
      } else if (letter === 'present') {
        key.classList.add('present');
      } else if (letter === 'absent' &amp;&amp; !key.classList.contains('present')) {
        key.classList.add('absent');
      }
    }
  });
}

7. Check the Guess

checkGuess function: This function compares the guessed word to the secret word and returns an array indicating the status of each letter:
- 'correct': The letter is in the correct position.
- 'present': The letter is in the word but in the wrong position.
- 'absent': The letter is not in the word.
Logic:
1. Exact Matches (Green): Iterate through each letter in the guessed word and compare it to the corresponding letter in the secret word. If they match, mark the result as 'correct' and remove the letter from the secret word array to avoid duplicate yellow highlighting.
2. Present Letters (Yellow): Iterate through each letter in the guessed word again. If the letter is not already marked as 'correct' and is present in the remaining secret word array, mark the result as 'present'. Remove the letter from the secret word array to prevent multiple yellow markings for the same letter.
3. Absent Letters (Gray): For any letter in the guessed word that wasn't marked 'correct' or 'present', mark the result as 'absent'.

// Compare the guessed word to the secret word and return the result
function checkGuess(guessedWord) {
  let result = [];
  const wordArray = wordToGuess.split('');

  // Check for exact matches (green)
  for (let i = 0; i &lt; wordLength; i++) {
    if (guessedWord[i] === wordArray[i]) {
      result[i] = 'correct';
      wordArray[i] = ''; // Mark the letter as used
    }
  }

  // Check for present letters (yellow)
  for (let i = 0; i &lt; wordLength; i++) {
    if (result[i] !== 'correct' &amp;&amp; wordArray.includes(guessedWord[i])) {
      result[i] = 'present';
      wordArray[wordArray.indexOf(guessedWord[i])] = ''; // Mark the letter as used
    } else if (result[i] === undefined) {
      result[i] = 'absent';
    }
  }

  return result;
}

8. Initialize the Game

Run Game Logic: Call the necessary functions to set up the game:
- chooseWord() to select the secret word.
- createBoard() to generate the game board.
- createKeyboard() to generate the keyboard.

// 8. Initialize the Game:

chooseWord();
createBoard();
createKeyboard();

Conclusion

Congratulations! You've successfully built your own Wordle game using HTML, CSS, and JavaScript. You've learned how to:

Create a game board and keyboard using HTML and CSS.
Handle user input using JavaScript event listeners.
Implement the core game logic, including choosing a secret word, checking guesses, and updating the game interface.

Best Practices:

Modular Code: Break your code into well-defined functions for improved readability and maintainability.
Error Handling: Add error handling to address invalid inputs or unexpected situations.
Accessibility: Ensure your game is accessible to all users by using appropriate ARIA attributes and semantic HTML.
Testing: Thoroughly test your game to catch any bugs or errors.

Now, you have the foundation to expand your Wordle game with exciting features:

Custom Difficulty: Implement different word lengths or allow players to choose from multiple word lists.
Game Modes: Add features like "hard mode" where correct letters must be used in subsequent guesses.
Themes: Change the game's appearance by adding themes with different color palettes.

Let your creativity flourish and build the ultimate Wordle experience!

Create a Wordle Game in HTML,CSS, and JS