How to Implement Word Scramble Game in Js
Creating a Word Scramble Game in HTML, CSS, and JavaScript is a fun way to practice web development skills. Here’s a step-by-step guide to building a simple Word Scramble Game:
The Word Scramble Game is an engaging and educational web-based game where players must unscramble a jumbled word within a given time limit. This game is built using HTML, CSS, and JavaScript, and includes a scoring system to keep track of the player’s performance.
Features:
- Scrambled Word Display: Shows a randomly scrambled word that the player needs to unscramble.
- User Input: Allows the player to input their guess.
- Time Limit: Provides a countdown timer for each round. The player must guess the word before the timer runs out.
- Score Points: Tracks the player’s score, awarding points for each correct guess.
- Feedback: Gives instant feedback on whether the guess was correct or incorrect.
- Next Word Button: Allows the player to move to the next word after a correct guess.
Step 1: Set Up the HTML Structure
Create an index.html file to set up the basic structure of the game, including the container for the scrambled word, input field, buttons, and elements for displaying the timer and score.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Scramble Game / Mycodingtutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>Word Scramble Game</h1>
<div class="info">
<span>Time: <span id="time">30</span>s</span>
<span>Score: <span id="score">0</span></span>
</div>
<div id="scrambled-word" class="scrambled-word"></div>
<input type="text" id="user-input" placeholder="Enter your guess">
<button id="submit-button">Submit</button>
<button id="next-button" style="display:none;">Next Word</button>
<p id="result-message"></p>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Create the CSS File
Create a style.css file to style the game, making it visually appealing and user-friendly.
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.game-container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.info {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.scrambled-word {
font-size: 24px;
margin-bottom: 20px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button#submit-button {
background-color: #28a745;
color: white;
}
button#next-button {
background-color: #007bff;
color: white;
}
#result-message {
font-size: 18px;
margin-top: 20px;
}Step 3: Create the JavaScript File
Create a script.js file to handle the game logic, including scrambling the word, checking the user’s guess, managing the timer, and updating the score.
const words = ['javascript', 'python', 'html', 'css', 'react', 'node', 'express', 'mongodb'];
let currentWord = '';
let scrambledWord = '';
let score = 0;
let time = 30;
let timerInterval;
const scrambledWordElement = document.getElementById('scrambled-word');
const userInput = document.getElementById('user-input');
const submitButton = document.getElementById('submit-button');
const nextButton = document.getElementById('next-button');
const resultMessage = document.getElementById('result-message');
const timeElement = document.getElementById('time');
const scoreElement = document.getElementById('score');
function getRandomWord() {
const randomIndex = Math.floor(Math.random() * words.length);
return words[randomIndex];
}
function scrambleWord(word) {
const scrambledArray = word.split('').sort(() => Math.random() - 0.5);
return scrambledArray.join('');
}
function displayNewWord() {
currentWord = getRandomWord();
scrambledWord = scrambleWord(currentWord);
scrambledWordElement.textContent = scrambledWord;
userInput.value = '';
resultMessage.textContent = '';
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
resetTimer();
startTimer();
}
function updateScore() {
score += 10;
scoreElement.textContent = score;
}
function startTimer() {
timerInterval = setInterval(() => {
time--;
timeElement.textContent = time;
if (time === 0) {
clearInterval(timerInterval);
resultMessage.textContent = `Time's up! The word was ${currentWord}.`;
resultMessage.style.color = 'red';
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}, 1000);
}
function resetTimer() {
clearInterval(timerInterval);
time = 30;
timeElement.textContent = time;
}
submitButton.addEventListener('click', () => {
const userGuess = userInput.value.toLowerCase();
if (userGuess === currentWord) {
resultMessage.textContent = 'Correct!';
resultMessage.style.color = 'green';
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
updateScore();
clearInterval(timerInterval);
} else {
resultMessage.textContent = 'Incorrect, try again.';
resultMessage.style.color = 'red';
}
});
nextButton.addEventListener('click', displayNewWord);
// Display the first word when the page loads
displayNewWord();
Would You Like to Read This Post Also
Explanation
- HTML: Added elements to display the timer and score.
- CSS: Updated styles to include the new timer and score elements.
- JavaScript: Timer: Added functions
startTimerandresetTimerto manage the countdown timer. - Score: Added a function
updateScoreto increase the score when the player guesses correctly. - Game Logic: Updated
submitButtonclick event to handle timer expiration and score update.
Additional Enhancements
- Difficulty Levels: Implement different difficulty levels with varying time limits and word lengths.
- Leaderboard: Create a leaderboard to display the top scores.
- Hints: Provide hints to help players guess the word.
This implementation provides a basic Word Scramble game with a time limit and a scoring system, making the game more challenging and engaging.
Conclusion
Building a Word Scramble Game in HTML, CSS, and JavaScript is a rewarding project that combines fundamental web development skills with interactive game design. This project helps to understand and implement concepts such as DOM manipulation, event handling, and basic game logic in JavaScript, while also allowing for creative styling with CSS.
