좀 더 복잡한 기능들에 대해 공부해봅시다

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

Foursquare(4가지 사각형)이예요

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

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

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

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

좋아요, 사각형을 그려봅시다

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

좋아요. 이제 IF문 안에다 넣도록 합시다

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

좋아요. 직사각형이 언제 나타나게 할까요?

mouseX가 200보다 작을 때로 조건을 줄게요

됐네요. 하지만, 마우스를 여기 내려도 여전히 보이는군요

그래서 mouseY도 체크해야지요

어떻게 두가지를 모두 확인할 수 있을까요?

이것이 “AND” 연산자를 사용하는 이유입니다

두 가지 조건을 확인하고자 할 때 “AND”연산자를 사용하게 됩니다

그냥 &&를 쓰고 rm 다음 조건을 쓰면 됩니다
여기서는 “mouseY<200’ 입니다

여기서는 더 이상 불이 켜지지 않고, 여기서는 켜지네요!

잘 되는지 다음 사각형에도 연습해 봅시다

여기서 몇 가지 바꿔줘야 할 게 있어요

이 사각형으로 한번 해보죠
불이 켜지지 않게 하려면 조건을 바꿔줘야 해요

이번엔, mouseX가 200보다 크고 mouseY는 200보다 작을 경우

멋지네요, 보세요!

자 이제는, 공이 경계선에 닿을때마다 (경계선은 가장자리에도 있고 중간에도 있지요)

우리는 “EdgeBall”이라 외칠거에요

그래서 여기에 “EDGE BALLL”을 써줍시다

가운데에 써주고
색깔은 빨간색으로 할게요

공이 경계선에 있을 때에만 동작하게 할 거에요

그래서 IF문을 추가 할게요

그리고 IF문 안에 코드를 넣어줍니다

언제 동작되어야 할까요?

가운데로 할게요. 가운데는 mouseX가 200일 때가 되겠네요

좋아요 Edge Ball이 나오는지 한번 보도록 하죠.

한번 해볼까요! EDGE BALL

경계선이 가운데 있는 경우를 보면, 가운데 선에서 동작이 되네요.

하지만 이 선에서도 역시 동작 시키려고 합니다

이 구문에서, mouseY == 200을 입력할게요
그래야 가운데가 되기 때문이에요

해볼게요
아무 동작이 되지 않네요

가운데 센터 부분에서만 동작하네요

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

이제 “둘 중 하나가 참일 때” 조건을 얘기하려고 해요

바로 “OR” 연산자를 사용하게 됩니다

“OR” 연산자 표기는 “||”입니다

우리는 이것을 Pipe symbol( | )이라 부릅니다
사용해보진 않았을 거에요

이 심볼은 여러분의 키보드 오른쪽 위에서 찾을 수 있어요

됐나요?

좋아요, 이제 동작하는지 해보죠

동작하네요, 훌륭합니다

여기에 더 많은 조건들을 추가시킬 수 있어요

여러분이 사용하고 싶은 만큼 “AND” 와 “OR”를 사용할 수 있어요

만약 60개의 조건을 체크해야 한다면, 물론 그렇게 할 수 있습니다

자, 우리가 아직 경계선을 아직 마무리 하지 않았네요

mouseX가 3보다 작을 경우를 해봅시다

자, 이 가장자리 부분에서 동작하네요

아주 좋아요

또는 mouseX가 397보다 클 경우

자 한번 해볼까요. 멋지네요!

가장자리 부분에서 계속 해볼게요

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

세상은 복잡한 곳입니다