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

Andy is a web and mobile developer who freelances for some of the worlds biggest companies on a variety of projects.

10 comments

  1. Pingback: Meteor lite | Calicastillo

  2. Joe chapman   •  

    Thanks for the overview. P.S, I can’t see the code terminal examples on my iPhone. P.P.S, why don’t you use the prototype?

  3. Pingback: Meteor Resources | narvenblog – there's something about the web…

  4. Dolores   •  

    Hello there! Would you mind if I share your blog with my myspace group?
    There’s a lot of folks that I think would really appreciate your content. Please let me know. Cheers

    • admin   •     Author

      Absolutely – share away :)

  5. This Site   •  

    Everyone loves what you guys tend to be up too.
    This type of clever work and exposure! Keep up the
    very good works guys I’ve added you guys to blogroll.

  6. Pingback: What’s happening with Meteor JS? | Andy Girvan

  7. Dhruv Mehrotra   •  

    FYI It seems that there have been some changes to Meteor. It looks like Meteor.deps.Context has changed to Deps.Computation. So the startUpdateListener function should be changed to.

    this.startUpdateListener = function() {
    var redrawCanvas = function() {
    Deps.autorun(function() {
    var shapes = Shapes.find({})
    shapes.forEach(function(shape) {
    ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;
    ctx.fillRect (shape.positionx, shape.positiony, 20, 20);
    })
    })
    }
    redrawCanvas()
    }

    • Nathan Schuett   •  

      Thanks @ Dhruv Mehrotra for posting that fix. I was getting an error:
      “Uncaught TypeError: Cannot read property ‘Context’ of undefined meteor”

      and your code cleaned it right up.

  8. Pingback: Web Development & Meteor JS Recommended Reading | Andy Girvan

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>