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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
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