Typing Game in JavaScript with Source Code

The Typing Game in JavaScript is a simple project designed in JavaScript language using HTML and CSS platform.

This game its a simple mini project for speed style tester games and has a difficulty level such as easy, average, and hard.

Thus, through playing this game, the user can improve their typing speed.

This speed typing game, the users have to type each word to score in the specified number of seconds.

Otherwise, you’re going to lose the game and you just have to type the current word to play again.

Your score will also be reset and the high score for the game will be set.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

Anyway if you want level up your knowledge in programming especially JavaScript Programming, try this new article I’ve made for you Best JavaScript Projects With Source Code For Beginners.

To start creating a Typing Game in JavaScript with Source Code, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

Typing Game Project in JavaScript

Time needed: 5 minutes

Here’s the Steps on How to Create a Typing Game in JavaScript with Source Code

Step 1: Open Sublime Text.
First, after installing sublime text IDE, click “open” to start.
Step 2: Create a HTML file.
Next, click “file” and select “save as” and named it “index.html“.
Step 3: Create a JavaScript file.
Then, click “file” and select “save as” and named it “script.js“.
Step 4: Create a CSS file.
Last, click “file” and select “save as” and named it “style.css“.
Step 5: The actual code.
Finally, You are free to copy the code given below and paste to your different file created.

Code for the index.html in Typing Game in JavaScript with Source Code

In the code given below, which is the code contains the interface of the application. This code will show the form that will be use in html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Itsourcecode 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>
    <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="">
          <h1>Itsourcecode Typing Game</h1>
          <label for="difficulty">Game Difficulty</label>
          <select name="" id="difficulty">
            <option value="easy">Easy</option>
            <option value="average">Average</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">10second</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>

Code for the style.css in Typing Game in JavaScript with Source Code

In the code given below, which is the code contains the interface design of the application. This code will show the form that will be use for designing.

@import url("https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap");
* {
  box-sizing: border-box;
}
body {
  font-family: "Times New Roman", serif;
  background-color: #00cc00;
  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: red;
  color: white;
}
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: darkblue;
  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: darkblue;
  color: white;
  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: #00cc00;
  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;
}

Code for the script.js Typing Game in JavaScript with Source Code

In the code given below, which is the code contains the interface function of the application. This code will show the function of the form that will be use in html.

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 = ["adones", "jude", "kimmy", "adrian", "nikko", "prince", "grace"];

//init word
let randomWord;
let score = 0;
let time = 10;
let difficulty =
  localStorage.getItem("difficulty") !== null
    ? localStorage.getItem("difficulty")
    : "average";
//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();
function updateScore() {
  score++;
  scoreEl.innerHTML = score;
}
function updateTime() {
  time--;
  timeEl.innerHTML = time + "s";
  if (time === 0) {
    clearInterval(timeInterval);
    gameOver();
  }
}
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";
}
text.addEventListener("input", (e) => {
  const insetedText = e.target.value;
  if (insetedText === randomWord) {
    addWordToDOM();
    updateScore();
    e.target.value = "";
    if (difficulty === "hard") {
      time += 2;
    } else if (difficulty === "average") {
      time += 3;
    } else {
      time += 4;
    }

    updateTime();
  }
});
settingBtn.addEventListener("click", () => settings.classList.toggle("hide"));
settingsForm.addEventListener("change", (e) => {
  difficulty = e.target.value;
  localStorage.setItem("difficulty", difficulty);
});

ABOUT PROJECT	PROJECT DETAILS
Project Name :	Typing Game in JavaScript
Project Platform :	JavaScript
Programming Language Used:	php,javascript,html,css
Developer Name :	itsourcecode.com
IDE Tool (Recommended):	Sublime
Project Type :	Web Application
Database:	None
Upload Date:	February 23, 2021

Downloadable Source Code

Download Now

Summary

In summary, the Typing Game in JavaScript with Source Code can be useful to students or professional who wants to learn web development using JavaScript programming language and it is used html and css platform.

This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy coding!

Inquiries

If you have any questions or suggestions about Typing Game in JavaScript with Source Code, please feel free to leave a comment below.