Building online multiplayers games with Meteor [codes + tutorials] - 7

This is the 7th post of a blog series. Please refer to the introductory post for the series introduction.

Source Code

Source code at the end of the previous part:

Source code at the end of the this part:

Wrapping up

Thank you for following through the series of Building online multiplayers games with Meteor so far.

The primary focus of this tutorial series is to demonstrate the power of Meteor in terms of building online multiplayers games. I hope this act as a good starting point for whoever interested in trying out this great framework. Because of this objective, I have tried to skip non core features as much as possible.

Tidying up the UI

However, I understand that some people might want to kick start a project immediately with a boilerplate project, so I have tidy up a bit more, and you can find the updated source at the beginning of this post. Let me give a brief summary on the changes:

CSS framework

Unless you are a design guru, it's always easy to kick start a project with the help of CSS framework, so your page will look reasonably decent right away. Personally, I'm big fan of Semantic UI, so I have installed a semantic ui package:

$ meteor add semantic:ui-css
using SCSS instead of CSS

Maintaining plain CSS stylesheets is painful, so I would recommend using SCSS instead. It allows you to structure the style rules more elegantly. To use SCSS in your Meteor project, you can add the following package:

$ meteor add fourseven:scss
Logout button

For the sake of completeness, we have included a Logout button on the header bar. I also added error message in the <LoginForm>

Small bug fix

I have realized that there is a bug on the publications. We also need to publish FINISHED games to the clients, otherwise the <GameBoard> will crashed at the time it finished (since the documents will disappeared). So the file ./imports/api/server/publications.js should be this:

import {GameStatuses} from '../models/game.js';  
import Games from '../collections/games.js';

Meteor.publish('games', function() {  
  // access control: only for loggined-in users
  if (this.userId) { // this.userId is the id of the currently loggined in user
    // filtering: only games with WAITING and STARTED statuses
    return Games.find({status: {$in: [GameStatuses.WAITING, GameStatuses.STARTED, GameStatuses.FINISHED]}});
  } else {
    return null;
  }
});

At the end, the game will look like this:

Start writing your own game

If you want to use this as the boilerplate, or at least want to start your project by referencing the source code. Here is a quick tip on doing that.

I have structured the application in a way that the Game model is completely independent of the framework. In general, I suppose you only need to make changes on three items:

  1. Game models (as in ./imports/api/models/game.js)
  2. Game methods (as in ./imports/api/controllers/gameController.js and ./imports/api/methods/games.js)
  3. UI (as in ./imports/ui/GameBoard.js and ./client/main.scss)

Of course provided that you are satisfied with everything else like the game lobby, which I doubt. :)

Why don't we just do it and see how easy it is!

Creating the Nim game

How does the game work?

Below is the game description from Wikipedia:

Nim is a mathematical game of strategy in which two players take turns removing objects from distinct heaps. On each turn, a player must remove at least one object, and may remove any number of objects provided they all come from the same heap. The goal of the game is to be the player to remove the last object. - from wikipedia

Update the game model

The game model is very similar to the one in Tic-Tac-Toe, with one important change. Instead of userMark on the board, we now do userPick(pileIndex, count).

Likewise, in methods and gameControllers, we will now have userPickGame.

Obviously, the significant amount of changes happened in <GameBoard> and main.scss stylesheet.

Check out this github commit and see the detailed changes: https://github.com/hiukim/meteor-multiplayers-game-tutorial/commit/f47b16a563189feb87efc13812db9df8c45695b7 In total, there is only 84 additions and 119 deletions.

What's next?

This ends the first half of the series. Thanks for following through and I hope you enjoy it! In the second half of the series, I will go into more advanced topics. I want to share my experiences on going from this bare-bone game into a more sophisticated games platform Mattle. Stay tuned!