This article will demonstrate the creation of a Word Scramble Game using JavaScript. Word Scramble Game is a simple quiz game based on the rearrangement of letter to make a random word and the user have to guess the correct word out of it with the help of provided hint. If the user is able to guess the correct word it gives the result ‘correct’ and if he guesses wrong it shows ‘incorrect’.
On completion, this game will look like this:
Prerequisites:
Approach:
- Create the basic game layout using the HTML tags like divs, headings for titles and scrambled word and input, and buttons for taking user input and verification along with the relevant class names and ids as shown in the code example,
- Then, use those classes and ids to apply to style using the CSS properties like display, align content for structure, padding, margin, font size, background-color, and border to give it a better appearance.
- In JavaScript create a sample list of words and hints. Use the Math.random() method to get a random index to display the word and the hint using the document. getElementById method.
- Before displaying shuffle the letters of the word using math.randon and swap using a custom shuffle function.
- Define a function refresh to refresh the scrambled word and hint when the refresh button is clicked. Use the check function to verify the user input by clicking on the check button and displaying the resulting output.
Example: In this example, we will create a word sample game with a list of sample words and hints using the approach above mentioned.
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</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="root">
<h1 class="title">Word Scramble Game</h1>
<div id="scrambled">
<h2 id="scrambleWord">Word</h2>
<p id="hint"></p>
</div>
<div id="form">
<input id="input" type="text" placeholder="Guess correct word" />
</div>
<h3 id="output">Result:</h3>
<div class="foot">
<button type="button" onclick="check()">
Check
</button>
<button type="button" onclick="refresh()">
Refresh
</button>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
|
CSS
/* style.css */body { display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 50vh;
} .root { font-size: x-large;
color: whitesmoke;
background-color: rgb(57, 151, 57);
box-shadow: 0 2px 5px grey;
padding: 0% 5% 1% 5%;
text-align: center;
border-radius: 5px 0;
} .title { border-bottom: 4px dashed;
border-color: white;
} input { font-size: 20px;
padding-left: 10px;
outline: 2px grey;
} .foot { margin-bottom: 0%;
display: flex;
width: 100%;
} .foot>button { width: 48%;
padding: 1%;
margin: 1%;
background-color: rgb(41, 117, 41);
border-radius: 5px;
border-color: rgb(29, 90, 29);
font-size: large;
} |
Javascript
// script.js const words = [ "react",
"angular",
"javascript",
"bootstrap",
"tailwind",
]; // Respective list of hints const hints = [ "JavaScript framework",
"JavaScript Framework",
"Scripting Language",
"Styling Library",
"Styling Library",
]; // Initialize display word let displayWord = "";
// Function to shuffle letters function shuffle(str) {
strArray = Array.from(str);
for (let i = 0; i < strArray.length - 1; ++i) {
let j = Math.floor(Math.random() * strArray.length);
// Swap letters
let temp = strArray[i];
strArray[i] = strArray[j];
strArray[j] = temp;
}
return strArray.join(" ");
} // Function to check input and display result function check() {
let input = document.getElementById("input");
let output = document.getElementById("output");
if (
input.value.toLocaleLowerCase() ===
displayWord.toLocaleLowerCase()
)
output.innerHTML = "Result: Correct";
else output.innerHTML = "Result: Incorrect";
} // To refresh and show new word function refresh() {
index = Math.floor(Math.random() * 5);
displayWord = words[index];
displayHint = hints[index];
scrambleWord =
document.getElementById("scrambleWord");
scrambleWord.innerText =
shuffle(displayWord).toUpperCase();
let hint = document.getElementById("hint");
hint.innerHTML = "<b>Hint:</b> " + displayHint;
document.getElementById("output").innerText = "Result:";
} // Function call when page load for first time refresh(); |
Output: