Game Coder Episode 002

Start-off with a review of last weeks homework, then we start writing javascript this week.

We introduce functions. We write functions of our own, plus we use functions that the web browser provides for us.

We show one of the ways to tell the browser to execute our code once our web page has loaded.

We introduce variables to hold values that we will manipulate in our code.

We use JavaScript to change the position of the items we put on screen last week.

Video

Today's episode, on YouTube

Homework Review

Review of the homework from Episode 001

Hexadecimal Numbers

What are hexadecimal numbers? Think of numbers that go from zero to fifteen, rather than zero to nine.

Humans think of numbers in 0, 10, 100 columns because we have ten fingers. Computers don't need to stop at ten, because they don't have fingers! Computers do all their counting in twos "on" or "off", also called binary. Binary numbers are difficult to write, because they take up a lot of space. As a compromise, to make life easier for humans to share numbers with computers, we group binary numbers in sets of 4. This gives us sixteen combinations for every set of four, which is where hexadecimal comes from. It's convenient for humans to read hexadecimal, because it looks kind of like decimal.

Decimal	Hexadecimal (hex)	Binary
0	00	00000000
1	01	00000001
2	02	00000010
3	03	00000011
4	04	00000100
5	05	00000101
6	06	00000110
7	07	00000111
8	08	00001000
9	09	00001001
10	0A	00001010
11	0B	00001011
12	0C	00001100
13	0D	00001101
14	0E	00001110
15	0F	00001111
16	10	00010000
...
20	14	00010100
...
32	20	00100000
...
128	80	10000000
...
255	FF	11111111

Color Codes

Color codes represent the amount of red, green and blue used to make-up a color. Colors codes are usually a single hexadecimal character for each color (for example, #2bb), for a range of 0...15 for each of red, green, blue. Alternatively color codes can use two hexacecimal characters (for example, #ff00ff) to give a range for each color of 0...255.

Lesson Details

Key Concepts

functions
variables
using built-in javascript functions
using setTimeout() as a way to call our code
conditional
- comparing variables to values
- the if statement
- using > (greater than)

Functions

A function definition gives JavaScript a bunch of instructions that we want all executing together. We will see how to define a function this week, and look at a couple of the ways we use to tell the browser how to execute the function.

We use the built-in browser function setTimeout to call one own code every quarter of a second (or 250 milliseconds). This will be our application's control loop.

We use the built-in browser function document.getElementById(), to find things on screen, then move them around.

Homework

Conditionals

Look at other conditionals (<, ==, <=, >=)

Change the code to make the player go the other way. You will need to use a different conditional to check when he reaches the side of the screen.