Home > English > Introducing Milo the Mosquito

Introducing Milo the Mosquito

In this post, I am going to describe the game Milo the Mosquito that I created and show some of the screens.

Here is the description of the game:

Milo is an annoying mosquito that just needs to be caught.
Play through the levels and try to catch Milo as fast as you can.
Once you have Milo trapped, tap on him to squish him for good.

The Home screen is as follows:

If you click on the help button, you are presented the Help screen:

When you click play from the Home screen you are presented with the Levels screen:

Next you can click on each level and play the game:

As you can see it is a fairly simple game in that you are trying to catch Milo and squish him before he escapes.  I will now just go over at a high level the architecture and structure I used to create the game.

If you have noticed already, I have been spending a lot of time building applications for Windows 8 in HTML, CSS, and JavaScript.  I have consciously made this decision because I want to be able to author applications that give me the ability to reach across to other platforms without needing to learn a new language or API.  I have held the MVP status in Client Application Development and I have extensive experience in WPF and Silverlight but I wanted to be sure that I could get a good feel for the development experience in building Windows 8 applications in HTML.

The first conscious decision I made with building this game was to use the new HTML 5 feature of the Canvas.  I also decided to use the JavaScript library, CreateJS.  There is a lot of tremendous documentation on this library.  The creators of  Pirates Love Daisies are behind this awesome library.

Within CreateJS, I used the following:

  • EaselJS – to help with managing the canvas
  • PreloadJS – to help manage my assets in the game
  • SoundJS – to help manage my audio in the game
  • TweenJS – to help with creating animations in the game
  • Zoë – to help create spritesheets from Flash

I also used the EasyStar library as a pathfinding engine for Milo to use for determine his escape route.

When working with the canvas, you are left to managing what you are to the canvas and also removing items.  I tried to be as modular as possible by creating top level managers for each screen and implementation.

Finally also created a level editor so that I could use a simple text file represent a level.  The following is the text representation for the level screen you see above:


..............
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXMXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
..............

As you can see, I used “.” as an exit point for Milo.  I represented the playing board by using “X” and finally I represented Milo as an “M”.

I hope this gives you a simple idea into what it takes to build a simple game.  The great thing about using HTML 5 is that you can develop it and test it with you favorite browser and have almost no changes to get it to work in a native Windows 8 application.

Hope this helps…

Advertisements
  1. November 26, 2012 at 8:32 pm

    While Cut The Rope and Pirates Love Daisies both have Microsoft involvement, only Pirates Love Daisies was built by gskinner.com. Cheers!

    • November 27, 2012 at 2:23 am

      Hi Lanny, thanks for the correction. I appreciate the feedback.

      Regards,

      Matt

  1. February 26, 2013 at 5:13 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: