programm a hangman game in typescript

To program the Hangman game in TypeScript, we can start by creating a class for the game logic. We can then create another class to handle the user interface using DOM manipulation.

Here's some TypeScript code to get started:


index.ts
class Hangman {
  private readonly words: string[];
  private word: string;
  private guessedLetters: string[];

  constructor(words: string[]) {
    this.words = words;
    this.guessedLetters = [];
    this.word = this.getRandomWord();
  }

  private getRandomWord(): string {
    const randomIndex = Math.floor(Math.random() * this.words.length);
    return this.words[randomIndex];
  }

  guessLetter(letter: string): void {
    this.guessedLetters.push(letter);
  }

  get currentCorrectGuesses(): string[] {
    const correctGuesses = this.word.split("").map(() => "");
    
    for (let i = 0; i < correctGuesses.length; i++) {
      if (this.guessedLetters.includes(this.word[i])) {
        correctGuesses[i] = this.word[i];
      }
    }
    
    return correctGuesses;
  }

  get didWin(): boolean {
    return this.currentCorrectGuesses.join("") === this.word;
  }
}

class HangmanUI {
  private game: Hangman;
  private readonly hangmanContainer: HTMLElement;
  private readonly letterButtonsContainer: HTMLElement;

  constructor(container: HTMLElement, game: Hangman) {
    this.game = game;
    this.hangmanContainer = container;
    this.letterButtonsContainer = this.createLetterButtons();
    this.hangmanContainer.appendChild(this.letterButtonsContainer);
    this.hangmanContainer.appendChild(this.createCurrentWordElement());
  }

  private createCurrentWordElement(): HTMLElement {
    const currentWordContainer = document.createElement("div");
    const currentWord = document.createElement("span");
    currentWordContainer.appendChild(currentWord);

    const updateCurrentWord = () => {
      currentWord.textContent = this.game.currentCorrectGuesses.join(" ");
      if (this.game.didWin) {
        currentWordContainer.textContent = "You won!";
      }
    };

    updateCurrentWord();
    this.gameObserver.subscribe(updateCurrentWord);
    return currentWordContainer;
  }

  private createLetterButtons(): HTMLElement {
    const buttons = "abcdefghijklmnopqrstuvwxyz".split("").map((letter) => {
      const button = document.createElement("button");
      button.textContent = letter;
      
      button.addEventListener("click", () => {
        this.game.guessLetter(letter);
        button.disabled = true;
      });
      
      return button;
    });

    const container = document.createElement("div");
    buttons.forEach((button) => container.appendChild(button));
    return container;
  }
}
2436 chars
86 lines

In this code, we have a Hangman class that handles the game's logic, such as randomly choosing a word, tracking guessed letters, and checking if the player has won.

We also have a HangmanUI class that handles the user interface by creating a container element and adding the letter buttons and current word element. It also subscribes to the Hangman class's observer pattern to update the UI whenever the game state changes.

To start a new game, you would create a Hangman instance with an array of words, and a HangmanUI instance with a container element and the game instance.


index.ts
const words = ["typescript", "javascript", "hangman"];
const game = new Hangman(words);
const container = document.getElementById("hangman-container");
const ui = new HangmanUI(container, game);
195 chars
5 lines

Of course, this is just a starting point, and you could add additional features such as score tracking, a drawing of the hangman, or a hint button to reveal a letter.

similar typescript code snippets

threejs platform we game in typescript

plinko game in typescript

create a game of poker in typescript

stocks investing game in typescript

create a function that calculates volume of a cube in typescript

check if enum is valid in typescript

create a generic interface in typescript

store generic into localstorage in typescript

split a provided array into chunks of a provided size in javascript in typescript

a generic function for storing cache into localstorage in typescript

related categories