Side Scroller 4

Planning
Step 1
Temp1539909220
Information
Step 2
Temp1539900748
Step 3
You can also use ! (not) to change a variable from true to false

Imagine I have a variable called condition, and I assign it to true:

var condition = true;

Then, I would know that !condition is false. So if I say:

condition = !condition

I just switched my variable from true, to false. But now that the variable is false, if I do it again:

condition = !condition

I just made condition true again. The same code will make the variable the opposite of whatever it just was.

Step 4
Temp1539907899
Check Your Work
Step 5

Now, when you press the "enter" key, your player should say "Hello!". When you press it again, the message should disappear.

Step 6
Temp1539039109
Step 7
Temp1539197327
Check Your Work
Step 8
Is the player really to the left of the sign?

Run your code, and move your player around to see exactly where it says "Left of the sign" and where it stops.

Notice how the player can overlap the sign? Our if statement only checks if the player's left edge passes the sign.

Webp.net gifmaker %285%29
Information
Step 9
Finding the right corner

player.x refers to the left side of the player. If we want to find the X-coordinate of the right side, we have to add the player's width.

Temp1539198554
Step 10
Add the player's width

Change your code to check if the player's right side is to the left of the sign by adding player.width

Temp1539294390
Check Your Work
Step 11
Temp1539295780
Challenge
Step 12
Check if the player is on the right

Change the code we just wrote to check if the player is on the right side, now.

  • You will need to check if the player's x is greater than the sign's right corner
  • the sign's right corner will be sign.x + sign.w
  • You will also want to change message as well.
Check Your Work
Step 13
Looking good!

Maker sure that the message does NOT get displayed when the player is overlapping the sign.

Temp1539382546
Information
Step 14
The || (or) operator
Temp1539893396
Step 15
Temp1539893673
Check Your Work
Step 16
Temp1539893775
Information
Step 17
The && (and) operator.

We use && to mean "and" in conditions. When you use &&, the conditions on either side must be true in order to run the code.

Temp1539383091
Information
Step 18
Collision
Temp1539383556
  • The player's right corner is player.x + player.width

  • If something is to the right, its X is greater

  • So, player.x + player.width has to be greater than sign.x

  • The player's left corner is player.x

  • If something is to the left, its X is less

  • So, player.x has to be less than sign.x + sign.width

Challenge
Step 19
Check if the player is on top of the sign
Temp1539908646

Change the condition in your if statement to detect if the player is overlapping the sign.

Check Your Work
Step 20
Temp1539909204
Side Scroller 4 Info

Account

MVCode Clubs

Created By

Mandala2 slinkous

Course:

Side Scroll Adventure

Access Level

premium

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach