This was a passion project developed as a way to teach myself HTML5 and Javascript techniques as much as it was a way to inject some new interest into an old favorite game.

Settlers of Catan. designed by Klaus Teuber, is a wildly popular German style board game whose play field is ever changing. Hexagonal tiles are placed on the table in front of players randomly and assigned numerical values representing resources and the die roll required to obtain them. More than a dozen of these tiles and numbered chits are placed and, despite some versions of the game providing a frame, tend to be unstable and are constantly being shifted or knocked around by dice rolls.

The idea for this project was to maintain the social aspect of the game, still using the physical player tokens  and cards at a table (rather than a television). A projector mounted on the ceiling displays the game board onto the table in front of players and includes background animation and features, like number highlighting, to enhance the already iconic gameplay. Board scenarios, tiles and number chits can all be easily randomized with just a few clicks, making setup and tear down or starting a new match very easy.

The code is entirely Javascript, HTML (using the Canvas element) and CSS. CreateJS, EaselJS,  PreloadJS and TweenJS libraries were utilized and all the imagery is covered under Creative Commons reuse licenses.

Visit (and feel free to use) the online version here: http://www.alt-realities.com/catan