프론트엔드 웹 개발의 가장 토대가 되는 HTML, CSS, javaScript 기초를 다지고자 간단한 게임을 만들었습니다.
✔Link : Click Here To Play!
- Vanilla javaScript (ES6)
- HTML
- CSS
- 한 스테이지 당 10초의 시간 내에 주황색 자동차를 클릭하여 점수를 획득합니다.
- 시간 내 모든 주황색 자동차를 클릭하면 다음 스테이지로 넘어갈 수 있습니다.
- 스테이지가 넘어갈 때마다 주황색 자동차 이외의 자동차들의 수가 늘어납니다.
- 주황색 자동차 외 다른 자동차를 클릭 시 지금까지 획득한 점수가 표시되며 게임이 오버됩니다.
-
main.js
: 클래스들의 인스턴스를 생성하며, 리스너를 등록해 사용자가 원하는 행동을 지정할 수 있는 모듈입니다. -
field.js
: 게임 필드에 관한 모듈로서, 자동차들을 동적으로 생성하고 필드에 이벤트 리스너를 등록하여 자동차를 클릭할 수 있는 환경을 만들어주는 모듈입니다. -
game.js
: filed를 import하여 카운터, 점수, 스테이지 초기화 등 게임에 필요한 모든 요소를 제어하는 모듈입니다. -
popup.js
: 게임에서 이기거나 졌을때 팝업을 띄워 게임의 지속 또는 게임 오버를 알리는 모듈입니다. -
sound.js
: 게임에 필요한 사운드를 재생하거나 멈추는 모듈입니다.
- Game 클래스 생성시 전달되는 인자 수가 4개이므로, Builder Pattern을 이용해 깔끔하고 가독성 좋게 만들었습니다.