Coding With Dawid Watch on YouTube

Build Typing Game with Javascript

4 min read 2 hours ago

Published on Oct 13, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to build a speed typing game using JavaScript. This engaging project will help you improve your typing speed while providing a hands-on experience with key detection, event handling, and basic game mechanics. Whether you're a beginner or looking to refine your skills, this guide will break down the process into manageable steps.

Step 1: Set Up HTML Structure and Basic CSS

Create an index.html file with the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Typing Game</title>
</head>
<body>
    <div id="game">
        <div id="word-display"></div>
        <input type="text" id="input" placeholder="Start typing...">
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Create a styles.css file to style the game:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}
#game {
    text-align: center;
}
#word-display {
    font-size: 24px;
    margin-bottom: 10px;
}
#input {
    font-size: 20px;
    padding: 5px;
}

Step 2: Insert Random Words into the Game

Create an array of words in your script.js file:

const words = ["javascript", "coding", "developer", "programming", "web", "game"];

Write a function to select a random word and display it:

function displayWord() {
    const randomWord = words[Math.floor(Math.random() * words.length)];
    document.getElementById('word-display').textContent = randomWord;
}
displayWord();

Step 3: Add Focus Warning

Set up an event listener to warn the user if the input loses focus:

const input = document.getElementById('input');
input.addEventListener('blur', () => {
    alert("Keep typing to improve your speed!");
});

Step 4: Handle Keyboard Typing Events

Add an event listener for the input event:

input.addEventListener('input', (event) => {
    // Logic for handling input will go here
});

Step 5: Add a Blinking Cursor

Use CSS to create a blinking cursor effect:

#input {
    caret-color: transparent;
}
#input:focus {
    caret-color: black;
}

Step 6: Handle Letter Typing

Inside the input event listener, compare the input with the displayed word:

input.addEventListener('input', (event) => {
    const currentWord = document.getElementById('word-display').textContent;
    if (event.target.value === currentWord) {
        // Logic for correct word entry
        displayWord();  // Display a new word
        input.value = '';  // Clear the input
    }
});

Step 7: Handle Space Key

Implement a check for the space key to manage word completion:

input.addEventListener('keydown', (event) => {
    if (event.key === " ") {
        event.preventDefault(); // Prevent space from being entered in the input
        // Logic for handling space key
    }
});

Step 8: Handle Backspace Key

Manage the backspace functionality to allow letter deletion:

input.addEventListener('keydown', (event) => {
    if (event.key === "Backspace") {
        // Logic to handle backspace
    }
});

Step 9: Implement a Game Timer

Create a countdown timer that limits the game duration:

let timeLeft = 60; // Game duration in seconds
const timer = setInterval(() => {
    if (timeLeft <= 0) {
        clearInterval(timer);
        // Logic for ending the game
    }
    timeLeft--;
}, 1000);

Step 10: Handle Game End Screen

Display a message when the game ends, showing the user’s results:

function endGame() {
    document.getElementById('result').textContent = "Game Over! Your score: ...";
}

Step 11: Show Words Per Minute Result

Calculate and display the user's typing speed at the end of the game:

function showResult() {
    // Logic to calculate WPM
    document.getElementById('result').textContent = `Your WPM: ${wpm}`;
}

Step 12: Add a New Game Button

Create a button that resets the game:

<button id="new-game">New Game</button>

Implement the functionality for the button:

document.getElementById('new-game').addEventListener('click', () => {
    // Logic to reset the game
    displayWord();
    input.value = '';
    timeLeft = 60;
    // Restart timer
});

Conclusion

You have successfully created a speed typing game using JavaScript! This tutorial covered setting up the HTML structure, styling, handling user input, and implementing game mechanics. To enhance your project, consider adding more features, such as different difficulty levels or a scoring system. Explore the source code on GitHub for further insights and improvements. Happy coding!

Table of Contents

Recent