숫자야구게임만들기(1) - 큰틀잡기

 

서론

 

모듈을 활용하고 여러 기능을 나눠서 짜는 코딩을 연습하기 위해 SW 동아리에서 실행한 숫자 야구 게임을 만들어 보았습니다.

 

---

HTML & CSS

html의 내용은 이렇습니다.

head부분에서 default js 파일의 type을 module로 넣어줍니다.

하는 이유는 뒤에서 다시 설명드리겠습니다.

 

 

css에서는 간단하게 body전체를 가운데 정렬한 후

배경색만 바꿔주었습니다.

 

---

기능 구현

 

1.  컴퓨터가 랜덤으로 3개의 숫자를 만든다.
2.  input text로 사용자에게 숫자를 입력받는다.
3.  사용자에게 입력받은 숫자와 컴퓨터의 숫자를 비교하여 스트라이크와 볼을 판단한다.
4. input text에 숫자가 아니거나 3자리의 숫자가 아닌 경우 오류 메시지를 띄운다.
5. 결과창에 볼과 스트라이크 혹은 아무것도 없을 때(미싱)를 출력한다.
6. 스트라이크가 3개인 경우 게임 재시작 버튼을 생성한다.
7. 게임 재시작 버튼을 누를 시 새 게임으로 바뀐다.

기능 구현은 다음 시간에 해보도록 하고 기본적인 틀 먼저 만들어보겠습니다.

 

---

index.js

 

기본 세팅 1

일단 html에 있는 구성들을 가져올 수 있는 querySelector을 이용해 html에서 버튼과 input text, 결과를 가져옵니다.

그리고 컴퓨터에서 랜덤으로 받아올 숫자가 들어갈 빈 배열을 지정합니다.

 

기본 세팅 2

버튼을 눌렀을 때의 이벤트를 실행할 수 있도록 init이라는 함수를 만들어 마지막에 실행할 수 있도록 하고

export default를 class에 적용해 생성자로 만들어 사용할 수 있도록 합니다.

 

🤔export default 가 뭘까?

 

export는 위에서 type으로 쓰였던 모듈로 만드는 지시자로 export를 사용하면 내보내기가 가능합니다.

내보내기	어디로?	어디에 선언?
	다른 js 파일로	변수나 함수, 클래스 선언 시 앞에

 

그리고 export default는 해당 모듈에는 개체가 하나만 있다라는 사실을 나타내는 문법입니다!그래서 다른 js파일에서 모듈을 가져올 때 중괄호를 생략할 수 있습니다.

 

---

기초를 다졌으니 다음 글에는 기능 구현을 하는 코딩을 짜보겠습니다.