Logical Operators (Video Version)

Implementation of a FourSquare game, demonstrating how to use the Logical Operators AND (&&) and OR (||)

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.