< Return to Video

Logical Operators (Video Version)

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

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

more » « less
Video Language:
English
Duration:
04:32

English subtitles

Revisions