Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

Preface

Addictive, frustrating. Fun, boring. Engaging, repetitive. Casual, demanding.

These words may contradict each other, but they express the roller coaster of sentiments felt by real-time strategy games players like me. I remember spending countless hours playing brilliant games such as EA/Maxis’s SimCity and SimCity 2000, Chris Sawyer’s Transport Tycoon, or Bullfrog Productions’ Theme Hospital, wondering why only a few of my friends (usually the geekiest ones) had played them.

Today, I see children and teenagers, grandmothers and soccer moms, and frat boys and computer geeks playing games such as Zynga’s FarmVille or CityVille, Playdom’s Social City, or Playfish’s MyEmpire for hours, ignorant of the existence of those games’ predecessors: a golden age of isometric real-time games that they’ll probably never play.

What changed?

This recent surge of isometric real-time games was caused partly by Zynga’s incredible ability to “keep the positive things and get rid of the negative things” in this particular genre of games, and partly by a shift in consumer interests. They took away the frustration of figuring out why no one was “moving to your city” (in the case of SimCity) and replaced it with adding friends to be your growing neighbors. They took advantage of Facebook’s social capabilities to change the nature of gaming. They made the boring parts more interactive by letting you not only place the objects, but also build them and manually collect the points they generate. After a ...