Serge Borbit Creator of Mienfield game: Minesweeper MMO based on HTML5 technologies. Front-End Engineer from Lviv, Ukraine.

Today we'd like to announce a new interview section on JSter. We will ask professional JS developers (and open-source) contributors to share their experience, ask for sources of their motivation.

Our guest, @borbit, has taken minesweeper the game to a completely new level. He recreated it in HTML5, making it a complete MMO game. That's right. You can play it with your friends now.

Traditionally developing this sort of games has been an arduous process. These days HTML5 based technologies have provided new alternatives as mienfield.com proves.

What is it like to build HTML5 games? Are the technologies really ready for that? In this interview @borbit shares his experience.

Hi, @borbit. How did you end up developing a MMO version of minesweeper? Can you describe the history of the project?

Hi, @bebraw. I was really inspired by guys from Massively FUN. They created an awesome game called Word2 (wordsquared.com). I liked the idea of an endless puzzle, so I've decided to build something similar. Since I am a big fan of original minesweeper game, the idea immediately came to my mind.

At the beginning, it was a "just for fun" project where I could gain some experience in modern web technologies. My friends and colleagues really liked the idea, they saw a potential in it, so that was huge motivation for me to continue working on Minefield.

What kind of technology do you use? What difficulties have you had during development and how did you solve them?

The biggest challenge for me was implementation of robust server logic. Since it was endless and multiplayer I had to care about fast field generation and preventing of race conditions. The solution to make generation fast was cutting the whole field on certain tiles with specified size (20x20 cells). This approach gave a possibility to "lazy" generate the field only where people were playing. Race conditions are being resolved on the database layer by means of compare-and-swap methodology.

On server side I use Node.js. It is a big, fast-growing platform with fantastic community behind it. Big number of rich, well tested modules let me entirely concentrate on the game implementation. It had almost everything I wanted for implementing Minefield. Also, I am very happy with choice of Redis as a database. It is lightning-fast, advanced key-value store with support of various data structures for all occasions.

On client side I had a few difficulties with graphics implementation. I had to care about speed of field rendering and animations. The whole field is represented as a grid of tiles. Since I coudn't find any suitable library for this kind of UI, I started developing Tiler. Each tile contains three Canvas elements: background layer, foreground layer and animation layer. This is a quite standard approach to canvas drawing optimization, it is being used to avoid unnecessary canvas state changes.

Where did you find the free time for this project? ;)

I've been working on Minefield at my spare time and unfortunately there is always not enough of it. I wish I had more (dreaming about full time job on HTML5 games).

What advice would you give to other JS developers thinking of building their own games?

Let's build awesome multiplayer games! You will definitely get lots of fun developing it!

As we are JavaScript libraries site, please share your favorite libs you use and you'd like to recommend.

81 81 5

Tiler.JS

Library for working with infinite grid of tiles.

6208 6208 980 980 5.00 5.00

Hammer.js

Hammer.js is a javascript library that can be used to control gestures on touch devices. It supports the following gestures: Tap Double tap Hold Drag Swipe Transform (pinch)

4131 4131 713 713 5.00 5.00

MarionetteJS

A composite application framework and infrastructure for Backbone. Make your Backbone applications dance!

17532 17532 4904 4904 4.89 4.89

AngularJs

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test AngularJS teaches the browser how to do dependency injection and inversion of control. Oh yeah and it also helps with server-side communication, taming async callbacks with promises and deferreds; and make client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake.

2060 2060 281 281 4.60 4.60

yepnope.js

A Conditional Script Loader For Your Polyfills, or Regressive Enhancement With Style. A small script loader to help use feature detection to load exactly the scripts that your user needs, not just all the scripts that you think they might need.

1002 1002 77 77

Anima

CSS animations with a soul. With Anima it's easy to animate over a hundred objects at a time. And it's only 5k when gzipped.

3029 3029 203 203 5.00 5.00

Lo-Dash

A drop-in replacement for Underscore.js delivering performance, bug fixes, and additional features.

@borbit, thanks for this interview. We wish good luck to your Minefield and other upcoming JavaScript and HTML5 projects.

We will have more talks with interesting persons making a JavaScript world brighter. Don't miss it. Follow us in Twitter or subscribe to Jster's RSS feed.