I have been teaching programming for a long time now and I work with a lot of people who have never coded before but want to make a game. I put together the following 5 part series to help teach people the fundamentals of game programming. In the past, this course has been a great success and figured I would share it again to help you get started learning the fundamentals of programming. Over the next few posts we’ll go over JavaScript.

It is easy to create something with JavaScript right in the browser, there are lots of resources on how to build JavaScript games and JavaScript can be written with a simple text editor. I highly suggest using a resource such as Code Academy’s online JavaScript course to get you started. I designed this to be a cheat sheet of sorts for those still learning JavaScript and want to start making HTML5 games. With that in mind, these examples all revolve around use cases you would find in games and are designed to help you think about how this code is applicable to game development.

Variables

The first thing you will ever hear in programming is that "a variable is a container". We use variables to store data. In JavaScript we use var to denote a variable. Here is an example:

var playerName = "Jesse Freeman";

There are 3 basic types of "primitive" variables:

• Strings – this is text and is always put into quotes
• Numbers – these are numbers and can be positive, negative, whole number or fractions
• Booleans – this is a true or false statement. Also you can use the value 0 for false or 1 for true as well. 

The most common thing you would probably want to store in a game would be things like the player's name, their score and whether the player is alive or not. Here are some examples:

//String
var playerName = "Jesse Freeman";
//Number
var score = 0;
//Boolean
var isAlive = true;

In addition to these 3 simple examples you can actually store anything inside of a variable. Let’s look at some more complex data structures.

Arrays

Arrays are similar to variables but they can contain more than one value. Think of Arrays as lists. In games we could use Arrays to keep track of items in the player’s inventory. Here is how you set up an empty array:

var inventory = []; 

Likewise you can also create an Array with items inside of it like so:

var inventory = ["item0", "item1", "item2"]; 

In this example we have 3 Strings inside of the inventory array but we could also have Numbers or Booleans as well. In order to get the value of an array we have to access its index. This is a unique ID related to the position of the item in the Array. In JavaScript Arrays are 0 based so the first item is always index 0. Here is an example of how we would get the value of the first item:

inventory[0];

As you can see, we simply reference the Array itself and use brackets to supply the index we want to access. Arrays also have special functions (we’ll learn about functions later) that allow you to add and remove items from the Array. Here is a quick example of how we can add something to the array:

inventory.push("item4");

You can also get the total number of items in an Array like this:

inventory.length;

This would return 3 but remember if you wanted to use this to find out the last value of the Array you would need to subtract 1 from it since the starting index is 0. Here is how you get the last item in the Array:

inventory[inventory.length-1];

Arrays are incredibly versatile and are used to holds lots of different kinds of data structures. One of the most common is a table like structure with rows and columns of values. This is the basic structure we would use for tile maps and would use something called a 2d Array to store the data. A 2d Array is an Array containing other Arrays. Here is an example:

var map = [[1,1,1,1,1],
    [1,0,0,0,1],
    [1,0,1,0,1],
    [1,0,0,0,1],
    [1,1,1,1,1]];

This simple map example uses two tile values: zero for empty and one for solid. If we were to visualize this map it would be a square room with a solid block of wall right in the middle. Accessing the value of these tiles is similar to how we did with our inventory Array. Let’s say that we want to get the center wall in our room, here is how we would access it:

map[2][2];

One way to help you think of this is that the first index is the row and the second index is the column like this:

map[row][column];

Remember that arrays can contain anything so the nested Arrays don’t have to necessarily store numbers, they could be Strings or even Booleans.

Variables and Arrays are the cornerstone of programing and one you get your head around how they work you can begin building event more complex structures in your own games. In the next post we’ll cover how to create Objects and Functions so you can begin to build out more complex logic.

Ready to Submit Your App or Game?

• Click here to register for free as an Amazon Developer. 
• Click here to download the Amazon Mobile SDK. 
• Click here to submit your app
• Learn how to publish HTML5 apps and games to Fire TV, Fire Tablet and Fire Phone

- Jesse Freeman (@jessefreeman)