만들면서 멘탈 여러번 나갔던 지렁이게임
캔버스라는 요소를 강의에서 한번 들었을뿐 자세히 공부해본적이 없어 이 부분이 가장 복병일거라고 생각했는데.. 캔버스로 구현해내는건 정말 재미있었고 복병은 굴러가지않는 내 머리였다!
window.requestAnimationFrame(callback);나를 제일 힘들게 한 부분
이 부분은 나중에 따로 자세히 포스팅 해두고 두고두고 봐야겠다.
호기롭게 그린 그리드🙂...
① 지렁이 머리를 만들고
② 칸에 맞춰 먹이도 만들고
③ 지렁이 머리랑 먹이가 맞닿는 순간이 되면!
지렁이 몸통의 배열을 하나 늘리면 되겠구나
(=지렁이 몸통을 늘리면 되겠구나!)
.
.
너 지금 뭐하는..?
머리가 왜 한없이 끊임없이 늘어나지..?
여러 방법으로 코드를 수정해봤는데 머리는 끝도없이 늘어났고...
다시 한번 꼼꼼히 MDN 문서를 읽어보았다.
window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.
(이하생략..)
출처:https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame
아..그러니까..
내가 구현하고자하는 애니메이션을 콜백으로 전달 -> 다시 한번 그리기 전에 해당 콜백을 실행이말인가?
그러면 배경화면을 하나로 지정해두지말고 (지금은 그리드가 찍혀있다)
배경화면도 계속해서 다시 리페인트해주면 되는건가?싶어서
function drawBackground(){
ctx.fillStyle='rgb(37, 15, 81)'
ctx.fillRect(0,0,450,450)
}이렇게 만들어주고 애니메이션이 그려지는 함수 부분에 넣어줬더니
지렁이 머리가 늘어나지않고 지정해놓은 방향으로 움직이는걸 볼 수 있었다!
글로 써놓으니까 되게 금방 수정한것처럼 보인다..하루 꼬박 걸렸는데😂
그래도 덕분에 다신 안까먹을 수 있을것같다.
라고 생각해놓고 ^^
버젓이 프레임 찍히는곳에 먹이 만드는 함수를 실행시키는 나
^^
정말 멋지다!
