HTML5 Game Development
   
  • HOME
  • News
  • Tutorials
  • Engines
  • Demos
  • Tools
  • Partners
  • Mobile HTML Game
  • Guess The Celebrity
  • About us

HabitRPG: Gamify Your Life

HabitRPG adds fun to habit-tracking, todo lists, and GTD by gamifying your life, turning your goals into a Role Playing Game. Level up as you succeed, lose HP as you fail, earn money to buy weapons and armor. It’s open source and constantly improving.

JavaScript, of Course!

Habit’s built on Derby, a real-time Node.js framework. Derby employes Node, MongoDB, Socket.IO, and an Angular-like client MVC with model-view bindings and real-time persistence. I’m sure you’ve heard of Meteor – they’re direct competitors. Frienemies even.

Choosing Derby took weighing pros and cons. On the one hand, it does so much stuff for you – the app was an absolute breeze to write. It seems like magic at first that variable bindings in your HTML are automatically persisted to the database and reflected real-time in other browsers, with a simple <input type=”text” value=”{edit_me}”/>. On the other hand, the framework is quite young, and Habit has seen many hard issues only to find them fixed with the next derby#master push.

Would I do it again? Absolutely.

Hosting

At first Habit was hosted on Heroku. Heroku doesn’t support Websockets, but Socket.IO has a fallback option of XHR-polling. In my limited load testing, I in fact found that XHR-polling supported more concurrent users than Websockets; and the real-time communication was sufficiently fast for my needs (you’d be surprised!). However, you HTML5 multiplayer game devs will probably prefer Websockets – you need every ounce of real-time speed you can get. In that case, you can’t user Heroku.

Now, Racer (Derby’s database driver) doesn’t yet support session-handling over multiple processes, which Heroku and Nodejitsu use for horizontal scaling. As a result I recommend either Appfog (which gives you a comparatively beefy single instance for free) or custom hosting – we’re using Liquid Web, but of course there’s AWS. Incidentally, Derby doesn’t use that many resources – 512MB-1GB RAM and ~50% CPU utilization at my peak load (I don’t have proper metrics, sorry). The biggest concern with scalability ended up being MongoDB. Add your indexes and optimize your set() operations! See this article for more.

A Leg Up

Other things I’m using:

  • BrowserQuest creative commons icon set
  • Bootstrap

Share List

You might also find this interesting:


  1. Wardensity: 3D RTS in the Browser For the last year and a half indie studio NWG has been developing Wardensity, an 3D Multi-player HTML5 game being build on WebGL using Three.js as a base. The game...

  2. The Artillery Blog: Real-time synchronous multiplayer 3D gaming with HTML5 The folks over at Artillery Games (site it currently accepting sign-ups for early access to games and dev tools) have written a blog post that talks in high level terms...

  3. Seriously.js: Realtime Video-Compositor BadassJS has a nice write-up on Seriously.js “A Realtime, Node-Based Video Compositor for the Web.” Check out the (WebGL-requiring) Demo. Real-time video composition effects client side in the browser. What...

  4. Colbalt Calibur 3: Open-source Canvas+Node MMO Colbalt Calibur 3 is an real-time-ish multi-player MMO that uses Canvas and Node.js. It's open source duel licensed under the BSD/GPL....

  5. GRITS game: HTML5 PvP Some developers at Google have created a HTML5 player-vs-player game built on HTML5 Canvas, WebSockets, node JS and app engine. The game is a top-down robot shooter. The code is...

HTML5 Demos

License HTML5 Games

Are you a company looking to license HTML5 games? We recommend MarketJS.com, a B2B platform for licensing games.

MarketJS has over 300 HTML5 games for licensing. They also provide additional services such as game reskin, custom development, and white label portals.

Html5 Game Development


Follow @GameDevHTML5



WHAT’S NEW

  • Game Localization For Food Delivery App

  • HTML5 Games in Guest Room Tablets

  • What’s New in Phaser 3.50

  • Particle and Sprite Editors in Babylon.js 4.2

  • Healthcare Industry HTML5 Games



NEW DEMOS

  • Vertical Endless Runner Prototype

  • Particle and Sprite Editors in Babylon.js 4.2

  • Song Maker in Google Experiment

  • Phaser 3 Experiment for Drawing Cards

  • HTML5 Game for a Recycling Campaign


ENGINES

  • Phaser 3 Game Object Pools Tutorial

    Memory allocation inside update loops often causes framerate problems in real-time gaming. One of the best solutions to this is to use Object Pools in Phaser 3. An Object Pool …Read more

  • Games During The COVID-19 Pandemic

    There so many effective ways to engage your audience with HTML5 games. Here is an example of how to run a game campaign to keep users motivated during difficult times. …Read more

  • Building Simulated 3D HTML5 Games With Phaser

    Phaser is commonly used as a 2D game engine for creating HTML5 desktop and mobile games. However, with the help of three.js and Phaser 3D library, you could render your …Read more

SEARCH OUR ARCHIVES

CONNECT

rss twitter

HTML5 Game Development is proudly run by 3P Solutions Inc

GOT NEWS?

Send new engines, demos, information and tips to hello@html5gamedevelopment.com

MONTHLY MEETUP

In boston? Join us for the Monthly HTML5 Game Development meetup.

BOOKS

We're in the process of writing a few books about game development. Coming soon!

Copyright HTML5gamedevelopment.com