WEBVTT

00:00:00.000 --> 00:00:04.031
좀 더 복잡한 기능들에 대해 공부해봅시다

00:00:04.031 --> 00:00:08.061
제가 예전에 즐겼던 게임처럼 보이기 위해 캔버스를 준비했어요

00:00:08.061 --> 00:00:10.068
Foursquare(4가지 사각형)이예요

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

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

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

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

00:00:29.682 --> 00:00:34.392
좋아요, 사각형을 그려봅시다

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

00:00:39.903 --> 00:00:44.075
좋아요. 이제 IF문 안에다 넣도록 합시다

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

00:00:50.501 --> 00:00:54.044
좋아요. 직사각형이 언제 나타나게 할까요?

00:00:54.044 --> 00:01:00.891
mouseX가 200보다 작을 때로 조건을 줄게요

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

00:01:07.072 --> 00:01:10.348
그래서 mouseY도 체크해야지요

00:01:10.348 --> 00:01:13.269
어떻게 두가지를 모두 확인할 수 있을까요?

00:01:13.269 --> 00:01:15.748
이것이 “AND” 연산자를 사용하는 이유입니다

00:01:15.748 --> 00:01:19.258
두 가지 조건을 확인하고자 할 때 “AND”연산자를 사용하게 됩니다

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

00:01:26.190 --> 00:01:30.974
여기서는 더 이상 불이 켜지지 않고, 여기서는 켜지네요!

00:01:30.974 --> 00:01:36.185
잘 되는지 다음 사각형에도 연습해 봅시다

00:01:36.185 --> 00:01:38.682
여기서 몇 가지 바꿔줘야 할 게 있어요

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

00:01:45.394 --> 00:01:52.962
이번엔, mouseX가 200보다 크고 mouseY는 200보다 작을 경우

00:01:52.962 --> 00:01:56.289
멋지네요, 보세요!

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

00:02:02.352 --> 00:02:04.881
우리는 “EdgeBall”이라 외칠거에요

00:02:04.881 --> 00:02:10.392
그래서 여기에 “EDGE BALLL”을 써줍시다

00:02:10.392 --> 00:02:14.822
가운데에 써주고
색깔은 빨간색으로 할게요

00:02:14.822 --> 00:02:19.775
공이 경계선에 있을 때에만 동작하게 할 거에요

00:02:19.775 --> 00:02:22.511
그래서 IF문을 추가 할게요

00:02:22.511 --> 00:02:27.173
그리고 IF문 안에 코드를 넣어줍니다


00:02:27.173 --> 00:02:29.660
언제 동작되어야 할까요?

00:02:29.660 --> 00:02:36.896
가운데로 할게요. 가운데는 mouseX가 200일 때가 되겠네요

00:02:36.896 --> 00:02:40.404
좋아요 Edge Ball이 나오는지 한번 보도록 하죠.

00:02:40.404 --> 00:02:43.817
한번 해볼까요! EDGE BALL

00:02:43.817 --> 00:02:49.403
경계선이 가운데 있는 경우를 보면, 가운데 선에서 동작이 되네요.

00:02:49.403 --> 00:02:52.130
하지만 이 선에서도 역시 동작 시키려고 합니다

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

00:03:02.820 --> 00:03:08.315
해볼게요
아무 동작이 되지 않네요

00:03:08.315 --> 00:03:11.150
가운데 센터 부분에서만 동작하네요

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

00:03:19.034 --> 00:03:22.104
이제 “둘 중 하나가 참일 때” 조건을 얘기하려고 해요

00:03:22.104 --> 00:03:24.697
바로 “OR” 연산자를 사용하게 됩니다

00:03:24.697 --> 00:03:27.640
“OR” 연산자 표기는 “||”입니다

00:03:27.640 --> 00:03:31.628
우리는 이것을 Pipe symbol( | )이라 부릅니다
사용해보진 않았을 거에요

00:03:31.628 --> 00:03:35.763
이 심볼은 여러분의 키보드 오른쪽 위에서 찾을 수 있어요

00:03:35.763 --> 00:03:39.625
됐나요?

00:03:39.625 --> 00:03:42.724
좋아요, 이제 동작하는지 해보죠

00:03:42.724 --> 00:03:46.695
동작하네요, 훌륭합니다

00:03:46.695 --> 00:03:49.491
여기에 더 많은 조건들을 추가시킬 수 있어요

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

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

00:03:56.083 --> 00:03:59.101
자, 우리가 아직 경계선을 아직 마무리 하지 않았네요

00:03:59.101 --> 00:04:04.650
mouseX가 3보다 작을 경우를 해봅시다

00:04:04.650 --> 00:04:09.132
자, 이 가장자리 부분에서 동작하네요

00:04:09.132 --> 00:04:10.736
아주 좋아요

00:04:10.736 --> 00:04:14.760
또는 mouseX가 397보다 클 경우

00:04:14.760 --> 00:04:17.767
자 한번 해볼까요. 멋지네요!

00:04:17.767 --> 00:04:21.534
가장자리 부분에서 계속 해볼게요

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

00:04:28.486 --> 00:04:31.696
세상은 복잡한 곳입니다