1
00:00:00,000 --> 00:00:04,031
좀 더 복잡한 기능들에 대해 공부해봅시다

2
00:00:04,031 --> 00:00:08,061
제가 예전에 즐겼던 게임처럼 보이기 위해 캔버스를 준비했어요

3
00:00:08,061 --> 00:00:10,068
Foursquare(4가지 사각형)이예요

4
00:00:10,068 --> 00:00:14,851
네개의 사각형이 있고요, 당신은 그 중 하나에 
서서 공을 다른 사각형으로 보낼 수가 있어요

5
00:00:14,851 --> 00:00:18,657
이제 마우스가 있는 곳에 타원형을 그려서, 그게 공이 되는 겁니다

6
00:00:18,657 --> 00:00:23,490
우리는 먼저 공이 놓여 있는 사각형을 하얀색으로 만들어 강조시키려고 합니다

7
00:00:23,490 --> 00:00:29,682
공이 그 사각형 위에 있을때만 강조되어야 하므로, IF문을 사용해야 합니다

8
00:00:29,682 --> 00:00:34,392
좋아요, 사각형을 그려봅시다

9
00:00:34,392 --> 00:00:39,903
여기서 rect를 복사할께요. 그리고 다른 색으로, 하얀색으로 채울께요

10
00:00:39,903 --> 00:00:44,075
좋아요. 이제 IF문 안에다 넣도록 합시다

11
00:00:44,075 --> 00:00:50,501
중괄호 닫힘이 자동으로 나타나니까, 이것들을 그 안으로 옮겨야죠

12
00:00:50,501 --> 00:00:54,044
좋아요. 직사각형이 언제 나타나게 할까요?

13
00:00:54,044 --> 00:01:00,891
mouseX가 200보다 작을 때로 조건을 줄게요

14
00:01:00,891 --> 00:01:07,072
됐네요. 하지만, 마우스를 여기 내려도 여전히 보이는군요

15
00:01:07,072 --> 00:01:10,348
그래서 mouseY도 체크해야지요

16
00:01:10,348 --> 00:01:13,269
어떻게 두가지를 모두 확인할 수 있을까요?

17
00:01:13,269 --> 00:01:15,748
이것이 “AND” 연산자를 사용하는 이유입니다

18
00:01:15,748 --> 00:01:19,258
두 가지 조건을 확인하고자 할 때 “AND”연산자를 사용하게 됩니다

19
00:01:19,258 --> 00:01:26,190
그냥 &&를 쓰고 rm 다음 조건을 쓰면 됩니다
여기서는 “mouseY<200’ 입니다

20
00:01:26,190 --> 00:01:30,974
여기서는 더 이상 불이 켜지지 않고, 여기서는 켜지네요!

21
00:01:30,974 --> 00:01:36,185
잘 되는지 다음 사각형에도 연습해 봅시다

22
00:01:36,185 --> 00:01:38,682
여기서 몇 가지 바꿔줘야 할 게 있어요

23
00:01:38,682 --> 00:01:45,394
이 사각형으로 한번 해보죠
불이 켜지지 않게 하려면 조건을 바꿔줘야 해요

24
00:01:45,394 --> 00:01:52,962
이번엔, mouseX가 200보다 크고 mouseY는 200보다 작을 경우

25
00:01:52,962 --> 00:01:56,289
멋지네요, 보세요!

26
00:01:56,289 --> 00:02:02,352
자 이제는, 공이 경계선에 닿을때마다 (경계선은 가장자리에도 있고 중간에도 있지요)

27
00:02:02,352 --> 00:02:04,881
우리는 “EdgeBall”이라 외칠거에요

28
00:02:04,881 --> 00:02:10,392
그래서 여기에 “EDGE BALLL”을 써줍시다

29
00:02:10,392 --> 00:02:14,822
가운데에 써주고
색깔은 빨간색으로 할게요

30
00:02:14,822 --> 00:02:19,775
공이 경계선에 있을 때에만 동작하게 할 거에요

31
00:02:19,775 --> 00:02:22,511
그래서 IF문을 추가 할게요

32
00:02:22,511 --> 00:02:27,173
그리고 IF문 안에 코드를 넣어줍니다


33
00:02:27,173 --> 00:02:29,660
언제 동작되어야 할까요?

34
00:02:29,660 --> 00:02:36,896
가운데로 할게요. 가운데는 mouseX가 200일 때가 되겠네요

35
00:02:36,896 --> 00:02:40,404
좋아요 Edge Ball이 나오는지 한번 보도록 하죠.

36
00:02:40,404 --> 00:02:43,817
한번 해볼까요! EDGE BALL

37
00:02:43,817 --> 00:02:49,403
경계선이 가운데 있는 경우를 보면, 가운데 선에서 동작이 되네요.

38
00:02:49,403 --> 00:02:52,130
하지만 이 선에서도 역시 동작 시키려고 합니다

39
00:02:52,130 --> 00:03:02,820
이 구문에서, mouseY == 200을 입력할게요
그래야 가운데가 되기 때문이에요

40
00:03:02,820 --> 00:03:08,315
해볼게요
아무 동작이 되지 않네요

41
00:03:08,315 --> 00:03:11,150
가운데 센터 부분에서만 동작하네요

42
00:03:11,150 --> 00:03:19,034
이것은 우리가 “AND”를 사용했기 때문이에요 
그래서 두 가지 조건이 동시에 모두 참일 때, 여기서는 가운데 센터에 위치할 때 동작해요

43
00:03:19,034 --> 00:03:22,104
이제 “둘 중 하나가 참일 때” 조건을 얘기하려고 해요

44
00:03:22,104 --> 00:03:24,697
바로 “OR” 연산자를 사용하게 됩니다

45
00:03:24,697 --> 00:03:27,640
“OR” 연산자 표기는 “||”입니다

46
00:03:27,640 --> 00:03:31,628
우리는 이것을 Pipe symbol( | )이라 부릅니다
사용해보진 않았을 거에요

47
00:03:31,628 --> 00:03:35,763
이 심볼은 여러분의 키보드 오른쪽 위에서 찾을 수 있어요

48
00:03:35,763 --> 00:03:39,625
됐나요?

49
00:03:39,625 --> 00:03:42,724
좋아요, 이제 동작하는지 해보죠

50
00:03:42,724 --> 00:03:46,695
동작하네요, 훌륭합니다

51
00:03:46,695 --> 00:03:49,491
여기에 더 많은 조건들을 추가시킬 수 있어요

52
00:03:49,491 --> 00:03:52,601
여러분이 사용하고 싶은 만큼 “AND” 와 “OR”를 사용할 수 있어요

53
00:03:52,601 --> 00:03:56,083
만약 60개의 조건을 체크해야 한다면, 물론 그렇게 할 수 있습니다

54
00:03:56,083 --> 00:03:59,101
자, 우리가 아직 경계선을 아직 마무리 하지 않았네요

55
00:03:59,101 --> 00:04:04,650
mouseX가 3보다 작을 경우를 해봅시다

56
00:04:04,650 --> 00:04:09,132
자, 이 가장자리 부분에서 동작하네요

57
00:04:09,132 --> 00:04:10,736
아주 좋아요

58
00:04:10,736 --> 00:04:14,760
또는 mouseX가 397보다 클 경우

59
00:04:14,760 --> 00:04:17,767
자 한번 해볼까요. 멋지네요!

60
00:04:17,767 --> 00:04:21,534
가장자리 부분에서 계속 해볼게요

61
00:04:21,534 --> 00:04:28,486
AND(&&)와 OR(||) 연산자를 배웠고요
이제 이 프로그램에서 더 복잡한 것들을 사용할 수 있을 거에요

62
00:04:28,486 --> 00:04:31,696
세상은 복잡한 곳입니다