Blazing Games - Dozen Days - Words - Morse Code

Dozen Days of Words episode 12: Morse Code

Making of Morse Code

Time is development time not real-world time.

Hour 0:00-0:30 Design
For the final game I have decided to go with a Morse Code game where players code and decode letters and words. Setting up the project means taking what I can from the CircleWord game as the base starting skeleton. My first goal is to start assembling a primitive but adequate animation system.

Hour 0:30-5:00 Creating primitives and basic layer system.
Was going to try and implement dirty rectangle support but found that the amount of time that I would have to invest was a bit too high so am going to hold off on that support until after the game is fully functional. Here is the test code for the layer support:

this.stage = new BGLayer("stage", new BGRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT));
var layer = new BGLayer("A", new BGRect(10,10,300,220));
layer.backgroundColor = "red";
this.stage.addChild(layer);
layer = new BGLayer("B", new BGRect(330,10,300,220));
layer.backgroundColor = "green";
this.stage.addChild(layer);
layer = new BGLayer("C", new BGRect(10,250,300,220));
layer.backgroundColor = "blue";
this.stage.addChild(layer);
layer = new BGLayer("D", new BGRect(330,250,300,220));
layer.backgroundColor = "purple";
this.stage.addChild(layer);

Hour 5:00-6:00 Morse code tables
Building a table that holds the dot-dash codes for the letters and numbers.

6:00 - 8:00 MorseTile class
The creation of the class that renders dot-dash patterns graphically with the size scaling to fit the space available. Here is the test code

this.stage = new BGLayer("stage", new BGRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT));
var layer = new MorseTile("A", new BGRect(10,10,300,220));
layer.setCode(CODES[0]);
layer.backgroundColor = "red";
this.stage.addChild(layer);
layer = new MorseTile("B", new BGRect(330,10,300,220));
layer.setCode(CODES[1]);
layer.backgroundColor = "green";
this.stage.addChild(layer);
layer = new MorseTile("C", new BGRect(10,250,300,220));
layer.setCode(CODES[2]);
layer.backgroundColor = "blue";
this.stage.addChild(layer);
layer = new MorseTile("D", new BGRect(330,250,300,220));
layer.setCode(CODES[3]);
layer.backgroundColor = "purple";
this.stage.addChild(layer);

8:00 - 10:30 Labels and Buttons
I need buttons to make the game work, but buttons need text so I quickly created the label class and then created the button class. This went quick but a minor bug added about half an hour or so to the time.

10:30 - 13:30 ET put a bug in my code.
Interesting bug in my Morse Code game that I am writing. The Morse Code tables are in an array of arrays and use 0 to designate a dot and 1 to designate a dash. In JavaScript, a new Array(#) call creates an array of that length so the single dot (E) and single dash (T) resulted in incorrect values in my table!

This bug was discovered while getting the single letter encode game mode working. While testing the bug was discovered and it took me about a while to figure out what exactly was going on. The implementation, which is it's own stage layer, is fairly simple just some labels, buttons, and a couple of Morse Tiles.

Still, at this stage in development, it is clear that I am not going to get the whole words modes so I will just have an encode and decode mode, with the encode done that just leaves the decode and title screens to go!

13:30 - 15:30 Decode mode
Implementing of the single letter decoding went fairly quick now that the ET problem has been fixed.

15:30 - 16:30 Title
The title screen simply lets the player select from the two game modes. For fun I did the title text a bit fancy by having the Morse Code for the title underneath the title.

16:30 - 18:00 Fine Tuning
Cleaning up layout and colors. Testing on different browsers, including ie using excanvas.