Building a Javascript clone of Civilization, part 1

So I thought it might be fun to build a game in Javascript, and not just some dead simple game. As I was younger (because I’m so old now) I liked the games Civilization and Colonization a lot, so I wanted to try to make a clone of them, using Javascript.

I decided from the start that I wanted to use jQuery, and Object Oriented Javascript. To mimic OO inheritance, I once again used John Resigs Simple Javascript Inheritance.

So the first thing to do was to model the entities I needed in the game. I started out with the obvious one, the Unit class. Added a few methods to it, and moved on to the Map class, because I wanted to get something at least partially working very fast. So I made a Map class that generated a map of tiles that could hold units. I greated a Tile class, and the Map class would hold all instances to the tiles. A tile has a “height” property, which defines the altitude of it (1 is deep water, 6 is low land, and 10 is oh-my-god-that’s-high-mountains). For now, I’m just randomizing the heights of the generated tiles, but that doesn’t make a very realistic map, so that’s on my TODO-list.

To get something working, I needed a way to connect unit to tiles. At first, I thought about letting the Unit hold an instance to the Tile it was on, but soon realized that it wouldn’t be a good idea. Instead, I created a UnitLocations class, which holds all units and all tiles, and connects them.

I also needed to be sure that units can’t move over the map as they like, land units can move over water (except the JesusUnit, which will be covered in part 23 of this series). So I created a LandUnit, and a WaterUnit, derived from the Unit base class. For now, when you try to move a unit, the game.Tile::canTake(game.Unit unit) method is queried to see if the unit can be moved to that tile. I’m pretty sure I have to move that logic to somewhere else at a later stage, but it’s good enough for now.

So I had a map, and I had a couple of units on it, that could move around. Then I remembered that Civilization is turn based. And my ambition is to let players play against each other over the series of tubes that we call the Internets. But sitting and waiting for other players to make their move can be tiring at best, so I needed another solution. Instead, i decided that Units has a “move_points”. Let’s say that LandUnit has 3 move_points, and moves over three tiles. Then move_points becomes zero, and that unit has to rest for a couple of seconds before it can move again. Right now, it’s accomplished by an interval running in every unit that adds move_points every two seconds. Each unit type also has a “max_move_points” property, so you wouldn’t be able to move the unit over a gazillion tiles if you waited long enough.

So I was quite excited about this, and wanted to move on and make more features. But then I stopped and thought some more about it, and realized that I need an event architecture to move on. And I hear you, Javascript already has events, and jQuery allows you to trigger custom events that you define on your own, but I wasn’t quite satisfied with how that worked. So I’m going to get cracking on a way to define and trigger my own events, and that will be part 2 of this series.

You can find the game here for now: http://dev.online.nu/game/.
When you want to move a unit (a unit is one of those pretty red squares), just click on it, then move it by using your keyboard arrows.

Til then, happy coding!