자바스크립트로 게임만들기 #2.기본틀 구현 (+ 큰 범주의 구조화)

[ 개요 ]

자바스크립트를 이용한 웹게임 제작을 위해

코드(스크립트)를 큰 범주로 구조화해보자

기본틀 version2

(23.11.17 추가됨)

---

[ 구조화 ]

설명에 앞서, 위와 같은 구조로 만들면

게임이 된다고 했었는데

웹 게임 프로그래밍을 용이하게 할 수 있도록

구조화를 통해 좀 더 확장시켜보자.

1. canvas요소 생성 및 추가 + 편의기능 & 테스트

2. 전역 변수 설정

(시스템 변수는 정의까지 해주고,

게임용 내부 변수는 선언까지만)

3. 이벤트리스너 설정 (* 입력 영역)

(document는 문서 전체, canvas는 해당 요소만)

4. 초기화 (루프 전 맨처음 단계에서 사용)

→ 게임용 변수의 값 할당 수행

(+ 새로시작 등에서도 활용 가능)

5. 루프 (* 처리 또는 출력 영역)

6. 동작 (해당 구조가 실제로 돌아가게 함)

위와 같이 큰 범주로 정리할 수 있다.

(* 그리기, 충돌체크 등은 루프의 하위범주)

---

[ 구현 ]

위의 구조화를 실제로 구현하자면

다음과 같다고 할 수 있을 것이다.

* var ctx = ... 부분은 옵션이 아니라, 

canvas의 그리기 동작 수행을 위한 필수 요소임