TypeScript Tutorial: Building a Simple Interactive Typing Game

Written by

learnmodernjavascript

in

In the digital age, typing skills are more crucial than ever. From composing emails to writing code, the ability to type quickly and accurately is a valuable asset. But let’s be honest, practicing typing can be a bit… well, boring. That’s where a typing game comes in! In this tutorial, we’ll dive into building a simple, interactive typing game using TypeScript. This project isn’t just a fun exercise; it’s a practical way to learn TypeScript fundamentals while creating something engaging and useful. We will cover everything from setting up the project to handling user input and providing real-time feedback. By the end, you’ll have a fully functional typing game and a solid understanding of TypeScript concepts.

Why TypeScript for a Typing Game?

TypeScript, a superset of JavaScript, brings static typing to the language. This means you can define the types of variables, function parameters, and return values, helping you catch errors early in the development process. This is particularly beneficial in larger projects, but even in a small game like ours, it adds clarity and reduces the chances of unexpected behavior.

  • Type Safety: TypeScript helps prevent runtime errors by catching type-related issues during development.
  • Code Readability: Type annotations make your code easier to understand and maintain.
  • Developer Experience: Features like autocompletion and refactoring tools improve your workflow.

Setting Up Your Project

Let’s get started by setting up our project. We’ll use npm (Node Package Manager) to manage our dependencies and TypeScript to compile our code.

  1. Create a Project Directory: Open your terminal and create a new directory for your project:
mkdir typing-game
cd typing-game
  1. Initialize npm: Initialize a new npm project:
npm init -y
  1. Install TypeScript: Install TypeScript as a development dependency:
npm install typescript --save-dev
  1. Create a TypeScript Configuration File: Create a tsconfig.json file in your project root. This file tells the TypeScript compiler how to compile your code. You can generate a basic one using the following command:
npx tsc --init

This command creates a tsconfig.json file with default settings. You can customize this file to suit your project’s needs. For our game, we’ll keep the default settings for simplicity. A typical tsconfig.json might look like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
  1. Create Your TypeScript File: Create a file named index.ts in your project directory. This is where we’ll write our game logic.

Building the Game Logic

Now, let’s dive into the core of our typing game. We’ll break down the game logic into manageable chunks, starting with the basics.

1. Game State and Data Structures

We need to define the state of our game. This includes things like the words to type, the current word being typed, the score, the time remaining, and whether the game is over. We can represent this with variables and data structures.

// Define the words to type
const words: string[] = [
  "typescript",
  "programming",
  "developer",
  "javascript",
  "coding",
  "algorithm",
  "function",
  "variable",
  "interface",
  "component",
];

// Game state variables
let currentWordIndex: number = 0;
let currentWord: string = words[currentWordIndex];
let typedText: string = "";
let score: number = 0;
let timeLeft: number = 60; // seconds
let gameInterval: number | undefined; // to store the interval ID
let gameOver: boolean = false;

In this code:

  • words: An array of strings representing the words the player needs to type.
  • currentWordIndex: The index of the current word in the words array.
  • currentWord: The word the player is currently typing.
  • typedText: The text the player has typed so far.
  • score: The player’s current score.
  • timeLeft: The time remaining in seconds.
  • gameInterval: Used to manage the game timer.
  • gameOver: A boolean flag to track if the game is over.

2. Displaying the Game

We’ll create a simple HTML structure to display the game elements. This includes the word to type, the typed text, the score, and the time remaining. For simplicity, we’ll keep the styling minimal.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Game</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        #word-display {
            font-size: 2em;
            margin-bottom: 10px;
        }
        #typed-text {
            font-size: 1.5em;
            margin-bottom: 10px;
        }
        #score, #time-left {
            font-size: 1.2em;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="word-display"></div>
        <input type="text" id="typing-input" autofocus>
        <div id="typed-text"></div>
        <div id="score">Score: 0</div>
        <div id="time-left">Time: 60</div>
        <button id="restart-button" style="display:none;">Restart</button>
    </div>
    <script src="./dist/index.js"></script>
</body>
</html>

Save this HTML as index.html in your project directory. This HTML provides the basic structure and styling for our game.

3. DOM Manipulation

We’ll use JavaScript (and TypeScript) to manipulate the DOM (Document Object Model) to update the game’s display. We’ll select the necessary HTML elements and update their content based on the game state.

// Get DOM elements
const wordDisplay = document.getElementById('word-display') as HTMLDivElement;
const typingInput = document.getElementById('typing-input') as HTMLInputElement;
const typedTextDisplay = document.getElementById('typed-text') as HTMLDivElement;
const scoreDisplay = document.getElementById('score') as HTMLDivElement;
const timeLeftDisplay = document.getElementById('time-left') as HTMLDivElement;
const restartButton = document.getElementById('restart-button') as HTMLButtonElement;

// Function to update the display
function updateDisplay() {
  if (wordDisplay) wordDisplay.textContent = currentWord;
  if (typedTextDisplay) typedTextDisplay.textContent = typedText;
  if (scoreDisplay) scoreDisplay.textContent = `Score: ${score}`;
  if (timeLeftDisplay) timeLeftDisplay.textContent = `Time: ${timeLeft}`;
}

In this code:

  • We get references to the HTML elements using document.getElementById().
  • We use type assertions (as HTMLDivElement, as HTMLInputElement, etc.) to tell TypeScript the type of each element. This allows for better type checking.
  • The updateDisplay() function updates the text content of the display elements based on the game state.

4. Handling User Input

We’ll listen for the user’s input in the typing input field and update the game state accordingly. We’ll check if the typed text matches the current word and update the score if it does.

// Event listener for typing input
typingInput.addEventListener('input', (event: Event) => {
  if (gameOver) return; // Prevent input if game is over

  const target = event.target as HTMLInputElement;
  typedText = target.value;

  // Check if the typed text matches the current word
  if (typedText === currentWord) {
    score++;
    currentWordIndex++;
    if (currentWordIndex < words.length) {
      currentWord = words[currentWordIndex];
      typedText = "";
      typingInput.value = ""; // Clear the input field
    } else {
      // Game won!
      gameOver = true;
      if (wordDisplay) wordDisplay.textContent = "Game Won!";
      if (typingInput) typingInput.disabled = true;
      if (restartButton) restartButton.style.display = 'block';
    }
  }
  updateDisplay();
});

Explanation:

  • An event listener is attached to the typingInput element to listen for input events (when the user types).
  • Inside the event handler:
  • We prevent input if the game is over.
  • We get the value of the input field (typedText).
  • If the typedText matches currentWord:
  • The score is incremented.
  • The currentWordIndex is incremented to move to the next word.
  • If there are more words, the currentWord and typedText are updated, and the input field is cleared.
  • If all words have been typed, the game is won, and the game is over.
  • The updateDisplay() function is called to update the UI.

5. Implementing the Timer

We’ll use setInterval() to create a timer that counts down the remaining time. When the timer reaches zero, the game is over.

// Function to start the timer
function startGameTimer() {
  gameInterval = setInterval(() => {
    if (!gameOver) {
      timeLeft--;
      if (timeLeft <= 0) {
        gameOver = true;
        timeLeft = 0;
        clearInterval(gameInterval);
        if (wordDisplay) wordDisplay.textContent = "Game Over!";
        if (typingInput) typingInput.disabled = true;
        if (restartButton) restartButton.style.display = 'block';
      }
      updateDisplay();
    }
  }, 1000); // Update every second
}

Explanation:

  • The startGameTimer() function uses setInterval() to execute a function every 1000 milliseconds (1 second).
  • Inside the interval:
  • The timeLeft is decremented.
  • If timeLeft reaches 0, the game is over. The timer is cleared using clearInterval(), and the UI is updated.
  • updateDisplay() is called to update the UI.

6. Starting and Restarting the Game

We need a way to start the game and restart it when the player wants to play again. We’ll create a function to initialize the game state and start the timer.


// Function to initialize the game
function startGame() {
  currentWordIndex = 0;
  currentWord = words[currentWordIndex];
  typedText = "";
  score = 0;
  timeLeft = 60;
  gameOver = false;
  if (typingInput) typingInput.disabled = false;
  if (restartButton) restartButton.style.display = 'none';

  updateDisplay();
  startGameTimer();
  if (typingInput) typingInput.focus(); // Focus on the input field
}

// Start the game when the page loads
startGame();

// Restart the game on button click
if (restartButton) {
  restartButton.addEventListener('click', () => {
    startGame();
  });
}

Explanation:

  • The startGame() function:
  • Resets the game state variables.
  • Updates the display.
  • Starts the timer.
  • Focuses on the input field.
  • The game is started initially when the page loads.
  • An event listener is added to the restart button to restart the game when clicked.

Compiling and Running Your Game

Now that we’ve written the game logic, let’s compile the TypeScript code and run the game in a web browser.

  1. Compile the TypeScript Code: Open your terminal and navigate to your project directory. Run the following command to compile your TypeScript code into JavaScript:
tsc

This command will create a dist directory (as specified in your tsconfig.json) containing the compiled JavaScript file (index.js).

  1. Open the HTML File in Your Browser: Open the index.html file in your web browser. You should see the game interface.
  1. Start Playing: Start typing the words that appear. The score and time will update in real-time.

Common Mistakes and How to Fix Them

When building a typing game (or any TypeScript project), you might encounter some common issues. Here are a few and how to resolve them:

1. Type Errors

TypeScript’s type system is designed to catch errors during development. If you see type errors in your IDE or during compilation, it means there’s a mismatch between the expected and actual types. For example, if you try to assign a string to a variable that’s declared as a number, you’ll get a type error.

Fix: Carefully review the error message. It will tell you the type mismatch and the line of code where the error occurred. Correct the types to match the expected values. Use type annotations (: string, : number, etc.) to explicitly define the types of variables and function parameters.

2. DOM Element Not Found

This error occurs when you try to select an HTML element using document.getElementById(), but the element doesn’t exist in your HTML. This can happen due to typos in the element’s ID or if the script is running before the HTML elements are loaded.

Fix: Double-check the element’s ID in your HTML and TypeScript code to ensure they match exactly. Make sure your JavaScript/TypeScript code is placed after the HTML elements in your HTML file or that you are using the DOMContentLoaded event to ensure the DOM is fully loaded before your script runs.

3. Timer Issues

Timer-related issues can include the timer not starting, not stopping, or not updating correctly. These issues can arise from incorrect use of setInterval() and clearInterval().

Fix: Ensure that you are calling setInterval() correctly to start the timer and that you are storing the interval ID. Use clearInterval() with the correct interval ID to stop the timer when the game is over or when you want to reset it. Verify that the time decrementing logic is correct and that the display updates are happening within the timer’s interval.

4. Input Handling Problems

If the input field doesn’t respond to user input, or the typed text doesn’t update, there might be problems with your event listeners or how you are handling the input. Ensure that the event listener is correctly attached to the input element and that the input value is being read correctly.

Fix: Double-check that your event listener is correctly attached to the typingInput element. Use console.log() to check if the event handler is firing and to inspect the event.target.value to see what text is being captured. Make sure you are clearing the input field after a correct word if needed.

Key Takeaways and Next Steps

Congratulations! You’ve successfully built a simple, interactive typing game with TypeScript. You’ve learned about:

  • Setting up a TypeScript project.
  • Defining game state and data structures.
  • Manipulating the DOM to update the game display.
  • Handling user input.
  • Implementing a timer.

This project provides a solid foundation for further exploration. Here are some ideas for expanding your game:

  • Add Difficulty Levels: Implement different difficulty levels by varying the word lengths, time limits, or the number of words.
  • Implement a High Score System: Store the player’s high score using local storage.
  • Add Visual Feedback: Provide visual feedback, such as highlighting the correctly typed letters or showing the incorrect ones.
  • Add Sound Effects: Play sound effects when the player types a correct word or when the game is over.
  • Use a Word API: Fetch words from a public API to create a dynamic word list.

FAQ

Here are some frequently asked questions about building a typing game with TypeScript:

  1. Why use TypeScript for a typing game?

    TypeScript adds type safety, code readability, and improved developer experience, helping to catch errors early and make the code easier to maintain.

  2. How do I handle user input?

    Use an event listener on an input field and read the value of the input field when the user types. Compare the input to the target word and update the score and display accordingly.

  3. How do I implement a timer?

    Use setInterval() to create a timer that decrements a time variable every second. When the time reaches zero, the game is over.

  4. How can I improve the game’s design?

    Add visual feedback (highlighting correct letters, etc.), sound effects, difficulty levels, and a high score system to make the game more engaging.

  5. What are some common mistakes?

    Common mistakes include type errors, not finding DOM elements, timer issues, and input handling problems. Review your code carefully and use debugging tools to identify and fix these issues.

Building this typing game is more than just a coding exercise; it is a practical application of TypeScript fundamentals, reinforcing key concepts like data types, DOM manipulation, and event handling. As you further develop and customize this game, you’ll not only enhance your typing skills but also deepen your understanding of TypeScript and web development principles. Embrace the challenges, learn from the mistakes, and enjoy the process of creating a fun and educational application.

More posts