RND Websites

To challenge myself as JavaScript programmer and to learn new things, I’ve decided to try and rebuild a Commodore 64 educational game called “Topography Netherlands”. I couldn’t find a C64 video of it, but this MSX version is basically the same. The idea is that the game gives you a name of a Dutch city and you need to fly there as fast as possible. The goal is to score as many points as you can in a set amount of time. The game was intended to teach younger children the location of Dutch cities. Later versions of the game also offered German and European maps.

As you can tell from the video, the game isn’t that complex. Here’s my shopping list:

• an animation of a helicopter
• a map of the Netherlands
• coordinates of all Dutch cities
• a clock
• a scoring system
• a randomizer to select different cities
• some form of collision detection to determine if the helicopter is at the required location on the map
• a way to convert keyboard presses into directional controls

To make things slightly more interesting, I want to use a canvas element. It would probably be easier to use a collection of divs, but where’s the challenge in that, right?

I’ve already found a nice, large map with all Dutch municipalities on it that I can use as a basis for my map and for my coordinates list.

As I’m doing this in my spare time, I’m giving myself one month to finish it. Also, I’m not going to use any library (except for excanvas.js to make it work in IE as well). Reason for this is that I’m not used to work without the safety net of a framework, and I notice that it limits me in being a good JS programmer (basically, I’m too used to the Prototype.js idiom). This will probably mean that I’ll need to look at code optimization at some point.

I’ll start on this next week, after a weekend of relaxing. I hope you (read: someone) will follow my endeavours and maybe learn something from it (as I hope I will).

Last week, I did some research into creating fallbacks for the new HTML5 form elements, such as email fields, date fields, etc. As it turns out, this is very easy. I used Modernizr for the feature detection. Although it’s just a 5k script, you could easily extract the required code from it if you want to keep your footprint to a minimum.

Based on the Modernizr results, I applied a CSS class for design purposes and attached event handlers. For example, the code below handles the “required” attribute.

function validateRequired(e) {
var fld = e.element(),
ph = fld.getAttribute('placeholder') || '';
if (fld.value === '' || fld.value === ph) {
console.log('field ' + fld.id + ' is required');
fld.removeClassName('validated');
} else {
fld.addClassName('validated');
}
}

if (!Modernizr.input.required) {
$$('input[required]').invoke('addClassName', 'required')
.invoke('observe', 'blur', validateRequired);
}

I use Prototype.js as my framework of choice, but it can be done just as well with other frameworks or plain javascript. As long as you use Element.getAttribute you can access the new attributes without any problems in all browsers. Of course, this is just proof-of-concept code, so it needs some tidying up for actual production use. I’ll probably create a full Prototype.js library of modules to handle the various attributes and field types. I’m also figuring out a good way to handle data-* attributes so you get an easy way to access those. My aim is to stay as close as possible to the official spec for those interfaces.

I’ve tested the code in IE6, IE7, IE8, Firefox 3.0, Firefox 3.6, Safari 5 (Win), Chrome 6 and Opera 10 and they all work as expected.