thumbnail

Word Scramble Game Using HTML, CSS and JavaScript

Introduction :

The Word Scramble Game is a simple web-based application that challenges users to guess a scrambled word. This project is built using HTML, CSS, and JavaScript. It features a clean user interface, a word scrambling mechanism, user interaction through text input, and feedback on guesses. Additionally, it includes a dark mode toggle to enhance user experience.

Explanation:

Structure

HTML

The HTML structure of the game provides the framework for the content and user interface. Here’s a breakdown of the components:

  • DOCTYPE and HTML Tags: Standard HTML document declaration and root element.
  • Head Section: Includes meta information and links to external CSS.
  • Body Section: Contains the main game elements:
    • Container Div: Wraps the entire game interface.
    • Heading: Displays the game title.
    • Word Div: Shows the scrambled word.
    • Input Field: Allows users to input their guess.
    • Submit Button: Users click to submit their guess.
    • Message Div: Provides feedback on the user’s guess.
    • New Word Button: Generates a new scrambled word.
    • Toggle Dark Mode Button: Toggles between light and dark mode.
  • Script Tag: Links the external JavaScript file.
CSS

The CSS defines the styling and layout of the game, including the light and dark modes:

  • Basic Styling: Sets default font, colors, and transitions.
  • Dark Mode: Styles for the dark mode, changing background and text colors.
  • Container Styling: Centers the game elements and sets margins.
  • Element Styling: Sizes and spaces elements like the heading, word display, input field, and buttons.
  • Hover Effects: Adds interactivity by changing button colors on hover.
JavaScript

The JavaScript file contains the game logic and functionality. Here’s a detailed breakdown:

  • Variables:

    • words: An array of possible words to scramble.
    • currentWord and scrambledWord: Hold the current word and its scrambled version.

  • Functions:

    • selectRandomWord(): Randomly selects a word from the words array.
    • scrambleWord(word): Scrambles the letters of the given word.
    • displayScrambledWord(): Selects a random word, scrambles it, and displays it.
    • checkGuess(): Checks if the user’s guess matches the original word and provides feedback.

  • Event Listeners:

    • Submit Button: Calls checkGuess to verify the user’s guess.
    • New Word Button: Generates and displays a new scrambled word, and resets the input and message.
    • Toggle Dark Mode Button: Toggles the dark mode class on the body element.

  • Initialization: Calls displayScrambledWord() to start the game with a scrambled word.

SOURCE CODE:

HTML (index.html)

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word Scramble Game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <h1>Word Scramble Game</h1>
    <div id="word"></div>
    <input type="text" id="guess" placeholder="Your guess...">
    <button id="submit">Submit</button>
    <div id="message"></div>
    <button id="new-word">New Word</button>
    <button id="toggle-dark-mode">Toggle Dark Mode</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (style.css)

				
					body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.dark-mode body {
  background-color: #333;
  color: #f4f4f4;
}

#container {
  text-align: center;
  margin-top: 50px;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

#word {
  font-size: 32px;
  margin-bottom: 20px;
}

#guess {
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
}

#message {
  margin-top: 10px;
  font-weight: bold;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.dark-mode button {
  background-color: #222;
}

.dark-mode button:hover {
  background-color: #333;
}

JavaScript (index.js)

				
					const words = ['javascript', 'html', 'css', 'python', 'java', 'ruby', 'php', 'swift'];
let currentWord, scrambledWord;

function selectRandomWord() {
  return words[Math.floor(Math.random() * words.length)];
}

function scrambleWord(word) {
  return word.split('').sort(() => Math.random() - 0.5).join('');
}

function displayScrambledWord() {
  currentWord = selectRandomWord();
  scrambledWord = scrambleWord(currentWord);
  document.getElementById('word').innerText = scrambledWord;
}

function checkGuess() {
  const guess = document.getElementById('guess').value.toLowerCase();
  if (guess === currentWord) {
    document.getElementById('message').innerText = 'Correct!';
  } else {
    document.getElementById('message').innerText = 'Incorrect. Try again!';
  }
}

document.getElementById('submit').addEventListener('click', checkGuess);
document.getElementById('new-word').addEventListener('click', () => {
  displayScrambledWord();
  document.getElementById('guess').value = '';
  document.getElementById('message').innerText = '';
});

document.getElementById('toggle-dark-mode').addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

// Initialize game
displayScrambledWord();

OUTPUT:

OUTPUT
Tags: