I wrote a Sim City clone in JavaScript

April 28, 2009 – 5:23 pm Tags: , , ,

This is why I haven’t been updating lately: I have been working on a Sim City clone, written purely in HTML, CSS and JavaScript!

The game is called WidgetCity, and I’m participating with it in the Betavine Widget Competition 2009.

The game was designed to run in Opera Widgets mode, but it also works in Firefox – only downside is that you can’t save your city. Get the widget here, or if you don’t have Opera, you can play the game here. There is also a help file.

Continue reading to find out more details about the game’s inner workings and such!

The basic stuff

The game is quite similar to the original Sim City – it actually uses some graphics from it, thanks to the fact that the original Sim City source code has been released under GPL, which was a good thing because I’m not the world’s greatest graphics artist!

As per the requirements of the Betavine competition, the game had to run in a mobile phone. This is why the game is so small: It had the screen size limitations of a Nokia N95, which is something like 260×240 pixels.

The game was originally supposed to be based on the canvas tag, which I’ve used on my past widget projects like TankWar Online. However, this turned out to be a bit of a problem on the phone, and only one of the problems caused by the phone.

The N95 is actually a quite good device: It has the hardware to run games with 3D graphics, etc. etc., but it’s completely unable to run JavaScript code at a reasonable pace. Using canvas, the game ran absurdly slow!

In the end, I had to resort to using old-school DHTML style trickery: The game area is simply a table, with some CSS classes applied to each of the cells in JavaScript.

Under the surface

Under the relatively simple looking graphics of the game ticks a quite serious simulation engine.

The game engine simulates a lot of things, and it had quite serious performance implications which required a lot of JavaScript optimization. You can read more about the problems and optimizations encountered in development in Optimizing JavaScript for extreme performance and low memory consumption.

The sim engine calculates at least the following:

It keeps a track of what’s built in each tile in the game. This data is then used to calculate things like how much residential/commercial/industrial demand there is.

For some specific tile types like residential zones, the game calculates desirability and traffic: Is this area of the map “good enough” to build a large apartment block, and can the people living here drive to some destination?

The desirability calculations are based on a bunch of other large calculations: Pollution, crime rate, land value, population density. Each of these has to be calculated again and again during the progress of the game to keep the city developing.

Traffic itself uses a quite “dumb” algorithm: It just attempts to drive in a random direction along the roads until it reaches a destionation, which works okay for the simple calculations involved.

The large calculations like pollution and land value calculations require going over all the tiles in the map to determine what’s built where, and then based on those some values are calculated.

You can probably see why the performance wasn’t so great, as there is a lot of stuff going on in the background!

Issues during development

Most of the problems during the game’s development were caused by the really poor JavaScript performance on the target device.

For example, the original map size in the game was 300×300 tiles. This would cause the phone to immediately run out of memory when attempting to play, so I had to reduce the size to 128×128, which still quite good is nowhere near as large as the original.

Note that the original 300×300 map did run perfectly fine on my desktop and on my HTC Touch Diamond. It would probably have had major performance implications in the future, though…

Additionally, I originally planned to use canvas. However, I had to scrap that and use a table as the speed of canvas was just way too poor. You may be interested in reading how the WidgetCity map is rendered using a table and some CSS.

The JS performance in general seemed quite awful: Just looping over the 128×128 map was slow. If you did nothing else than just iterate over each of the 16 384 tiles, it would already have a small impact, which you wouldn’t have with most other languages, or even with a bit newer JavaScript engines.

Another memory related problem surfaced closer to finishing the development: The N95 would run out of memory when saving the game.

Saving and loading are a quite vital feature of the game, so this was a critical issue. However, Remco Lanting came up with a nice idea to possibly fix it: Save the map in smaller parts. The idea worked flawlessly. Remco also helped with testing the game and with some ideas, so a big thanks to him.

What’s missing?

While the game is quite ready and playable now, there are various things that I would’ve liked to add to it, but due to lack of time I couldn’t.

These include being able to lay rail, being able to get nice maps that display things like crime rate in different parts of the map, some user interface improvements, and of course disasters like nuclear plant meltdowns!

One particularily cool thing I would have liked to have was the ability to overlay data like crime rates on top of the city. I wrote a post earlier on how you can get Photoshop layer style stuff in JavaScript, which could have been a nice way to do this.

I don’t know if I will be adding all those, as I have various other things to do now that the game is released, like actually writing blogposts again. :)

However, if you’d like, you are free to modify the game. I’ve decided to release it under GPL, similar to the graphics from the Micropolis project used in it. If you would like to play with the source code, just download the widget, rename the file to .zip and unzip it like normal.

Share this:
  1. 18 Responses to “I wrote a Sim City clone in JavaScript”

  2. Facinating, reminds me of playing that game years ago. Great Job, really funny to play! Perhaps you could add a detection for the available width, so that one doesn’t have to scroll on the regular laptop.

    By Uli on Apr 28, 2009

  3. Great work! My population isn’t increasing, though… I guess.

    By edvakf on Apr 29, 2009

  4. I got 1 Mio of Money and nearly 200.000 Population before i quit playing it (the little screen is hard to play very long 😉 )

    By Uli on Apr 29, 2009

  5. wow great job, i love it 😉

    By chrisweb on May 6, 2009

  6. Hate to be a stick in the mud, but usually when source open sourced, usually the graphics are not and are still under copyright. Quake’s source code is open, but the map and graphics are not for example.

    By EllisGL on May 8, 2009

  7. No worries about that. I’ve checked that the graphics are indeed open-sourced like the rest of the project.

    By Jani Hartikainen on May 9, 2009

  8. Awesome!

    By EllisGL on May 9, 2009

  9. This really impressed me.

    By bheil on May 10, 2009

  10. How to tweak code to achieve bigger screen? Tryied to edit XML, but with no results.

    By Srigi on Jun 17, 2009

  11. This does not have to do with this widget, I wanted to contact you about a previous widget you made, called tank wars. I would like to re-engineer it but I would like your permission. I also wanted to ask if you would email me at rox33rox33not11@yahoo.com the files so I can edit it.

    By John Homar on Jun 18, 2009

  12. Srigi, you will need to tell the map rendering class that you want it to create a larger table. That should get you started.

    John, sent you a mail.

    By Jani Hartikainen on Jun 18, 2009

  13. This is a great little app. I edited the width of the main screen to 800×600 and the city view table to 44×34 and it runs great. Been looking for a mobile solution to Simcity cravings for years. Many thanks on a wonderful job.

    By BigBrisco on Jul 30, 2009

  14. Someone please tell me how to compile the source code… email me! cameroncrogers@yahoo.com thanks.

    By canmeron on Aug 31, 2011

  15. canmeron, the code will function in a browser and requires no compilation.

    By Jani Hartikainen on Sep 1, 2011

  16. What happened to this widget? Is this project dead now?

    By Tiwaking! on Feb 2, 2013

  17. Yep, I’m afraid this project has been dead for quite a while. Feel free to use the code if you’re interested though.

    By Jani Hartikainen on Feb 3, 2013

  1. 2 Trackback(s)

  2. Apr 30, 2009: Optimizing JavaScript for extreme performance and low memory consumption | CodeUtopia
  3. Apr 20, 2011: Spiel: SimCity-Clone auf JavaScript Basis » clone, free, java script, mobil, sim city, webbrowser » Digital Life

Post a Comment

You can use some HTML (a, em, strong, etc.). If you want to post code, use <pre lang="PHP">code here</pre> (you can replace PHP with the language you are posting)