Welcome folks today in this blog post we will be building a speed typing game in javascript. All the full source code of the application is shown below
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>typing game</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
<a href="#">upgrade your browser</a> to improve your experience.
</p>
<![endif]-->
<button id="setting-btn" class="setting-btn">
<i class="fas fa-cog"></i>
</button>
<div id="setting" class="setting">
<form action="" id="setting-form">
<div class="">
<label for="difficulty">🛠️difficulty</label>
<select name="" id="difficulty">
<option value="easy">easy</option>
<option value="medium">medium</option>
<option value="hard">hard</option>
</select>
</div>
</form>
</div>
<div class="container">
<h2>✍️Speed typing</h2>
<small>💻type the following word</small>
<h1 id="word"></h1>
<input
type="text"
id="text"
autocomplete="off"
placeholder="please type the word here"
/>
<p class="time-container">⏲️time left : <span id="time">10s</span></p>
<p id="score-container" class="score-container">
💥score: <span id="score">0</span>
</p>
<div id="end-game-container" class="end-game-container"></div>
</div>
<script src="script.js" async defer></script>
</body>
</html>
Now make an style.css file and copy paste the following code
style.css
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "IM Fell DW Pica SC", serif;
background-color: #99a8b2;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
min-height: 100vh;
}
button {
cursor: pointer;
font-size: 14px;
border-radius: 4px;
padding: 5px 15px;
}
select {
width: 200px;
padding: 5px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
background-color: #e6d5b8;
}
select:focus,
button:focus {
outline: none;
}
.setting-btn {
position: absolute;
bottom: 30px;
left: 30px;
}
.setting {
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #e6d5b8;
background-color: #1f6f8b;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(0);
transition: transform 0.3s ease-in-out;
}
.setting.hide {
transform: translateY(-100%);
}
.container {
background-color: #e6d5b8;
padding: 20px;
border-radius: 15px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
position: relative;
text-align: center;
width: 500px;
}
h2 {
background-color: #99a8b2;
padding: 8px;
border-radius: 5px;
margin: 0 0 40px;
}
h1 {
margin: 0;
}
input {
border: 0;
border-radius: 5px;
font-size: 14px;
width: 300px;
padding: 12px 20px;
margin-top: 10px;
}
.score-container {
position: absolute;
top: 60px;
right: 20px;
}
.time-container {
position: absolute;
top: 60px;
left: 20px;
}
.end-game-container {
background-color: inherit;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
Now make an script.js file and copy paste the following code
script.js
const word = document.getElementById("word");
const text = document.getElementById("text");
const scoreEl = document.getElementById("score");
const timeEl = document.getElementById("time");
const endgameEl = document.getElementById("end-game-container");
const settingBtn = document.getElementById("setting-btn");
const settings = document.getElementById("setting");
const settingsForm = document.getElementById("setting-form");
const difficultySelect = document.getElementById("difficulty");
//list of words
const words = ["apple", "steer", "eight", "drags", "loving"];
//init word
let randomWord;
let score = 0;
let time = 10;
let difficulty =
localStorage.getItem("difficulty") !== null
? localStorage.getItem("difficulty")
: "medium";
//set diff select value
difficultySelect.value = difficulty;
//focus on text
text.focus();
//start count down
const timeInterval = setInterval(updateTime, 1000);
//generate random word
function getRandomWord() {
return words[Math.floor(Math.random() * words.length)];
}
//add word to dom
function addWordToDOM() {
randomWord = getRandomWord();
word.innerHTML = randomWord;
}
addWordToDOM();
//update score
function updateScore() {
score++;
scoreEl.innerHTML = score;
}
//update time
function updateTime() {
time--;
timeEl.innerHTML = time + "s";
if (time === 0) {
clearInterval(timeInterval);
gameOver();
}
}
//game over
function gameOver() {
endgameEl.innerHTML = `
<h1>Time ran out</h1>
<p>Your final score is ${score}</p>
<button onclick="location.reload()">Restart</button>
`;
endgameEl.style.display = "flex";
}
//event
text.addEventListener("input", (e) => {
const insetedText = e.target.value;
if (insetedText === randomWord) {
addWordToDOM();
updateScore();
//clear
e.target.value = "";
if (difficulty === "hard") {
time += 2;
} else if (difficulty === "medium") {
time += 3;
} else {
time += 4;
}
updateTime();
}
});
//setting
settingBtn.addEventListener("click", () => settings.classList.toggle("hide"));
//setting select
settingsForm.addEventListener("change", (e) => {
difficulty = e.target.value;
localStorage.setItem("difficulty", difficulty);
});
Now if you open index.html inside the browser you will see the following output as shown below
