터치팡팡(a.k.a개미잡기) 개발강좌(8) - 캔버스위에 개미를 터치하여 잡아보자

1 minute read

html5의 캔버스(canvas)를 이용하여 터치팡팡게임을 만드는 과정을 소개합니다. a.k.a 개미잡기
완성된 게임은 터치팡팡 <- 링크를 통해 확인할수 있다.




캔버스위에 개미를 터치하여 잡아보자

저번시간까지 개미를 곡선에 따라 움직이고 머리방향도 그에 맞게 움직이게 하였다.

이제는 개미를 클릭하면 반응하게 해보자

움직이는 개미를 클릭하여 클릭되었음을 인지하려면 개미를 그릴때 부터 Path2D 를 사용해야 한다.

Path2D 가 무엇인지 알아보자.

코드펜을 보자!

(화면이 안나온다면 오측 하단에 return 버튼을 눌러보자)

See the Pen canvas 015 by mnmsoft (@mnmsoft) on CodePen.

일반적으로 지금까지 ctx.로 그림을 그린게 아니라
path2D 를 선언한다음 그것으로 그림을 그리고
마지막에 fill() 의 매개변수로 path2D 를 전달했다.

일련의 드로잉 과정을 기록하고 재상용할수 있게사용되는 오브젝트인데 이렇게 하여
그리게 되면 isPointInPath 함수를 사용하여 특정위치의 좌표가 Path2d 안에
들어있는지 체크할수가 있다. 함수명도 직관적이다.

50,50로 시작해서 50,50크기 만큼 그림을 그린것이니 다음과 같이 테스트 해보면 그려진 그림위면 true
그렇치 않으면 false 를 반환하는것을 알수 있다.

console.log(ctx.isPointInPath(path,75,75));  // True
console.log(ctx.isPointInPath(path,35,35));  // False

이제 마우스 클릭좌표나 모바일의 터치좌표를 얻어서 비교해보면 내가 개미를 터치했는지
아닌지를 정확히 알수가 있다!

다음시간에는 작업한것을 좀더 깔끔히 정리하고 개미가 여러마리 나오고 터치하게 되면 사라지게 해보자

다음에 또 만나요~!

Leave a comment