Welcome to part two of Tomas Heed’s amateur programming school™ – coding games for beginners. This is where I try to teach my children how to create a game. Last time we talked about how to create sprites and moving figures. This week we will learn about the for loop. To illustrate how the for loop is used we will create a for game.

The for loop

There are a couple of fundamental building blocks that you need to master when you are programming. Today, we will speak about one of the most important – the for loop. With the for loop, you can make the program to do the same thing over and over multiple times.

for(var i = 0; i < 5; i++){
console.log(i + '-your name- is the best!')
}

The code above will output that you’re the best 10 times in your web browsers console. The console is a small area in the developer tools that you will reach in most web browsers by pressing the F12 button.

Go ahead and try it! Press F12, find the Console tab and copy the text above. Press enter to run the code. Don’t forget to insert your name!

How to use a for loop?

If we examine the for loop a bit closer, we see that it has three vital pars.

for( Initialization of variable; Condition to continue; Increment of variable)

Initialization of variable: Here we create a temporary variable that exists as long as the for loop is running. It can be a string or anything, but in 99 % of the cases it’s an int, short for integer.The declaration var in the example will make the variable an int.

Condition to continue: This is where you tell the for loop how many times it will execute. As long as the condition to continue is fulfilled the for loop will continue to run. You have to be careful when you create your condition, or the for loop will go on forever.

Increment of variable: This is a command that is executed every time the for loop has completed a cycle. The increment is performed before the condition to continue is evaluated. Most of the time, you just increase the value of the integer that was initialized in the first part. But you can do whatever you want here, like add an exclamation mark to a string.

So, our example above:

for(var i = 0; i < 5; i++)

means

for (start from zero, continue five times, count up);

If you want to take it to the extreme, you can write like this. Skip the initialization and add an exclamation mark to a string until the string is 30 characters long.

var s = '-your name- is the best';
for(; s.length < 30; s=s+'!');
console.log(s);

Break and continue

On occasions you want to interrupt the for loop before it’s done all the iterations. Then you use the command break. Break invalidates the condition to continue and tells the for loop to stop running. The following code will write the text three times only.

for(var i = 0; i < 5; i++){    
if(i >= 3) break;
console.log(i +  '-your name- is the best')
}

You can also make the loop skip ahead until the next iteration by writing continue. (Note that I have turned the logic around here. We ar counting backwards from 5 to 0). The following code will write the text 4 times. The value 2 is never written.

for(var i = 5; i > 0; i--){
if(i == 2 ) continue;
console.log(i +  '-your name- is the best')
}

Coding games for beginners – the for game

By now, my children will start telling me to stop talking. They want some action, and I suspect that you do as well. Let’s look at the for game.

Anyone who has played the fantastic board game RoboRally can imagine what the game is all about. Me and my kids has drawn one Pacman sprite each. Your job is to help the Pacman figure to reach the prize by programming for loops. If you succeed you will get a visual surprise!

The gray plus to the left will add a new row. Press one of the arrow one or multiple times to move the Pacman figure that number of steps. You can also change how many steps the figure will move by clicking the plus or minus button to the right.

Press the Go button when you think you’re ready. You can try as many times as you want!

Good luck!