BlockVsBlock – A basic introduction tutorial to Meteor JS

Meteor.com is a wonderful JavaScript framework which enables developers to make reactive, top-quality web applications in lightning speed. It is a perfect way to get the functionality of a node.js implementation without all the hassle.

In this example, I created a game – the most basic of games! – called Block vs Block. The aim of the game is to place more blocks than anyone else, in the world, ever, by clicking within a dotted area. You can see the final product (and try and win the game) at:

Demo: http://convincingly-magnificent-leaderboard-experiment.meteor.com/

Source: https://github.com/andygirvan/MeteorBlocks

Update: For some unknown reason, the once-working demo has stopped working! I’ll fix this as soon as possible…

Update 2: New blog post about the latest updates to Meteor JS: What’s happening with Meteor JS?

 

Tutorial

Step 1 – Install Meteor on your local computer

First things first, you need to install the Meteor environment onto your local computer. You can enter this into the terminal:

Step 2 – Create a Meteor project and run it

The next step is to use the Meteor environment to create a Meteor project and run it as a server. To do this, enter this into the terminal:

This will initialise the meteor server and it is now accessible in your browser at http://localhost:3000. If port 3000 is unavailable, you can use –port as an option when running the meteor server:

Step 3 – Reorganise

I like to set up my Meteor projects into 3 areas:

  • - General (contains Block-vs-Block.html, Block-vs-Block.css and Block-vs-Block.js)
  • - Server (contains server.js)
  • - Client (contains client.js)

  • Step 4 – Create the HTML and the Game (Canvas)

  • To implement the Meteor JS funtionality, we need a game layer to be able to play with – otherwise there would be no challenge! In this example, I have used basic Canvas techniques to place a blue block on user click. All the functionality for the game was placed into a Game class in Block-vs-Block.js:
  • As well as this, we need to set up the basic HTML structure in Block-vs-Block.html:

Step 5 – Set up the data objects

When a user starts the game, they are associated to a player who can then place Blocks onto the game board. This means we’ll need to create a Player and a Block object, available for the whole application. In Block-vs-Block.js:

Step 6 – Setup the Meteor client functionality

In order for the client to recognise there is a new player who is able to interact with the game object, we need to edit the client.js file and put in the following:

Step 7 – Create a block & associate to the current player

In an earlier step, we had an eventListener for the click event within the canvas. We want to use a similar method to the Player.insert({}) functionality to create, place and associate a new Shape/Block on click. To do this, we want to do:

To draw this new block to the screen, we want to add a draw loop through ALL the shapes in the database in the Canvas redraw method:

If you check your application you should be able to click and create blue squares all over the canvas area. Thats 99% of the game, all we need to do now is show who’s winning…

Step 8 – Create the Leaderboard

Now that the game is up and running, we need to keep track of who has the most blocks. To do this, we need to add a bit of HTML to the Block-vs-Block.html file:

The final thing we need to do now is populate the template. This is done in client.js:

And that’s it!

And that’s it! You should be able to re-load your game and start climbing up the leaderboard to become the BEST at Block vs Block!

The full source code is available on GitHub at: https://github.com/andygirvan/MeteorBlocks and demo at http://convincingly-magnificent-leaderboard-experiment.meteor.com/

To step further into the world of Meteor, here are a few links to some recent tutorials/blogs:
- Build web apps the suspiciously easy way with Meteor.js
- What’s This Meteor Thing?
- Meteor JS