{"id":5567,"date":"2010-10-14T16:52:00","date_gmt":"2010-10-14T16:52:00","guid":{"rendered":"http:\/\/16.52"},"modified":"2012-04-02T23:28:06","modified_gmt":"2012-04-02T23:28:06","slug":"massive-fun-building-scrabb-ly","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/labs\/2010\/10\/massive-fun-building-scrabb-ly\/","title":{"rendered":"Massive Fun: Building Scrabb.ly"},"content":{"rendered":"

This is a guest post by Grant Goodale<\/a>, one of the makers of Scrabb.ly<\/a>, a massively multiplayer online crossword. <\/em><\/p>\n

\u201cOne thing I know: I don’t want to write a chat app.\u201d Four of us \u2014 @railsjedi<\/a>, @aviel<\/a>, @dacort<\/a> and me \u2014 were sitting around the founders co-op offices<\/a>, trying to decide on a project for Node Knockout<\/a>, a 48-hour programming competition designed to showcase the features and inherent scalability of Node<\/a>, a server-side Javascript application server based on Google’s V8 and designed from the ground up for speed and high concurrency. All four of us had day jobs working with Ruby on Rails, client-side Javascript and MongoDB in various fields. We all spent our days worrying about compatibility with older browsers, customer-centric feature roadmaps and business-oriented products – the bread and butter of startups and contractors alike. But this was our weekend, damnit. We wanted to build something fun<\/em>.<\/p>\n

In the end, despite our collective ignorance of game design we decided on a massively multiplayer crossword game similar to a very popular board game. Thanks to the magic of HTML5 WebSockets, everyone playing the game would be playing at once, on a single enormous board. Everyone would see everyone else’s tiles as they were played. Naturally it had to work in any modern HTML5-compliant browser, too – we’re picky that way. We spent an afternoon playtesting using a large collection of physical game boards cut to uniform size. (The looks one gets at a store when buying five copies of the board game are, I suppose, justifiable) A few tweaks to the playing board, some paper UI wireframes and we were ready for code.<\/p>\n

\"\"<\/p>\n

Scrabbly is a Javascript rich client written in jQuery, communicating via a JSON-based API to a pure-Javascript back end running on Node. The game world is stored in MongoDB<\/a> hosted at MongoHQ<\/a> – Scrabbly makes heavy use of the geospatial indexing features MongoDB provides. In order to provide a real-time play experience, Scrabbly notifies game clients of tile and word plays via small JSON messages pushed via Pusher<\/a>, a hosted websocket push service. The generous support of service providers meant we could focus on the app itself rather than installation and setup. Pusher integration was particularly easy – we went from nothing to fully implemented in approximately fifteen minutes.<\/p>\n

One of the advantages of working with Node was the ability to use code in both the client and on the server. We implement most of our game rules in a module that’s also included in the Javascript we send to each client, which allows us to push some gameplay checks out to the client. We reduce the load on the server by rejecting plays that are known to be invalid before they’re sent. (We double check all plays on the server, so cheaters can’t modify the game code in the browser to allow invalid play.)<\/p>\n

Scrabbly went on to win the Popularity prize in NodeKO, missing the top spot by only a fraction of a percent. We’re still actively developing the game; we’ve added a minimap to help players navigate the game world, complete with radar\u2013like pings when players place a tile or word. I highly recommend programming competitions as a means of exploring what’s possible with new technologies. You might be surprised what you can build.<\/p>\n

For a bit more information on Scrabbly, check out the talk I gave at Seattle’s Google Technology User Group last month (thanks to TechFlash<\/a> for recording the video).<\/p>\n

<\/embed><\/object><\/p>\n","protected":false},"excerpt":{"rendered":"

This is a guest post by Grant Goodale, one of the makers of Scrabb.ly, a massively multiplayer online crossword. \u201cOne thing I know: I don’t want to write a chat app.\u201d Four of us \u2014 @railsjedi, @aviel, @dacort and me … Continue reading<\/a><\/p>\n","protected":false},"author":1438,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20250],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/5567"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/users\/1438"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/comments?post=5567"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/5567\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/media?parent=5567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/categories?post=5567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/tags?post=5567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}