Let's talk about more complex conditions you can check with your programs.
To demonstrate, I've set up my canvas
to look kind like an old game I used to play: Foursquare.
There is four squares - it's got a good name-,
and you stand in one and bounce your ball to the other squares.
So right now, I'll draw an ellipse wherever my mouse is,
so that's like our ball.
What I wanna do is highlight the square that the ball is in,
by drawing a white rectangle on top of it.
I know I need an if statement to do that,
because I only want to do it to one at a time,
only when I am over that rectangle.
Okay, so let's start by drawing that rectangle.
So I'll just copy the rect from there, but give it a different fill, a white one.
Good. Now let's wrap it with an if.
You see it auto-completes the curly braces for me, so I got to move it inside.
OK. So when do I want to show that rectangle?
Well, I know I wanna do it when mouse mouseX < 200.
So that works, but then if I go down here, it is still showing.
So I also need to check mouseY.
Well, how do I check both of those things?
That’s why we have the "and" operator.
So the and operator we use when we want to check multiple conditions.
So we just write && and then we write our next condition,
so mouseY < 200.
So it doesn't light over here anymore, and it does here! Yay.
Let's do the next square, just to prove this works.
Alright, so we just have to change some stuff.
Well take this rectangle instead,
and we obviously need to change the conditions
so it's not so lighting up.
So this time, mouseX needs to be greater than 200,
and mouseY still less than 200.
Beautiful, look at that!
Alright, now, in foursquare, whenever the ball hits the edges,
you know, these lines in the middle and corners,
we always yell "EdgeBall".
So I wanna do that here too. Let's start by writing it EDGE BALLL!!!!.
And let's write in the middle and make it red, 'cuz is really important.
So I only want it to happen if I'm on the edges.
So we are gonna add our if,
and move this code inside of it.
When I want it to happen?
Well, there is edges in the middle,
so the middle is when mouseX equals 200.
Alright let's see. Do I get Edge Ball?
There we go! EDGE BALL!!!
OK. Hmm... So that works in this middle line here,
but I also want it to work on this line here.
In that case, I want mouseY equals 200,
because that’s what that middle line is.
Let's see, so that's not working. Nothing is working.
Oh, one thing works, just the very center.
Well, that’s because I used an and,
so its only gonna do it if both of these are true,
and it will only happen in the center.
So what I actually wanna say is, either one of these are true.
So we use the or operator.
So the or operator looks like this: ||
We call those pipe symbols, and you probably never used them before.
You have to look it on your keyboard, it is usually on your top-right.
Hopefully, you actually have it on your keyboard.
Alright? Cool, so now let's see if it works.
Alright, so works there, works there, and then works there. Beautiful.
We can keep adding more conditions here,
so with both and and or you can have as many of these as you want
If you need to check 60 different conditions
you can totally do that, right?
Because we haven’t take care of our edges yet,
so let's say if mouseX is less than 3,
so that should be-- there we go, that little edge there.
Very good.
Or (mouseX>397)
There we go! Beautiful!
So we keep doing it for all the edges.
So.. yeah! There is and (&&) and or (||) and now you can see
how you can build up much more complex conditions in your programs.
And that's good, because the world is a complex place.