canvas API와 nodeJS, MySQL로 간단한 웹게임을 만들어보자!
Canvas로 슈팅게임 만들기
기말고사 기간 공부가 하기싫어 vs code를 열고 이짓 저짓 하다가 간단한 게임을 만들어 보기로 했다. 즉각적인 결과를 얻을 수 있고 로직도 짤 수 있는 canvas가 시험기간에 공부하기 싫을 때 놀기 적당해 보였다. 먼저 canvas를 써본적이 없으니 기본적인 사용 방법을 공부하기 위해 유투브에서 영상을 찾아봤다. 이 영상을 보고 만들었으며 추천한다. 영상을 보며 따라 만든 후 AWS EC2에 배포해 친구들에게 알려줬고 점수 스크린샷을 찍어 서로 자랑하는 모습을 보고 점수를 저장하는 서버를 만들기로했다. 이 글은 시험이 끝난 뒤 영상을 안보고 만들 수 있는지 스스로 테스트도 해볼겸 처음부터 리펙터링하며 서버를 만든 과정을 시간이 지나고 커밋을 따라가며 정리하는 글이다.
STACK
- VanillaJS
- canvas API
- fetch API
- nodeJS(express)
- tailwind
- MySQL
❗️ 유투브 영상에는 canvas로 게임을 만드는 과정까지만 나오며 이 글은 강의를 기반으로 다시 작성한 코드이기에 코드 구조가 다릅니다.
이 글의 전체 코드는 깃헙에서 확인 하실 수 있습니다.
