0:00:01.343,0:00:04.535
Let's talk about more complex conditions[br]you can check with your programs.

0:00:04.835,0:00:06.632
To demonstrate, I've set up my canvas

0:00:06.632,0:00:09.387
to look kind like an old game[br]I used to play: Foursquare.

0:00:09.387,0:00:11.826
There is four squares[br]- it's got a good name-,

0:00:11.826,0:00:14.827
and you stand in one and bounce[br]your ball to the other squares.

0:00:14.827,0:00:17.283
So right now, I'll draw an ellipse[br]wherever my mouse is,

0:00:17.283,0:00:19.003
so that's like our ball.

0:00:19.003,0:00:21.767
What I wanna do is highlight[br]the square that the ball is in,

0:00:21.767,0:00:24.202
by drawing a white rectangle on top of it.

0:00:24.202,0:00:26.106
I know I need an <i>if</i> statement to do that,

0:00:26.106,0:00:28.234
because I only want[br]to do it to one at a time,

0:00:28.234,0:00:30.400
only when I am over that rectangle.

0:00:30.400,0:00:34.002
Okay, so let's start[br]by drawing that rectangle.

0:00:35.036,0:00:40.437
So I'll just copy the <i>rect</i> from there,[br]but give it a different fill, a white one.

0:00:41.368,0:00:44.495
Good. Now let's wrap it with an <i>if</i>.

0:00:45.633,0:00:49.956
You see it auto-completes the curly braces[br]for me, so I got to move it inside.

0:00:50.601,0:00:53.764
OK. So when do I want[br]to show that rectangle?

0:00:54.236,0:01:00.985
Well, I know I wanna do it when mouse[br]<i>mouseX < 200</i>.

0:01:02.968,0:01:07.465
So that works, but then if I go[br]down here, it is still showing.

0:01:07.465,0:01:09.904
So I also need to check <i>mouseY</i>.

0:01:09.904,0:01:12.719
Well, how do I check <i>both</i> of those things?

0:01:12.719,0:01:14.829
That’s why we have the "and" operator.

0:01:14.829,0:01:18.070
So the <i>and</i> operator we use[br]when we want to check multiple conditions.

0:01:18.070,0:01:23.350
So we just write <i>&&</i> [br]and then we write our next condition,

0:01:23.350,0:01:26.324
so <i>mouseY < 200</i>.

0:01:26.778,0:01:30.807
So it doesn't light over here[br]anymore, and it does here! Yay.

0:01:30.807,0:01:35.807
Let's do the next square,[br]just to prove this works.

0:01:35.807,0:01:38.936
Alright, so we just have[br]to change some stuff.

0:01:38.936,0:01:40.768
Well take this rectangle instead,

0:01:40.768,0:01:44.432
and we obviously need[br]to change the conditions

0:01:44.432,0:01:45.819
so it's not so lighting up.

0:01:45.819,0:01:50.700
So this time, mouseX needs [br]to be greater than 200,

0:01:50.700,0:01:53.563
and mouseY still less than 200.

0:01:53.563,0:01:55.069
Beautiful, look at that!

0:01:55.069,0:01:59.696
Alright, now, in foursquare,[br]whenever the ball hits the edges,

0:01:59.696,0:02:02.505
you know, these lines[br]in the middle and corners,

0:02:02.505,0:02:04.501
we always yell "EdgeBall".

0:02:04.501,0:02:10.205
So I wanna do that here too.[br]Let's start by writing it <i>EDGE BALLL!!!!</i>.

0:02:10.205,0:02:15.958
And let's write in the middle [br]and make it red, 'cuz is really important.

0:02:15.958,0:02:19.367
So I only want it to happen[br]if I'm on the edges.

0:02:20.128,0:02:22.572
So we are gonna add our <i>if</i>,

0:02:22.572,0:02:24.528
and move this code inside of it.

0:02:25.608,0:02:28.759
When I want it to happen?

0:02:28.759,0:02:30.197
Well, there is edges in the middle,

0:02:30.197,0:02:36.040
so the middle is when <i>mouseX equals 200</i>.

0:02:37.327,0:02:40.904
Alright let's see. Do I get Edge Ball?

0:02:40.904,0:02:44.636
There we go! <i>EDGE BALL!!!</i>

0:02:44.636,0:02:49.422
OK. Hmm... So that works[br]in this middle line here,

0:02:49.422,0:02:52.295
but I also want it[br]to work on this line here.

0:02:52.295,0:02:58.024
In that case, I want <i>mouseY equals 200</i>,

0:02:58.527,0:03:01.527
because that’s what that middle line is.

0:03:02.257,0:03:07.760
Let's see, so that's not working.[br]Nothing is working.

0:03:08.323,0:03:10.731
Oh, one thing works, just the very center.

0:03:10.731,0:03:12.435
Well, that’s because I used an <i>and</i>,

0:03:12.435,0:03:16.269
so its only gonna do it[br]if <i>both</i> of these are true,

0:03:16.269,0:03:18.389
and it will only happen in the center.

0:03:18.389,0:03:22.031
So what I actually wanna say is,[br]<i>either</i> one of these are true.

0:03:22.031,0:03:24.701
So we use the <i>or</i> operator.

0:03:24.701,0:03:27.323
So the <i>or</i> operator looks like this: <i>||</i>

0:03:27.323,0:03:31.529
We call those pipe symbols,[br]and you probably never used them before.

0:03:31.529,0:03:35.764
You have to look it on your keyboard,[br]it is usually on your top-right.

0:03:35.764,0:03:39.467
Hopefully, you actually[br]have it on your keyboard.

0:03:39.467,0:03:42.269
Alright? Cool, so now[br]let's see if it works.

0:03:42.269,0:03:46.033
Alright, so works there, works there,[br]and then works there. Beautiful.

0:03:46.033,0:03:49.120
We can keep adding more conditions here,

0:03:49.120,0:03:52.704
so with both <i>and</i> and <i>or</i>[br]you can have as many of these as you want

0:03:52.704,0:03:54.598
If you need to check[br]60 different conditions

0:03:54.598,0:03:56.361
you can totally do that, right?

0:03:56.361,0:03:58.331
Because we haven’t take[br]care of our edges yet,

0:03:58.331,0:04:04.436
so let's say if mouseX is less than 3,

0:04:05.233,0:04:07.965
so that should be--[br]there we go, that little edge there.

0:04:07.965,0:04:09.296
Very good.

0:04:09.296,0:04:14.532
Or <i>(mouseX>397)</i>

0:04:15.133,0:04:17.596
There we go! Beautiful!

0:04:17.596,0:04:20.534
So we keep doing it for all the edges.

0:04:20.534,0:04:24.539
So.. yeah! There is <i>and</i> (&&) and <i>or</i> (||)[br]and now you can see

0:04:24.539,0:04:27.566
how you can build up much more[br]complex conditions in your programs.

0:04:27.566,0:04:30.469
And that's good,[br]because the world is a complex place.