TypeScript Tutorial: Building a Simple Interactive Game of 21

Written by

learnmodernjavascript

in

Ever wanted to build your own game? How about a classic like Blackjack (also known as 21)? It’s a game that’s easy to learn but offers plenty of strategic depth. In this tutorial, we’ll dive into building a simplified, interactive version of Blackjack using TypeScript. We’ll cover everything from setting up the project to handling user input and calculating the outcome. By the end, you’ll have a functional game and a solid understanding of how to use TypeScript to create interactive applications.

Why TypeScript for Game Development?

TypeScript, a superset of JavaScript, brings several advantages to game development, especially when starting out:

  • Type Safety: Catches errors early, during development, preventing runtime surprises.
  • Code Completion: Offers intelligent suggestions, making coding faster and more efficient.
  • Readability: Improves code clarity and maintainability.
  • Scalability: Enables you to manage larger projects more effectively.

While JavaScript can certainly be used, TypeScript’s features are particularly helpful for beginners, allowing them to focus on game logic rather than debugging type-related issues.

Setting Up Your Project

Let’s get started by setting up our project. You’ll need Node.js and npm (Node Package Manager) installed on your system. If you don’t have them, download and install them from the official Node.js website.

1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your project. Navigate into it.

mkdir blackjack-game
cd blackjack-game

2. Initialize npm: Initialize a new npm project. This will create a `package.json` file to manage our project dependencies.

npm init -y

3. Install TypeScript: Install TypeScript globally or locally (recommended for project-specific dependencies):

npm install typescript --save-dev

4. Create a `tsconfig.json` file: This file configures the TypeScript compiler. Run the following command to generate a basic `tsconfig.json` file.

npx tsc --init

5. Create a Source File: Create a file named `index.ts` in your project directory. This is where we’ll write our game logic.

Core Game Logic: Data Structures and Functions

Now, let’s define the fundamental components of our game. We’ll create data structures to represent a card, a deck of cards, and the players (dealer and user). We’ll also define functions to handle shuffling the deck, dealing cards, calculating the hand value, and managing the game flow.

Defining the Card and Deck

First, let’s define a `Card` interface and a `Deck` class:

// index.ts

// Define the suits and ranks
const suits = ['Hearts', 'Diamonds', 'Clubs', 'Spades'];
const ranks = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];

// Define a Card interface
interface Card {
  suit: string;
  rank: string;
  value: number;
}

// Deck class
class Deck {
  cards: Card[];

  constructor() {
    this.cards = [];
    this.createDeck();
    this.shuffleDeck();
  }

  // Create a standard 52-card deck
  createDeck() {
    for (const suit of suits) {
      for (const rank of ranks) {
        let value = parseInt(rank);
        if (rank === 'J' || rank === 'Q' || rank === 'K') {
          value = 10;
        } else if (rank === 'A') {
          value = 11; // Aces can be 1 or 11, we'll handle this later
        }
        this.cards.push({ suit, rank, value });
      }
    }
  }

  // Shuffle the deck using the Fisher-Yates shuffle algorithm
  shuffleDeck() {
    for (let i = this.cards.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]]; // Swap elements
    }
  }

  // Deal a card from the deck
  dealCard(): Card | undefined {
    return this.cards.pop();
  }
}

Explanation:

  • `Card` interface: Defines the structure of a card with `suit`, `rank`, and `value` properties.
  • `suits` and `ranks`: Arrays that hold the suits and ranks of the cards.
  • `Deck` class: Represents the deck of cards.
  • `createDeck()`: Creates a standard 52-card deck and assigns values to each card.
  • `shuffleDeck()`: Shuffles the deck using the Fisher-Yates shuffle algorithm.
  • `dealCard()`: Removes and returns the top card from the deck.

Player and Hand

Let’s define a basic `Hand` interface and a `Player` interface to represent the player’s hands and player data.


interface Hand {
  cards: Card[];
  value: number;
  displayHand(): string;
  calculateValue(): number;
}

interface Player {
  name: string;
  hand: Hand;
  isDealer: boolean;
}

// Hand implementation
class SimpleHand implements Hand {
  cards: Card[];
  value: number;

  constructor() {
    this.cards = [];
    this.value = 0;
  }

  displayHand(): string {
    return this.cards.map(card => `${card.rank} of ${card.suit}`).join(', ');
  }

  calculateValue(): number {
    this.value = 0;
    let aceCount = 0;
    for (const card of this.cards) {
      this.value += card.value;
      if (card.rank === 'A') {
        aceCount++;
      }
    }

    // Adjust for Aces
    while (this.value > 21 && aceCount > 0) {
      this.value -= 10;
      aceCount--;
    }
    return this.value;
  }
}

Explanation:

  • `Hand` interface: Defines the structure of a hand with methods for displaying and calculating its value.
  • `Player` interface: Defines the structure of a player with a name, hand, and a boolean indicating if the player is the dealer.
  • `SimpleHand` class: Implements the `Hand` interface, storing cards, and calculating and displaying the hand’s value, including handling Aces.

Game Setup and Dealing

Now we create the game and set up the initial deal.


// Game class
class BlackjackGame {
  deck: Deck;
  dealer: Player;
  player: Player;
  gameOver: boolean;
  winner: string | null;

  constructor(playerName: string) {
    this.deck = new Deck();
    this.dealer = {
      name: 'Dealer',
      hand: new SimpleHand(),
      isDealer: true,
    };
    this.player = {
      name: playerName,
      hand: new SimpleHand(),
      isDealer: false,
    };
    this.gameOver = false;
    this.winner = null;
    this.dealInitialCards();
  }

  dealInitialCards() {
    this.dealCard(this.player);
    this.dealCard(this.dealer);
    this.dealCard(this.player);
    this.dealCard(this.dealer);
  }

  dealCard(player: Player) {
    const card = this.deck.dealCard();
    if (card) {
      player.hand.cards.push(card);
      player.hand.calculateValue();
    }
  }

  // Add methods for game logic here...
}

Explanation:

  • `BlackjackGame` class: Manages the game state and logic.
  • `constructor()`: Initializes the game, creates a deck, and creates dealer and player objects.
  • `dealInitialCards()`: Deals two cards to both the player and the dealer.
  • `dealCard()`: Deals a single card to a specified player.

Implementing Game Actions

Let’s implement the actions a player can take: hit (draw a card) and stand (end their turn). We’ll add these methods to our `BlackjackGame` class.


  hit(player: Player) {
    if (!this.gameOver) {
      this.dealCard(player);
      this.checkBust(player);
      this.checkWinConditions();
    }
  }

  stand() {
    if (!this.gameOver) {
      this.dealerPlays();
      this.checkWinConditions();
    }
  }

  dealerPlays() {
    while (this.dealer.hand.value  21) {
      this.gameOver = true;
      if (player.isDealer) {
        this.winner = this.player.name;
      } else {
        this.winner = this.dealer.name;
      }
    }
  }

  checkWinConditions() {
    if (this.gameOver) return;

    if (this.player.hand.value > 21) {
      this.gameOver = true;
      this.winner = this.dealer.name;
    } else if (this.dealer.hand.value > 21) {
      this.gameOver = true;
      this.winner = this.player.name;
    } else if (this.player.hand.value === 21) {
      this.gameOver = true;
      this.winner = this.player.name;
    } else if (this.dealer.hand.value === 21) {
      this.gameOver = true;
      this.winner = this.dealer.name;
    } else if (this.gameOver) {
      this.determineWinner();
    }
  }

  determineWinner() {
    if (this.player.hand.value > this.dealer.hand.value) {
      this.winner = this.player.name;
    } else if (this.dealer.hand.value > this.player.hand.value) {
      this.winner = this.dealer.name;
    } else {
      this.winner = 'Push'; // Tie
    }
    this.gameOver = true;
  }

Explanation:

  • `hit(player: Player)`: Deals a card to the player.
  • `stand()`: Ends the player’s turn and lets the dealer play.
  • `dealerPlays()`: The dealer draws cards until their hand value is 17 or higher.
  • `checkBust(player: Player)`: Checks if a player has busted (hand value > 21).
  • `checkWinConditions()`: Checks all win conditions, including whether a player has reached 21, or if the game is over.
  • `determineWinner()`: Determines the winner based on the final hand values.

User Interface (Simplified Console-Based)

For this tutorial, we’ll create a simple console-based user interface. This will allow the user to interact with the game by entering commands like ‘hit’ or ‘stand’.


// Helper function to read user input (Node.js specific)
import * as readline from 'readline';

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

function askQuestion(query: string): Promise {
  return new Promise(resolve => {
    rl.question(query, resolve);
  });
}

async function playGame() {
  const playerName = await askQuestion('Enter your name: ');
  const game = new BlackjackGame(playerName);

  // Game loop
  while (!game.gameOver) {
    // Display hands
    console.log(`
Dealer's hand: ${game.dealer.hand.cards[0].rank} of ${game.dealer.hand.cards[0].suit}, ?`);
    console.log(`${game.player.name}'s hand: ${game.player.hand.displayHand()} (Value: ${game.player.hand.value})`);

    // Get player action
    const action = await askQuestion('Hit or stand? (hit/stand): ');

    if (action.toLowerCase() === 'hit') {
      game.hit(game.player);
    } else if (action.toLowerCase() === 'stand') {
      game.stand();
    } else {
      console.log('Invalid input. Please enter "hit" or "stand".');
      continue;
    }

    // Check game over and display results
    if (game.gameOver) {
      console.log(`
Dealer's hand: ${game.dealer.hand.displayHand()} (Value: ${game.dealer.hand.value})`);
      console.log(`${game.player.name}'s hand: ${game.player.hand.displayHand()} (Value: ${game.player.hand.value})`);
      if (game.winner === 'Push') {
        console.log('Push! (Tie)');
      } else {
        console.log(`Winner: ${game.winner}`);
      }
    }
  }

  rl.close();
}

playGame();

Explanation:

  • Uses the `readline` module to get user input from the console.
  • Prompts the user for their name.
  • Displays the dealer’s hand (with one card hidden) and the player’s hand.
  • Asks the player for their action (hit or stand).
  • Calls the appropriate game methods based on the player’s input.
  • Displays the final hands and the winner when the game is over.

Running the Game

To run the game, use the following commands in your terminal:

tsc index.ts
node index.js

This will first compile the TypeScript code into JavaScript using the TypeScript compiler (`tsc`) and then run the generated JavaScript file using Node.js.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make and how to avoid them:

  • Incorrect Type Definitions: Ensure your types match the data you’re using. Use the correct types (e.g., `number`, `string`, `boolean`, `Card`) and interfaces. TypeScript will catch these errors during compilation.
  • Incorrect Logic: Double-check your game logic. Test different scenarios to ensure your code handles all cases correctly (e.g., handling Aces, busting, and determining the winner). Use the debugger in your IDE to step through your code and identify logic errors.
  • Forgetting to Handle Aces: Remember that an Ace can be worth 1 or 11. Implement the logic to adjust the Ace’s value accordingly in the `calculateValue()` method.
  • Ignoring Edge Cases: Consider edge cases, such as when the deck runs out of cards (though this is less likely in a simplified game). Add checks to handle these situations gracefully.
  • Not Using Comments: Add comments to explain your code, especially complex parts. This will help you and others understand the code later.

Enhancements and Next Steps

This is a basic implementation. Here are some ideas to enhance your Blackjack game:

  • More Sophisticated UI: Build a graphical user interface (GUI) using a framework like React, Vue, or Angular.
  • Betting: Implement betting functionality.
  • Splitting and Doubling Down: Add the ability to split pairs and double down on your bet.
  • More Players: Allow multiple players to play against the dealer.
  • Scorekeeping: Keep track of the players’ scores over multiple rounds.
  • Error Handling: Implement more robust error handling to handle invalid user inputs or unexpected situations.
  • Testing: Write unit tests to ensure that the game logic works correctly.

Summary / Key Takeaways

You’ve successfully built a simplified, interactive Blackjack game using TypeScript. You’ve learned how to:

  • Set up a TypeScript project.
  • Define data structures and classes for the game components (cards, deck, player).
  • Implement game logic for dealing, hitting, standing, and determining the winner.
  • Create a basic console-based user interface.

This tutorial provides a solid foundation for understanding game development with TypeScript. Remember that practice is key. Try experimenting with the code, adding features, and exploring different game mechanics. By building projects like this, you’ll deepen your understanding of TypeScript and improve your programming skills.

FAQ

Q: Why use TypeScript instead of JavaScript for this game?

A: TypeScript offers type safety, code completion, and better readability, which helps catch errors early and makes the code easier to maintain, especially for beginners.

Q: How can I debug my TypeScript code?

A: Most IDEs (like VS Code) have built-in debuggers for TypeScript. Set breakpoints in your code and step through it to identify and fix errors.

Q: How do I handle Aces in Blackjack?

A: Aces can be worth 1 or 11. In the `calculateValue()` method, keep track of the number of Aces in the hand and adjust the hand value accordingly if the value exceeds 21.

Q: Can I add betting to the game?

A: Yes! You would need to add variables to store the player’s bankroll and their bet, and modify the game logic to handle betting before each round.

Q: What are some good resources to learn more about TypeScript?

A: The official TypeScript documentation, online courses on platforms like Udemy or Coursera, and the TypeScript handbook are excellent resources.

By following these steps, you’ve taken your first steps into the exciting world of game development with TypeScript. With each line of code, you’re not just building a game; you’re honing your skills, learning new concepts, and paving the way for more complex and engaging projects. The journey of a thousand lines of code begins with a single, well-placed function call, and yours has just begun.

More posts