JavaScript Tutorial – Create a Simple Word Shuffle Typing Game
- Subject: Javascript Tutorials
- Learning Time: 30 mins
Welcome to this fun JavaScript tutorial. This tutorial we explore how to make a simple typing game directly playable in your browser. We will use only the standard HTML, CSS and JavaScript code to make this game. The premise for the game is very simple, we will load any random amount of words from an array, chose a word from that array and we will scramble or shuffle the letters in that word and display for the user to input the correct word on the screen. This game will keep track of how many times you got a word wrong which will be displayed on the bottom of the screen. Once you got the correct word, it will automatically load up the next word from the list. This will continue on until we reach end of the list and then it will come back to the start of the list and begin again. This game will cover some of the basics of programming an interactive web app using HTML CSS and JavaScript. I hope you find this tutorial helpful.
Lesson Objectives:
- Create a simple typing game that is playable in the web browser
- Use HTML and CSS to structure and style web app page
- Use JavaScript to add interactivity to the page
- Use object variables that can change values inside of a HTML element
- use custom functions
- use arrays to load words to the game
- use key events to trigger when the enter key is pressed
- check the games condition such as whether we guessed the word correctly or not
- loop through the array and begin again when we reached the last word
Video Tutorial
Source Code –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Tutorial - Typing Game - MOO ICT</title>
<style>
body
{
background: lightskyblue;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 30pt;
}
#main
{
width: 1000px;
height: 800px;
border: 2px solid black;
padding: 15px;
text-align: center;
position: relative;
border-radius: 20px;
margin: auto;
margin-top: 2%;
}
input
{
font-size: 40pt;
text-align: center;
border-radius: 5px;
padding: 5px;
}
ul
{
list-style: none;
display: inline-block;
}
li
{
display: inline;
font-weight: bold;
font-size: 30pt;
}
#wordsLength
{
margin-left: 40px;
margin-right: 40px;
color: yellow;
}
#correct
{
color: green;
}
#incorrect
{
color: purple;
}
</style>
</head>
<body>
<div id="main">
<h1 id="word">WORD</h1>
<input type="text" id="input">
<p>Type the correct word in the box</p>
<p>Typing Game by <a href="https://www.mooict.com">MOO ICT</a></p>
<ul>
<li id="correct">Correct: 0</li>
<li id="wordsLength">Words 0 of 0</li>
<li id="incorrect">Incorrect: 0</li>
</ul>
</div>
<script>
word_one = document.getElementById("word");
inputBox = document.getElementById("input");
correct_txt = document.getElementById("correct");
incorrect_txt = document.getElementById("incorrect");
words_count = document.getElementById("wordsLength");
inputBox.addEventListener("keyup", KeyIsUp, false);
secret_words = ["programming", "unclear", "random", "happening", "qualifications", "momentum"];
var score = 0;
var wrong = 0;
var i = 0;
String.prototype.shuffle = function ()
{
var a = this.split("");
var n = a.length;
for(var i = n-1; i > 0; i--)
{
var j = Math.floor(Math.random() * (i + 1));
var tmp = a[i];
a[i] = a[j];
a[j] = tmp;
}
return a.join("");
}
word_one.innerHTML = secret_words[i].shuffle();
function KeyIsUp(e)
{
if(e.key == "Enter" && inputBox.value == secret_words[i])
{
if(i < secret_words.length - 1)
{
i++;
score += 1;
}
else
{
i = 0;
score = 0;
wrong = 0;
}
word_one.innerHTML = secret_words[i].shuffle();
inputBox.value = "";
}
else if(e.key == "Enter")
{
inputBox.value = "";
wrong += 1;
}
UpdateText();
}
function UpdateText()
{
correct_txt.innerHTML = "Correct: " + score;
incorrect_txt.innerHTML = "Incorrect: " + wrong;
words_count.innerHTML = "Words " + (i+1) + " of " + secret_words.length;
}
UpdateText();
</script>
</body>
</html>