언덕위를 걷는양!

언덕 그리기->언덕 움직이기
양 이미지 가져오기->양 프레임 올리기->양 움직이기->양이 곡선 위를 걷기
이렇게 따로따로 해왔다
이제 대망의 하이라이트
양이 우리가 그린 언덕 위를 걷게 만들겠다!

두 가지 방법이 있다
1. 현실처럼 걷게 하는 법
2.x좌표에 따른 y좌표와 기울기를 걷는 법
우리는 2번을 쓸 것이다
이유는
"곡선 위에 일정한 속도로 오브젝트를 움직이게 하는 공식을 모른다"(나는)

과정
1. 클라이언트 접속 시 처음 양위치 계산
2. 베지어 클래스에 어떤 포인트 차례인지 알려주는 함수를 만든다
3. 언덕에 맞게 좌표를 넣어줄 함수를 만든다
4. 그거에 맞게 좌표를 계산해 주는 함수를 만든다
5. 그거를 받아서 양에게 준다

진짜 여기가 헬이었다
비슷하게 만드는 방법은 많지만 오차가 많기에...
내가 만들려는 방법은
아침 6시에 오른쪽 끝에서 양이 등장해
24시에 왼쪽 끝에서 사라지게 하려는 방법이다!

1. 클라이언트 접속 시 처 음양 위치 계산

setup에서 설정해준다

1. 하루를 18시간으로 잡고->분으로 만들어주고->최초 접속 시간 역 시분으로 계산해주고->비교해서 18시간 중 몇 퍼센트 진행됐는지 알아내서->퍼센트를 구해준다 그리고 화면*퍼센트를 해주면 성공!
여담으로 저기서 이상하게 parsefloat를 해주지 않으면 좌표를 받지 못하던데 그래서 넣어줬다
tofix 저게 소수점 떼어 주는 건데 그걸 떼어내면 문자열로 변하는 건가..?
2. 양이 움직일 스피드를 구할 건데
전체 화면/4/18*60/60/60
마지막에 프레임 레이트를 꼭 나눠줘야 한다 왜냐 프레임은 1초에 몇 번 코드를 읽는지 이니까

2. 베지어 클래스에 어떤 포인트 차례인지 알려주는 함수를 만든다

draw에 sheepxyz()하고

 

밑에 이렇게 gety2()

리턴 값에 따라 양의 스위치를 바꿔주고 스위치에 따라 어떤 포인트 즉 pointsx [0]/[1], pointsy [0]/[1] 어떤 걸 넣어줘야 하는지 어디 언덕을 걷는지 알려주는 거다
그다음

3. 언덕에 맞게 좌표를 넣어줄 함수를 만든다
bezier 클래스로 가서!
( hill이라고 되어있는데 setup에서 let hill=new bezier(변수, 변수 2..) 이렇게 받고 있는 거다
어지간하면 hill이라고 하지 말고 bezier라고 하던가 아니면 클래스 이름을 hill이라고 해주던가 통일시키는 게 좋다)

gety주목

While문에 sheepx좌표와 포인트 좌표를 계속 던져주면서 알맞은 좌표를 가져오면 check로 좌표를 리턴해주고 없다면 false을 리턴해주고 false이라면 break를 하는 게 아니라 n 즉 배열 속 다음 번호를 가져와서 다시 넣어준다
만약 n이 0보다 크지 않다면 반복문이 끝나고 sheepsw에 따라 다른 문자열을 리턴해준다 "next"/"reset"
만약 pointsx [1]/y [1]을 뒤졌는데 없다면 pointsx [0]/[0]으로 다시 가야 해서 reset 반대라면 0->1로 가야 해서 next라고 해준 것뿐 맘대로 정해도 된다 다만 draw에서 sheepxyz()와 같아야겠죠?

4. 그거에 맞게 좌표를 계산해 주는 함수를 만든다

근소값 리턴하기!

그다음 sheepx에 가장 근접한 좌표를 리턴 받아오면 되는데 있다면 y값/탄젠트 값 기울기를 배열에 넣어서 주면 되고! 없다면 false를 줘서 다시 다음 언덕 좌표를 받아서 또 검사해 보면 된다!

결과!

까페+옛날 맥북+gif=여서 엄청 끊기는 거다

짠 현재 여건이 좋지 않아서 좀 끊기게 변환됐는데
실제로 하면 전혀 그렇지 않다
진짜 이 메커니즘을 생각해내는데 4일밤낮 그리고 꿈속에서도 코딩을 했다
마지막 4일째 꾼 꿈으로 30분 동안 오타 하나 없이 집중해서 만드니 성공했던
기억이 있다
정말 기뻤다

이 토이 프로젝트는 여기까지만 리뷰하는 게 좋겠다
이제 곧 학원에 가야 해서 좀 더 집중해서 공부를 해야 하기 때문이다
나머지 이제 별/구름은 쉽다 여기까지 할 줄 안다면 금방 한다

작업을 맞춘 후기는 그다음 마치며에서 쓰겠다!