Day nine: multiplayer hangman

October 4, 2015

Hangman is one of my favorite games to play. It’s simple, easy and fun. So I created a platform where everyone can play together!

Live demo

This is the very first game I have ever build. Faced a lot of challenges and I loved it!

features

When I started development on this app I knew I wanted to have some kind of waiting room for people to gather. Here everyone waits for the host to choose a solution for the game.

room preview

The first player that joined gets to go first. After he has submit a letter. The next person who joined can answer.

The game is over when either the word has been guessed or there are 10 failed attempts.

game preview

challenges

Implementing the game mechanics got a bit too complex at one point. Meaning duplication and a few functions that were way too big. Especially server methods that involved a game. I decided to use the collection helper package. This allows me to bind methods to the result of a collection. These are the games collection helpers:

Games.helpers({
  badGuesses: function () {
    return _.filter(this.guesses, (letter) => {
      return !_.contains(this.solution.split(''), letter);
    })
  },
  nextPlayer: function () {
    let next = _.indexOf(this.players, this.activePlayer) + 1;
    return this.players[next === this.players.length ? 0 : next];
  },
  getWinner: function () {
    if (this.isGuessed()) {
      return this.activePlayer;
    }

    let badGuesses = this.badGuesses();
    if (badGuesses.length < 10) {
      return;
    } else {
      let room = Rooms.findOne(this.roomId) || {};
      return room.owner;
    }
  },
  isGuessed: function () {
    return _.filter(this.solution.split(''), (letter) => {
      return _.contains(this.guesses, letter);
    }).length === this.solution.length;
  }
});

Thanks to this structure a lot of duplication could be removed and the application got a bit cleaner.

Let me know what you think of my first game by commenting below and please don’t forget to leave a star on the repo.

Comments