🎮운석피하기 캔버스 미니게임::클론코딩

1. Facts (사실, 객관) -- 구조 분석

1. 변수 선언
   • 캔버스를 프로그래밍할 때 필요한 canvas, ctx객체 전역변수 선언
   • 게임의 상태 3가지(WAIT, RUN, GAMEOVER)
   • 우주선 : 우주선이미지, 위치, 우주선영역 크기, 각도
   • 운석 : 운석들 집합체, 색상, 갯수
   • 키 눌림 상태
   • 경과 시간
2. window에 이벤트 걸기
   • onload

     canvas 엘리멘트 가져오기, getContext,
     우주선 이미지 읽어오기,
     setInterval 30ms 간격으로 runGame함수 계속 호출.

   • onkeydown

     keyPressed[키코드 받아서] 배열의 해당하는 곳에 true값 주기

   • onkeyup

     keyPressed[키코드] false값 주기

3. 펑션
   • startGame펑션

     운석배열 초기화,
     운석 갯수만큼 운석의 좌표, 속도, 색상을 랜덤으로 생성,
     우주선 위치를 화면 가운데로,
     시작시간 조사해두기

   • getTime펑션

     현재 시간 구하기
     (시스템 날짜 객체로 가져와서 ➡ 시간으로 변환 ➡ 객체 가져온거 삭제 ➡ 변환한 시간 내보내기)

   • runGame펑션
     *상태에 따라 분기한다

     WAIT상태 : keyPressed[13]으로 Enter키 누르는지만 검사.
     Enter키 누르고 이미지가 로드 완료되면
     startGame()함수 호출해서 게임 초기화하고, 상태state를 RUN으로 바꿈

     GAMEOVER상태 : WAIT와 묶음(GAMEOVER 상태는 Enter키를 기다린다는 면에서는 WAIT 상태와 같고 운석과 우주선을 표시한다는 면에서는 RUN 상태와 같다.)

     RUN상태 : 눌러진 키에 따라 우주선의 좌표를 조정하고 방향별로 우주선 회전 각도를 angle에 대입.
     경과 시간 구하고,
     운석 이동 시킴(화면 가장자리에 닿으면 반대편으로 이동, 충돌 검사 및 충돌 시 GAMEOVER상태로 전환)

     case에 따라 분기 후 draw( )그리기 호출

   • drawText펑션

     문자열 출력 함수

   • draw펑션
     *상태에 따라 분기한다

     화면 리셋하기 위한 clearRect 후 분기switchㄱㄱ

     WAIT상태 : drawText로 게임 방법만 출력하면 됨

     RUN상태 : 운석(배열 순회하면서 원 그리고 운석 색상대로 색 채우기),
     우주선 그림(회전 중심점이 우주선의 가운데 부분이므로 이동, 회전, 이동 변환을 순서대로),
     현재시간 출력(GAMEOVER일때는 문자열 표시, GAMEOVER아닐때는 경과시간 갱신),
     경과시간 표시(GAMEOVER일때는 문자열과 현재시간이 함께 보여지게 됨. 아닐때는 경과시간만 보여짐)

     GAMEOVER상태 : RUN와 묶음(GAMEOVER 상태는 Enter키를 기다린다는 면에서는 WAIT 상태와 같고 운석과 우주선을 표시한다는 면에서는 RUN 상태와 같다.)

2. Feelings (느낌, 주관)

생각보다 할만하다...!싶으면서도 스스로 코드 짜보려고하면 어려울거같다,,,,,....는 생각이 든다🥺

3. Findings (배운 점)

배운 점이라기보다 모르겠는 부분들을 찾았다.
✔ 배열 선언할 때 []랑 new Array()부분 다시 공부
✔ constructor랑 prototype 개념정리 다시
✔ this 다시
✔ () => {}와 function() {} 차이점 다시. 특히 this 달라지는거

4. Reference

5-2-5. Space 게임