여기는 다른 애니메이션이 있네요 이번에는 화면을 가로지르는 공이 있네요
그리고 여러분은 어떻게 이것이 완성되었는지 알 것입니다
우리는 공의 위치를 알려주는 변수(variable) x와
한번에 얼마나 빨리 (즉, 시간당 거리) 움직이는지 알려주는 변수 speed
그리고 친숙한 드로우 루프(draw loop)를 가지고 있습니다
이 루프는 매번 배경을 다시그리며, 칠할 색을 설정하고 위치 x에 타원형(ellipse)를 매번 그리며
매번 x의 값을 예전의 x값에 speed의 값을 더해줍니다
즉, speed의 값을 작게 만들수록 천천히 움직이는 것처럼 보일겁니다
만일 speed의 값이 음수라면 공은 뒤쪽으로 이동하는 것 처럼 보일겁니다
또한 speed의 값이 0이라면 공은 멈춰있는 것처럼 보일겁니다
그리고 speed의 값이 0이 아닌 이상
언젠가 공은 화면에서 사라질 겁니다
Restart버튼을 이용하여 다시 돌아오게 할 수 있습니만 그러고 나면 언젠가는 다시 예전처럼 사라질것입니다
그러므로 Restart버튼을 다시 누르고 또 Restart를 누르고...
이것을 어떻게 해야할까요? 공이 화면의 오른쪽 경계(edge)에 닿으면
화면의 뒤로 사라지는 대신 다시 되돌아 오도록 만들고 싶습니다
그리고 단순히 speed를 -5로 설정하는 것으로 공을 되돌아오게 할 수 있다는 것을 알고 있습니다
즉, 공의 속도를 음수로 준다면 그 공은 돌아올 겁니다 하지만 이 방법에도 문제가 있습니다
나는 단지 만일 공이 오른쪽 경계에 닿으면 공의 speed를 바꾸기를 원해요
지금 이야기 했던 것을 다시한번 생각해보죠
만일(if) 공이 오른쪽 경계에 닿으면 공의 speed를 바꾸기를 원해요
제 생각에 이것은 if 문(if Statement)를 말하는 것 같아요
지금까지 우리는 오직 주어진 컴퓨터 커맨드(commands)를 그것이 무엇이든 실행하는 것만 해보았습니다
하지만 if문은 다음과 같은 방법을 이야기합니다
"나는 네가 오직 특정한 상황일때만 이 코드를 실행하기를 원해"
"그러므로 오직 공이 오른쪽 경계에 닿았을때만 공의 speed를 바꾸고 싶어"
그러면 여기서 코드가 어떤 모습인지 보도록 하죠
이것은 "IF"라는 글자와 한쌍의 괄호 ( () ) 그리고 한쌍의 중괄호 ( {} )로 이루어져있습니다
괄호 안에는 프로그램이 실행되기 위한 조건(condition)을 넣고
중괄호 안에는 실행되어야하는 코드를 넣습니다
이것이 작동하는 방법을 간단하게 말해보면 " 조건이 참이면 코드를 실행하고, 거짓이라면 그냥둔다"
그러므로 지금 상황에서 조건은 공이 우측 경계에 닿는 것이고
그럼 어떻게 공이 오른쪽 경계에 닿는다는 것을 알 수 있을까요?
우리는 공이 어디있는지 나타내는 변수(variable) x를 가지고 있고 캔버스의 경계는 x가 400이 될때라는 것을 이미 알고있어요
그러므로 x가 400보다 커지면, 우리는 공이 우측 경계를 조금이나 넘어갔다는 것을 알수 있죠
그러면 이것이 어떻게 작동하는지 봅시다
코드가 실행되면 전에 이야기 한 것 처럼 우리는 단지 speed의 값을 바꿀거에요
speed를 -5가 되도록 하고 Restart 버튼을 누르고 어떤일이 일어나는지 보죠
자 이번에는 공이 오른쪽 경계에 닿고 이것은 튀어나오게 되요!!!
하지만 여전히 화면에서 사라지는 것은 여전하네요
하지만 괜찮아요 반대쪽 경계에서도 똑같이 설정하면 될거에요
그러므로 만일 공이 왼쪽 경계에 닿았는지도 체크하도록 해볼게요
만일 x가 0보다 작아진다면, speed의 값을 양수인 5로 만들어줍시다
모든것이 준비되면 Restart버튼을 눌러봅시다
비융
띠옹
디용
정상적으로 작동하네요!!!
보면 알겠지만 우리는 공을 경계에서 튀어나오도록 설정했지만 경계에서 조금 지난 곳에서 튀어나오는 것처럼 느껴지고 있어요
그리고 어떠한 타원형을 어느위치에 그릴지 결정하는 두개의 파라미터(parameter)가 있었다는것을 기억하나요?
그러므로 지금까지는 공의 중앙부분이 경계에 닿을때 즉 공의 반정도가 경계를 넘어간 상태를 체크하고 있는 것이죠
그러므로 이것을 고치기 위해서는 공을 조금 더 일찍 멈추어야해요
즉 공의 중심이 아닌 경계지점의 위치가 400이 되면 멈추어야 하는 것이죠
타원형을 그리는 함수의 형태를 잘 보면 타원형의 너비(width)는 50인 것을 볼 수 있어요
이것은 타원의 중심부터 경계까지의 값이 25라는 것을 의미하죠
그러므로 우리는 타원형의 중심이 375일때 멈추기를 원합니다 왜냐면 400에서 25를 뺀 값이 375이기 때문이죠
그러므로 x가 400보다 클지를 체크하는것 대신에 x가 375보다 큰지를 체크하고
x가 0보다 작을때를 체크하는것 대신에 x스가 25보다 작을때를 체크합니다
저기 튀어나오는 공들을 보세요! 이제 모든것이 아주 완벽해요!