Skip to main content

Introduction to JavaScript, part II: Conditions and Loops

Introduction to JavaScript, part II: Conditions and Loops

Variables are good for storing things, but it isn't enough for making a game. Here we will talk about conditional statements and loops, and how they may define a game's logic.

"if" statements

Let's start with an "if" structure:

if (/* this statement is true*/) {
    /* do some stuff */
} else {
    /* do another stuff */
}

We can omit an "else" part if we don't need it:

if (/* this statement is true */) {
    /* do some stuff */
}

To make things work, we need to pass a Boolean value in the parentheses and write some code. We can do lots of things with this simple statement:

Example: Destroy a Copy if its health is zero or below

if (this.health <= 0) {
    this.kill = true;
}

Example: Use if statement to make a purchase

var price = 500;
this.money = 1230;

if (this.money >= price) {
    this.money -= price;
    this.inventory.push(/* some item */);
}

Example: Make a jump

this.onGround = true;
var keyUp = actions.Jump.down;
if (this.onGround && keyUp) {
    this.addSpeed(this, 10, 270);
}

Example: Don't jump off the screen

if (this.x < 0) {
    this.x = 0;
}
if (this.x > camera.width) {
    this.x = camera.width;
}
if (this.y < 0) {
    this.y = 0;
}
if (this.y > camera.height) {
    this.y = camera.height;
}

Let's optimize the latter one a bit:

if (this.x < 0) {
    this.x = 0;
} else if (this.x > camera.width) {
    this.x = camera.width;
}
if (this.y < 0) {
    this.y = 0;
} else if (this.y > camera.height) {
    this.y = camera.height;
}

"While" loops

"While" loops execute some code multiple times until some statement becomes false.

while (/* this statement is true */) {
    /* do something  */
}

Imagine that we need to create a number of same Copies, and that this number cannot be hard-coded or is relatively big to write it by hand. In this case, a "while" loop can automate the creation process.

var counter = 20; // We need to create 20 Copies

while (counter > 0) {
    templates.copy('Enemy', this.x, this.y);
    counter --;
}

"For" loops

General "for" loops work in the same way as "while" loops do. Let's take the previous "while" example and turn it into a "for" loop:

for (var counter = 20; counter > 0; counter--) {
    templates.copy('Enemy', this.x, this.y);
}

Looks like we mashed all the loop-related things into one line! And "for" loops are created exactly for this:

for (/*define variables here*/; /*set a condition*/; /*change variables after each iteration*/) {
    /* loop body */
}

But there are more "for" loops. For example, we can manipulate arrays and objects with "for…of" and "for…in" loops.

Tips

The "for" loops below are optional and are quite an advanced stuff, but they are also powerful instruments while manipulating complex data.

Let's take a look at "for…of" loops. They work with Arrays, which are essentially an ordered list of stuff. We can define Arrays in this way:

this.monstersPowers = [1, 2, 3, 5, 8];

console.log(this.monstersPowers[0]); // output the first element to the console

Let's output all these values to the console. Here's how we can do it with the "while" statement:

var ind = 0;
while (ind < this.monsterPowers.length) {
    console.log(this.monsterPowers[ind]);
    ind ++;
}

Tips

The length property exists on all Arrays, and it defines the number of elements inside. You can both read and change this variable.

That's how we could do the same thing with a generic "for" loop:

for (var ind = 0; ind < this.monsterPowers.length; ind++) {
    console.log(this.monsterPowers[ind]);
}

Now behold, the "for…of" loop:

for (var element of this.monsterPowers) {
    console.log(element);
}

This one does two things for us automatically:

  • it creates its own internal counters and conditions, but doesn't show them, so the code stays clean, and
  • it stores each element to the element variable (it will have a different value on each iteration).

Note though that "for…of" loops work on Arrays only. But there are also Objects.

Objects are more abstract things; they may be interpreted as cabinets with named shelfs, each shelf containing one item. By the way, Arrays are Objects, too, but instead of named shelfs they contain numerated ones. The names of these "shelfs" are called "keys", and a pair of a key and a value is a property from the previous tutorial part!

var magicWand = {
    name: 'The summoner of winter winds',
    forces: ['wind', 'ice'],
    level: 23,
    minLevel: 12
};

console.log(magicWand.name);
console.log(magicWand['forces']); // Another way to get values from Objects — Array-styled!

We can use two kinds of "for" loops to walk over all elements of an Array, but we will need a "for…in" loop to walk over all the properties of an Object:

for (var key in magicWand) {
    console.log(key, magicWand[key]);
}

What does happen there? Firstly, we tell that we want to read the keys from the magicWand in the key variable. This is mostly similar to the way how "for…of" loops work. Then we output two values at a time, at each iteration: a key (it will be "name", then "forces", etc.) and a corresponding value. We can't just write magicWand.key here, because magicWand.key will look for a static key property, but we can use Array-styled notation to get these properties dynamically.

Array-styled notation is a powerful instrument that has many uses, but for now, remember that you should use someObject[key] while using "for…in" loops.