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

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

 

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>

 

See also  Login with Instagram using Javascript

 

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

 

See also  jsPDF Tutorial to Convert Specific Div Portion of Page to PDF Document and Download it as Attachment in Javascript Full Project For Beginners

 

Now if you open index.html inside the browser you will see the following output as shown below

 

Leave a Reply