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>

<!DOCTYPE html>

<html>

<head>

<title>typing game</title>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"

</head>

<body>

<!--[if lt IE 7]>

You are using an <strong>outdated</strong> browser. Please

<a href="#">upgrade your browser</a> to improve your experience.

</p>

<![endif]-->

</button>

<label for="difficulty">🛠️difficulty</label>

<option value="medium">medium</option>

</select>

</div>

</form>

</div>

<h2>✍️Speed typing</h2>

<small>💻type the following word</small>

<input

type="text"

id="text"

autocomplete="off"

placeholder="please type the word here"

💥score: <span id="score">0</span>

</p>

</div>

</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;
}

100

101

102

103

@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);
});

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 = `

<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

Build a Speed Typing Word TypeRacer Game in HTML5 CSS3 and Javascript Full Project For Beginners

Get Started

Leave a Reply Cancel reply

Get Started

Related posts:

You Might Also Like

Javascript Project to Build India Toll Plaza Road Calculator in Browser Using HTML5 & CSS3

Build a Bootstrap 4 Responsive TODO Crud List Web App in Browser Using HTML5 & Javascript Full Project For Beginners

Node.js Handbrake.js Tutorial to Build Video Converter on Command Line Using Javascript Full Project For Beginners

Leave a Reply Cancel reply