Game Design with Crafty.js – Part 4

We’ve been using JavaScript to create video games, and last time we created a classic video game like ‘Frogger’.

Now we want to pause for a moment and talk a bit more about the JavaScript programming language.

About JavaScript

JavaScript is the name for a programming language. JavaScript is used to make apps, websites, and almost anything!

Let’s talk about a thing called Variables.

A variable is a letter or word (like x or y) that holds a value (like 10, -20)

You can create a variable like this:

var x = 10;

or

var cars = 0;

You can do math to variables like this:

cars = 500 - 20;

Now, cars equals 480.

Let’s get rocking with a new pen to play around with.

Let’s talk about a thing called Control Structures.

If

if (this.y < 0) {
message('You Win!');
//Stop the game
Crafty.stop()
}

If-Else

if (apple == "green") {
//Green apples are worth 5 points
score(5);
}
else {
//'Apples that are not green' are worth 1 point.
score(1);
}

While

//Create 10 cars.
var cars = 0;
while (cars < 10) {
createCar()
cars = cars + 1;
}

Now, let’s get back to our game of Frogger. Use this pen. Let’s use our new tools to work a little more efficiently!

Let’s use an If to decide when we will when the game. Look for a You Win message. Change the if so that the Frog wins by reaching the top of the screen.

Let’s use a While to create lots of traffic.