Game Project🚗

프론트엔드 웹 개발의 가장 토대가 되는 HTML, CSS, javaScript 기초를 다지고자 간단한 게임을 만들었습니다.
✔Link : Click Here To Play!

---

1. 사용 언어

• Vanilla javaScript (ES6)
• HTML
• CSS

2. 기능

• 한 스테이지 당 10초의 시간 내에 주황색 자동차를 클릭하여 점수를 획득합니다.
• 시간 내 모든 주황색 자동차를 클릭하면 다음 스테이지로 넘어갈 수 있습니다.
• 스테이지가 넘어갈 때마다 주황색 자동차 이외의 자동차들의 수가 늘어납니다.
• 주황색 자동차 외 다른 자동차를 클릭 시 지금까지 획득한 점수가 표시되며 게임이 오버됩니다.

3. 코드 세부사항

1) 모듈화

• main.js
  : 클래스들의 인스턴스를 생성하며, 리스너를 등록해 사용자가 원하는 행동을 지정할 수 있는 모듈입니다.

• field.js
  : 게임 필드에 관한 모듈로서, 자동차들을 동적으로 생성하고 필드에 이벤트 리스너를 등록하여 자동차를 클릭할 수 있는 환경을 만들어주는 모듈입니다.

• game.js
  : filed를 import하여 카운터, 점수, 스테이지 초기화 등 게임에 필요한 모든 요소를 제어하는 모듈입니다.

• popup.js
  : 게임에서 이기거나 졌을때 팝업을 띄워 게임의 지속 또는 게임 오버를 알리는 모듈입니다.

• sound.js
  : 게임에 필요한 사운드를 재생하거나 멈추는 모듈입니다.

2) Builder Pattern 적용

• Game 클래스 생성시 전달되는 인자 수가 4개이므로, Builder Pattern을 이용해 깔끔하고 가독성 좋게 만들었습니다.