Thank you for visiting Blazing Games

LocationBlazing Games - Dozen Days - Words - Ccircle Word

Dozen Days of Words: Circle Word

OverviewInstructionsPlayArticlesdownloads

Making of Circle Word

Time is development time not real-world time.

Saturday May 22, 2010

Hour 0:00 to 5:00 Porting Circle Word Generator

I am making a major change to the Dozen Days Project in switching from Flash (or Flex) to HTML 5 using JavaScript. While I was going to wait until the third series of games, I really couldn't get into the mood to write two more games using the FlexSDK so decided to start the transition a bit early. I have also decided to cheat for this particular episode by porting an existing Java game over to HTML 5.

The first step on this journey is to get the circle word generator class code ported over. As I want to make sure that it is working, I am going to do a quick and dirty test of the code that simply prints out the generated puzzle to the HTML page.

cwg.setWordList(WORD_LIST);
cwg.buildGrid(12,12,12);
for (var cntr = 0; cntr < 12; ++cntr)
document.writeln("<p>" + cwg.getRow(cntr) + "</p>");

Sunday May 23, 2010

Hour 5:00 to 8:00 Getting word circling drawing code working

While I could have started with the rendering of letters, I have decided to go with the harder task first and get the circles working. The next porting job is not really porting as the Java drawing classes are different from the canvas API. While a lot of the underlying drawing logic is the same, which means I am saving a bit of time porting the code over, the actual drawing code is different. To test the drawing of the circles, I simply draw the different types of circles using the following test code

game.circleWord(ctx, new Point(1,2), new Point(1, 9));
game.circleWord(ctx, new Point(10,9), new Point(10, 2));
game.circleWord(ctx, new Point(1,1), new Point(10, 1));
game.circleWord(ctx, new Point(1,10), new Point(10, 10));
game.circleWord(ctx, new Point(2,2), new Point(9,9));
game.circleWord(ctx, new Point(2,9), new Point(9, 2));

Monday May 24, 2010

Hour 8:00 to 12:00 Gameplay

The rest of the game play is ported. This includes both the rendering of the text portion of the puzzle, the sidebar word list, and all the mouse handling. It took a slight bit longer than I thought to get everything working (I had figured about 8 hours to reach this point) but that is not too bad.

Hour 12:00 to 15:00

I was going to spend this time fine tuning things and possibly fixing an annoying part of the generator (overlapping words in the same direction. This shouldn't be hard to fix but this fix will have to wait until version 1.1 now). First, I wanted to see the performance when using IE and the excanvas utility. For some reason, IE didn't want to run the game at all. I knew the excanvas code should work as I have used it before, but no. Thinking that it is my game code that is somehow at fault, I remove the calls to my game class and simply try drawing a rectangle in the canvas but IE still refuses to run the code. After banging my head for a few hours trying to figure out what is wrong, I finally discover that in the canvas programs that work, I have the canvas tag outside any other tags but in the circle word game, the canvas tag is inside a paragraph tag. Moving the canvas tag outside the paragraph tag solves the problem and the game run (though very sluggishly). I blame Microsoft for this because if they had support for the canvas tag then I wouldn't have to use third party libraries to add the functionality.