From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 4.10: If (Conditional statements)

The conditional statements we worked with in the last section are the building block of the conditional statement. The basic idea is that we want our code to run different parts of itself based on the state of one or more variables. An example of this would be allowing people eighteen or older to vote. The diagram below, known as a flow chart, demonstrates the flow of the program.

One reason for having a scripting language is to be able to react to what the user does. To control the flow of the program requires making decisions. This is what the if statement does. The if statement uses the following format:

You will notice that we are specifying a statement. Only a single statement after the if statement is considered to be what to do if the condition is true. We indent this statement to make it easier for humans to read the program. The computer does not care whether we indent the code or not. It only cares that there is a statement after the if statement. This leads to an issue. What if we want to have more than one statement as part of the condition?

The solution to this problem is to have a block of code. We have already been using blocks, as the { and } symbols we used to indicate where our main method started and stopped are a block. The same concept works with if statements.

There is no rule as to where to place the start of the block so you will often see the block start on the same line as the if statement. This more condensed form of formatting is the preferred way for most JavaScript programmers, even though the first way is more readable due to the simple fact that the braces line up.

Sometimes we may want one action to occur when the condition is true and a different action to occur when the condition is false. This is where the optional else statement comes into play. This flowchart shows how the program works through the decision.

The code for doing this takes the following format:

As with the if statement, if you wish to have more than one statement after the if or the else, you should place the block of statements into a block by using a pair of curly braces {}. Here is the flowchart example above represented as code.

The condition is simply a mathematical condition, but two equal signs are used together to indicate equals while a != combination is used for not equal. The greater than and less than symbols (<, <=, >, >=) can also be used. Be careful not to use a single equals in a condition as this will assign that value to the variable which can lead to hard to track bugs. Many languages, such as Pascal, use equals for equality and use something else (:= in Pascal) for assignment.

Conditions can be combined to form more complex conditions. This is done by placing each condition in it's own set of brackets and then placing an and (&&) or an or (||) symbol between them.

The and (&&) operation means that both conditions must be true if the condition is to be true. If either or both conditions are false then the condition is false. For example, to make sure a player is in the bounds of a 100x100 square they must be within all four sides. We may have the following code to check this:

Note that the range for the square is 0 through 99 inclusive. This is a programmer thing that makes a lot of sense once you start doing a lot of programming but can be confusing for non-programmers. This makes even more sense when you do machine language programming.

The or (||) operation just requires that one of the conditions is true, though both conditions being true is also acceptable. For example, to check if something is not within the bounds of a square we can check to see if any of the bounds have been violated with the following code:

It is also possible to assign a condition result to a Boolean variable which can be useful if you have to check the results of some condition multiple times. To demonstrate this, the inside box check could be written as follows:

You will notice that we are assuming that the player is a single point. This may not be the case, so a bit more advanced logic would need to be used here. While this is a bit complicated, lets look at how we would check if there was an overlap between two rectangles.

This can be simplified to two separate checks as if there is horizontal overlap but no vertical overlap, or vice-versa, then there is no overlap. This greatly simplifies this problem. This can now be thought of two number-line comparisons. As can be seen in the following image, there are several different ways two lines can overlap.

We can see that one line may completely overlap the other line, or only either end may be overlapped. In the near miss cases on the right we will notice that if the end point of the line is less than the start point of the other line then there is not an overlap. Likewise, if the start point of a line is greater than the end point of the other line then there is no overlap. However, in the three collision situations on the left, one, or both, of these two conditions is not true. So if we have the horizontal start position of the player as playerX1 and the horizontal end position being playerX2 we could use the following code to see if there is a horizontal overlap between the player and an object that spans the range 50 to 100.

We can then apply the same concepts to the y location, and combine them to get the following:

We will be delving more into collision logic in future chapters. We are not quite finished with condition statements yet, however. The statement or block that follows an if statement can itself contain if statements. This is known as nested if statements and is what we will explore next.