WEBVTT
00:00:01.343 --> 00:00:04.535
Let's talk about more complex conditions
you can check with your programs.
00:00:04.835 --> 00:00:06.632
To demonstrate, I've set up my canvas
00:00:06.632 --> 00:00:09.387
to look kind like an old game
I used to play: Foursquare.
00:00:09.387 --> 00:00:11.826
There is four squares
- it's got a good name-,
00:00:11.826 --> 00:00:14.827
and you stand in one and bounce
your ball to the other squares.
00:00:14.827 --> 00:00:17.283
So right now, I'll draw an ellipse
wherever my mouse is,
00:00:17.283 --> 00:00:19.003
so that's like our ball.
00:00:19.003 --> 00:00:21.767
What I wanna do is highlight
the square that the ball is in,
00:00:21.767 --> 00:00:24.202
by drawing a white rectangle on top of it.
00:00:24.202 --> 00:00:26.106
I know I need an if statement to do that,
00:00:26.106 --> 00:00:28.234
because I only want
to do it to one at a time,
00:00:28.234 --> 00:00:30.400
only when I am over that rectangle.
00:00:30.400 --> 00:00:34.002
Okay, so let's start
by drawing that rectangle.
00:00:35.036 --> 00:00:40.437
So I'll just copy the rect from there,
but give it a different fill, a white one.
00:00:41.368 --> 00:00:44.495
Good. Now let's wrap it with an if.
00:00:45.633 --> 00:00:49.956
You see it auto-completes the curly braces
for me, so I got to move it inside.
00:00:50.601 --> 00:00:53.764
OK. So when do I want
to show that rectangle?
00:00:54.236 --> 00:01:00.985
Well, I know I wanna do it when mouse
mouseX < 200.
00:01:02.968 --> 00:01:07.465
So that works, but then if I go
down here, it is still showing.
00:01:07.465 --> 00:01:09.904
So I also need to check mouseY.
00:01:09.904 --> 00:01:12.719
Well, how do I check both of those things?
00:01:12.719 --> 00:01:14.829
That’s why we have the "and" operator.
00:01:14.829 --> 00:01:18.070
So the and operator we use
when we want to check multiple conditions.
00:01:18.070 --> 00:01:23.350
So we just write &&
and then we write our next condition,
00:01:23.350 --> 00:01:26.324
so mouseY < 200.
00:01:26.778 --> 00:01:30.807
So it doesn't light over here
anymore, and it does here! Yay.
00:01:30.807 --> 00:01:35.807
Let's do the next square,
just to prove this works.
00:01:35.807 --> 00:01:38.936
Alright, so we just have
to change some stuff.
00:01:38.936 --> 00:01:40.768
Well take this rectangle instead,
00:01:40.768 --> 00:01:44.432
and we obviously need
to change the conditions
00:01:44.432 --> 00:01:45.819
so it's not so lighting up.
00:01:45.819 --> 00:01:50.700
So this time, mouseX needs
to be greater than 200,
00:01:50.700 --> 00:01:53.563
and mouseY still less than 200.
00:01:53.563 --> 00:01:55.069
Beautiful, look at that!
00:01:55.069 --> 00:01:59.696
Alright, now, in foursquare,
whenever the ball hits the edges,
00:01:59.696 --> 00:02:02.505
you know, these lines
in the middle and corners,
00:02:02.505 --> 00:02:04.501
we always yell "EdgeBall".
00:02:04.501 --> 00:02:10.205
So I wanna do that here too.
Let's start by writing it EDGE BALLL!!!!.
00:02:10.205 --> 00:02:15.958
And let's write in the middle
and make it red, 'cuz is really important.
00:02:15.958 --> 00:02:19.367
So I only want it to happen
if I'm on the edges.
00:02:20.128 --> 00:02:22.572
So we are gonna add our if,
00:02:22.572 --> 00:02:24.528
and move this code inside of it.
00:02:25.608 --> 00:02:28.759
When I want it to happen?
00:02:28.759 --> 00:02:30.197
Well, there is edges in the middle,
00:02:30.197 --> 00:02:36.040
so the middle is when mouseX equals 200.
00:02:37.327 --> 00:02:40.904
Alright let's see. Do I get Edge Ball?
00:02:40.904 --> 00:02:44.636
There we go! EDGE BALL!!!
00:02:44.636 --> 00:02:49.422
OK. Hmm... So that works
in this middle line here,
00:02:49.422 --> 00:02:52.295
but I also want it
to work on this line here.
00:02:52.295 --> 00:02:58.024
In that case, I want mouseY equals 200,
00:02:58.527 --> 00:03:01.527
because that’s what that middle line is.
00:03:02.257 --> 00:03:07.760
Let's see, so that's not working.
Nothing is working.
00:03:08.323 --> 00:03:10.731
Oh, one thing works, just the very center.
00:03:10.731 --> 00:03:12.435
Well, that’s because I used an and,
00:03:12.435 --> 00:03:16.269
so its only gonna do it
if both of these are true,
00:03:16.269 --> 00:03:18.389
and it will only happen in the center.
00:03:18.389 --> 00:03:22.031
So what I actually wanna say is,
either one of these are true.
00:03:22.031 --> 00:03:24.701
So we use the or operator.
00:03:24.701 --> 00:03:27.323
So the or operator looks like this: ||
00:03:27.323 --> 00:03:31.529
We call those pipe symbols,
and you probably never used them before.
00:03:31.529 --> 00:03:35.764
You have to look it on your keyboard,
it is usually on your top-right.
00:03:35.764 --> 00:03:39.467
Hopefully, you actually
have it on your keyboard.
00:03:39.467 --> 00:03:42.269
Alright? Cool, so now
let's see if it works.
00:03:42.269 --> 00:03:46.033
Alright, so works there, works there,
and then works there. Beautiful.
00:03:46.033 --> 00:03:49.120
We can keep adding more conditions here,
00:03:49.120 --> 00:03:52.704
so with both and and or
you can have as many of these as you want
00:03:52.704 --> 00:03:54.598
If you need to check
60 different conditions
00:03:54.598 --> 00:03:56.361
you can totally do that, right?
00:03:56.361 --> 00:03:58.331
Because we haven’t take
care of our edges yet,
00:03:58.331 --> 00:04:04.436
so let's say if mouseX is less than 3,
00:04:05.233 --> 00:04:07.965
so that should be--
there we go, that little edge there.
00:04:07.965 --> 00:04:09.296
Very good.
00:04:09.296 --> 00:04:14.532
Or (mouseX>397)
00:04:15.133 --> 00:04:17.596
There we go! Beautiful!
00:04:17.596 --> 00:04:20.534
So we keep doing it for all the edges.
00:04:20.534 --> 00:04:24.539
So.. yeah! There is and (&&) and or (||)
and now you can see
00:04:24.539 --> 00:04:27.566
how you can build up much more
complex conditions in your programs.
00:04:27.566 --> 00:04:30.469
And that's good,
because the world is a complex place.