1. 소개
2. 사용 방법
3. 제작 계기
4. 제작 과정 소개
5. 제작 후 느낀 점
6. 한계점
도라에몽(캐릭터)을 움직여 목표 점수를 달성해야 하는 미니 게임입니다.
- 자바스크립트의 canvas API를 중점적으로 이용해 작동 방식을 익히고 활용해보고자 했습니다.
- 자바스크립트의 canvas/context, Image, setInterval(), eventListener등을 여러 function에 알맞게 이용했습니다.
- 백그라운드 이미지, 도라에몽, 그리고 도라야키(점수 획득용 아이템)를 객체화하고 렌더링하여 게임화하기 위한 설정을 마쳤습니다.
- 키보드 눌림을 인식하는 eventListener를 부착해 좌/우 키보드 버튼이 눌릴 때마다 도라에몽 캐릭터를 특정 값만큼 이동하게끔 하였습니다.
- 새로운 좌표로 이동할 때마다 canvas에 새로 그림이 그려질 수 있게 redraw() function을 구성하였고 redraw() 작동방식에 대한 이해를 깊이 하게 되었습니다.
- 도라야키가 하늘에서 떨어지는 모션을 구현하기 위해 100 milliseconds마다 아래로 이동하게끔 setInterval()를 이용함.
- 객체지향적 방식으로 각 기능을 함수로 나누어 직관적이고 재사용이 가능하도록 제작하였습니다.
본 포트폴리오를 완성하며 사용자의 입력을 감지하고, canvas를 사용해 그래픽 요소를 웹에 구현하고, 원하는 이미지를 이용, 객체화하여 수학적 계산을 통해 게임을 만들 수 있게 되었습니다.