Home > English > Introducing Tank Commander!

Introducing Tank Commander!

In this post, I wanted to describe Tank Commander and talk about some of the logic that went into building it.

Here is the description of the game:

Tank Commander is a game that teaches you programming logic. You get one chance to write your program and destroy the base. You can play any level but your real skill comes when you can write all the programs without a single error!

The following are some of the screens in the game:

Tank Commander - Splash

Main Screen

screenshot_02252013_234142

screenshot_02252013_235058

screenshot_02252013_234251

screenshot_02252013_234354

screenshot_02252013_234438

The main premise behind the game was to use it as a tool for teaching my boys how to think logically and perform some simple programming. My oldest can win each level with a couple of tries. My youngest is still working but he has the first couple levels down perfect!

I have really enjoyed building games using HTML5 and the Canvas. It is so easy with CreateJS and the suite of tools it provides. I have looked at other libraries but it keeps pulling me back to use it for my games so far. I decided to build on the simple level editor that I built for my first game, Milo the Mosquito as it was a very straight forward approach. I did, however, make it a little more complicated as I wanted to have a little more metadata about the levels.

Probably, one of the most challenging parts about creating the game, was trying to make sure that I had a good collision detection.  I didn’t really need to worry about this in my other game but now with moving objects, I needed to be a little more careful.  Thankfully, due to the grid that I was using, I simply rolled out a poor man’s collision detection system using the X and Y coordinates.  That is one of the reasons why you see them in the game. There were originally meant for debugging purposes only but I liked them so much that I decided to keep them.

I also had to create a simple parser for the input the user typed into the programming console. I know that this experience can be improved upon by providing some compiler errors or hints to help the user play the game.

In my first release I provided a toggle for all sounds in the game but I changed that a little in the next release to have a toggle for both sounds and music in the game. I also decided to save the settings of what the user chose automatically so that when they came back to the game it would be ready.

Another area that I found was not the most intuitive was the original main menu. When a user went to the selected a level from the dropdown, the level automatically started. This was very irritating if you clicked on the home button in a level and then wanted to go back.

I now have a “Go” button that takes the user to the selected level.

In my original design of Milo the Mosquito, I had a separate level text file. I changed this up a little and now use JSON for Tank Commander. This provided me with the ability to define more complex levels and behaviors.

The following is the first level for Tank Commander as JSON:

[{
	"id": 1,
	"name": "Fire!",
	"level": "intro",
	"background": [
		"1NNNNNN2",
		"W......E",
		"W......E",
		"W......E",
		"W......E",
		"W......E",
		"W......E",
		"3SSSSSS4"
	],
	"game": [
		"......P.",
		"P...T...",
		"........",
		".....P..",
		"..P.....",
		".P.....P",
		"....X...",
		"......P."
	],
	"tankDirection": "north"
},
]

I left out the rest of the levels for brevity. I have two layers to my game so that I could create a background and then position the other assets on the screen. I finally have a direction so that I can tween the tank into the correct orientation. This is also beneficial as it allow me to have a single sprite sheet with animation going in a single direction and be able to tween all the other direction by just rotating the items.

Here is a quick legend of what I am doing with the “background” and “game” arrays.  I wanted to have a background where I could define a nice border instead of the same tile.  This is the reason for the following values: 1, N, 2, W, E, 3, S, 4.  It doesn’t take a lot of imagination to see what I am representing here.  I also used the “.” character to represent the tiles within the border.

The “game” array is basically the same, I am representing different tiles by using different characters: P, T, X.

Here is a screen shot of the layer rendered:

screenshot_02252013_234108

This is a simple approach and can be used for a lot of time layouts.  It is used in a lot of 2D platform games.

Although, I have ran into some challenges while developing this game, I really enjoyed building it using HTML5 Canvas and JavaScript.  The other thing that I absolutely love is the ability now to natively target Windows 8.

Hope this helps and inspires you to write one as well…

Advertisements
  1. No comments yet.
  1. February 26, 2013 at 9:54 pm

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: