Game Coder Episode 004

This time I introduce you to debugging.

We solve the homework from episode 003 by single stepping through the code, and inspecting variables in the debugger.


Today's episode, on YouTube

Homework Review

We solve the homework from the last lesson by stepping through the code in the debugger, and inspecting the evt variable that was passed into our keydown listener.

Lesson Details

Key Concepts


When we have a problem with our code we call it a bug. A bug is when the code doesn't do what we expected it do to, or worse still, it does nothing at all. When this happens, it's time for us to debug!

To help us findout where a bug is we can use something called a debugger. The debugger can show us a few things:

  1. Do any lines of code have errors?
  2. Which lines of code is the computer really running
  3. What values do our variables hold

Do any lines of the code have errors: The debug console will report any errors in the code (sometimes called syntax errors). Usually we will be told a line number where an error was detected and possibly some detail about what the computer thinks is wrong.

Which lines of code is the computer really running: We can use the debugger to single step through the code and set breakpoints. Single stepping allows you to slow down the program and see step-by-step which lines of code the computer is running. Setting a breakpoint allows you to pause the program when the computer gets a particular line of code. This is great if you want to run through the program at full speed, but pause only when a particular part of the program is reached.

What values do our variables hold: Often, when things are not working right, it's because a variable has a value in it that we didn't expect. Inspecting variables (usually in conjuction with the breakpoint concept above) allows you to check whether your variables somehow got changed to something you didn't expect. Of course, once that happens you then have to go figure out why it got changed to something you didn't expect!

Syntax Highlighting

When you run code in the debugger you will notice that different parts of the code are in different colors, or maybe they're in bold, or italic. This is called syntax highlighting. Syntax highlighting is something that the debugger does for us to make it easier to see the different parts of the code. For example, function names, variable names, conditional statements, can all be shown with different styles of text, to make it easier for us to read.

Keydown Event Properties

We learned last time that the keydown event is passed into the keydownListener when the user presses a key. With the debugger this week, we look at some of the object properties, such as the event's type, the key, and the keycode.

We discover this time that if we check the value of the evt.key property, we can tell exectly which key was pressed.

ASCII Characters

Every letter in the alphabet, and every number, and infact all the other characters you can type on a keyboard, are represented in the computer using character codes.

The most basic type of character code that we use is called ASCII. ASCII is really an acronym for American Standard Code for Information Interchange.

Table of common ASCII characters


ASCII has been around a long time, and is focused on characters we use the US for writing - as you might imagine from the name. ASCII characters are numbers in the range of 0 through to 127. 128 characters doesn't give you much room for all the characters needed for all the languages on planet earth. In more recent times additional character codes have been devised to give support for symbols for other languages, such as chinese, greek, and klingon.


Go take a look at ASCII, UNICODE and UTF-8, to see how these different character codes relate, and how they represent different characters.

Maybe you would want to write some HTML that displays non-ASCII characters.

File Downloads

Useful Links