Word Scramble Game Using HTML, CSS and JavaScript With Source Code

Introduction :

Welcome to the Word Scramble Game project! This simple yet engaging web-based game challenges players to unscramble words and test their vocabulary skills. Developed using HTML, CSS, and JavaScript, this project offers an interactive user interface and provides an enjoyable gaming experience.

Features:

Word Scramble: Players are presented with a scrambled word that they must unscramble to form the correct word.
User Input: An input field allows players to enter their guesses for the scrambled word.
Feedback: Upon submitting a guess, players receive instant feedback indicating whether their guess is correct or incorrect.
New Word: Players can generate a new scrambled word at any time to continue playing.
Dark Mode: A toggleable dark mode option enhances user experience by providing an alternative color scheme.

How to run the source code:

To run the code, you’ll need a text editor to create the HTML, CSS, and JavaScript files, and a web browser to view the game. Here’s a step-by-step guide:

Set Up Files:
- Create three files: index.html, style.css, and script.js.
- Copy the HTML code into index.html, CSS code into style.css, and JavaScript code into script.js.
Open in a Web Browser:
- After saving the files, open index.html in a web browser (Chrome, Firefox, Safari, etc.).
- You can either double-click the index.html file to open it in your default browser or right-click the file and select “Open with” to choose a specific browser.
Play the Game:
- Once the HTML file is opened in the browser, you should see the Word Scramble Game interface.
- You can start playing by typing your guess in the input field and clicking “Submit”. If your guess is correct, it will display “Correct!” otherwise “Incorrect. Try again!”.
- Click “New Word” to generate a new scrambled word to guess.
- You can also toggle between light and dark mode by clicking the “Toggle Dark Mode” button.
Interact with the Game:
- Keep guessing words and enjoying the game! Try to unscramble as many words as you can.

Source code explanation:

HTML (index.html):

The HTML file defines the structure of our web page.
Inside the <body> tag, we have a <div> element with the id “container” which holds all the content.
There’s an <h1> element for the game title.
A <div> with id “word” is where the scrambled word will be displayed.
An <input> element with the id “guess” allows the user to input their guess.
A “Submit” button with id “submit” to submit the guess.
A <div> with id “message” to display feedback messages.
A “New Word” button with id “new-word” to generate a new word to guess.
A “Toggle Dark Mode” button with id “toggle-dark-mode” to switch between light and dark mode.

CSS (style.css):

Defines the styles for various elements in the game.
Sets the font family, background color, and text color for the body.
Provides styling for the container, headings, word display, input field, buttons, and dark mode.
Uses transitions for smooth color changes in dark mode.

JavaScript (script.js):

Defines an array words containing the words to be used in the game.
Functions:
- selectRandomWord(): Selects a random word from the words array.
- scrambleWord(word): Takes a word and returns a scrambled version of it.
- displayScrambledWord(): Displays a scrambled word on the page.
- checkGuess(): Checks if the user’s guess matches the current word and displays feedback.
Event listeners:
- Listens for clicks on the “Submit” button and calls checkGuess() function.
- Listens for clicks on the “New Word” button and generates a new scrambled word.
- Listens for clicks on the “Toggle Dark Mode” button and toggles the dark-mode class on the body.
Initializes the game by displaying a scrambled word when the page loads.

This code creates a simple Word Scramble Game with a user-friendly interface, including a dark mode option for better user experience. Players can guess the scrambled word, receive feedback, and toggle dark mode as desired.