1. Montagsmaler - HTML5 / node.js “Draw something” clone


    I wasn’t happy with the flash-based “Draw my thing” and built my own version with node.js, HTML5 an socket.io and deployed it on nodester. Its open source. You can play it here or on Facebook.

    It works on modern browsers and I tested it with Android Opera Mini and the Android browser, too.

    Here is the whole story:

    First, I got pissed off…

    Some weeks ago I came across "Draw my thing" (via the app version “Draw something”). I like it and my girlfriend and I wanted to play it together. When I was on my phone and she was on her laptop, we wanted to start. “Its the same game vendor (OMGPop) and its the same thing. Should work, I guess” way my initial thought. It didn’t. “Draw something” and “Draw my thing” - while being named similarily and utilizing the same game principle, it was not possible to play together using both versions.

    "Meh, okay - I just get my laptop and use that.", I continued. Nevertheless, being flash-based it was pretty slow on my laptop (which is now 4 years old…) and even when trying to play together it was a bad user experience ("Okay, now I’ll send you this game’s link via google talk and then you open it in your browser" "But I am already on OMGpop in the "Draw my thing" screen. Can’t I just get a notification or something?"… and it never really worked to play this game together.

    So I rebuild it with HTML5, node.js and socket.io

    "Come on, that can’t be THAT hard!" went through my head. And so I started.

    I used an HTML5 canvas element, socket.io and node.js for the whole thing.

    When the first player connects, she sees “Waiting for other player” until a second player connects. The two then get in the game, they can save and share their drawings and the game ends, when one of the players disconnect.

    My experience

    It was all so easy and works like a charm. It even works on my Android phone - I just had to write a little wrapper for touch-events.

    The server code is 119 lines Javascript (node.js / socket.io), the client-logic is 195 lines javascript and a bit HTML / CSS.

    I made this open-source, you can find it on GitHub.

    The deployment with nodester was simple, easy and awesome.