숫자야구게임만들기(2) - 기능구현

저번 글에 이어서 이번에는 기능 구현을 해보겠습니다.

기능을 구현하기 전에 일단 기능에 맞게 파일을 나눠주겠습니다.

클래스별로 나누는 폴더 classes

안에 들어가는 error를 처리하는 폴더 error

random으로 컴퓨터가 가져오는 3개의 숫자를 처리하는 폴더 random

컴퓨터의 숫자들과 입력받은 값으로 baseballGame을 처리하는 폴더 result

안에 들어있는 파일들은 차차 설명하겠습니다.

 

---

1. computer.js

컴퓨터가 받는 랜덤 숫자

 

Computer라는 클래스안에 getRandomNumbers라는 함수를 생성합니다.

여기서 중요한 점은 숫자가 중복되서는 안된다는 것입니다.

중복을 하지 않기 위해서 Set객체를 사용해 중복값을 지워주었고 

변수의 사이즈가 3개가 넘지않으면 반복문을 계속

3개가 되면 join으로 문자열로 바꾸어 리턴해주었습니다.

 

getRandomNumbers함수를 다른 js파일에서 사용할 때 생성자를 새로 지정하지 않고 사용하기 위해

static을 앞에 두어 다른 js파일에서 사용할 때 Computer.getRandomNumbers()로 사용할 수 있습니다!

 

이 함수는 나중에 메인 js파일에서 사용하게 됩니다!

 

---

2. DOM.js

 

각 파일들에서 사용할 때 하나씩 import하여 사용할 수 있게 html안에 있는 속성들을 불러왔습니다.

 

---

3. Output.js

 

본격적으로 숫자야구게임을 만들기전에 strike와 ball에 따른 결과값이 나오는 파일을 먼저 만들어놓으면 편하지 않을까 생각되어 먼저 output에 관한 코딩을 하였습니다.

 

보시면 strike와 ball을 가져와 관련된 결과값을 result(div) 결과값이 나오는 곳에 넣었습니다.

다 맞췄을 때는 다른 기능과 다르게 새로운 element를 만들어 게임 재시작 버튼을 누르면 새로고침될 수 있도록 설정하였습니다.

 

여기서 같은 클래스안의 함수나 변수를 사용하기 위해서 this를 사용합니다.

막혔던 점!

함수의 메서드가 공통일 때만 this키워드가 적용이 됩니다.

예를 들어서

class Practice {
	
    computer() {
    	let computerNumber = 10;
    }
    
    static user() {
    	output = this.computer();  //불가능!
   	}
}

이런 경우 computer()가 인식이 되지 않았습니다!

그래서 함수들의 메서드를 맞춰주어야 한다는 것을 알게 되었습니다.

 

---

4. BaseballGame.js

 

이제 숫자 게임의 연산 역할을 하는 파일을 만들어보겠습니다.

play함수에 유저에게 입력받은 값과 컴퓨터의 입력값을 넣으면 스트라이크와 볼을 계산하는 countStrikeAndBall함수 안에서 for문을 이용해 돌아가는 것을 볼 수 있습니다.

 

저는 여기서 가독성을 높이기 위해 스트라이크와 볼을 구분하는 함수도 나눠주었습니다. 

 

공부를 하다가 문자열도 배열로 처리할 수 있다는 것을 알게 되었고 바로 사용하게 되었습니다.

 

스트라이크: 위치가 같을 때!

볼: 컴퓨터에서 받은 숫자중에 사용자에게 받은 숫자가 있을 때!

 

countStrikeAndBall의 if문에서 사용할 수 있도록 Boolean값으로 리턴값을 지정하였습니다.

그래서 스트라이크 카운트를 먼저 처리한 후 볼 카운트를 처리할 수 있게 되었습니다.

 

카운트도 다 받았으니 거기에 맞는 이벤트를 처리해주어야겠죠?

아까 output에서 만든 이벤트들을 써먹기 위해 

함수를 만들어 스트라이크와 볼 카운트를 받아 output클래스안에 있는 함수들을 받아와 사용하였습니다.

static으로 함수를 만들었기 때문에 생성자를 만들지 않고 바로 사용한 것입니다!

그리고 가장 위에 클래스를 받아오는 import문을 사용하였습니다.

import {받아올 값} from "위치";

Output은 default값으로 지정했기 때문에 {}(중괄호)를 생략할 수 있었습니다.

 

---

5. 지금까지의 index.js

차례대로 설명하면

1. BaseballGame.js 에서는 함수를 static으로 지정하지 않았기 때문에 생성자를 지정하고

2. 컴퓨터에서 받아오는 숫자를 받습니다.

3. 그리고 버튼을 누르면 run이 실행되는 이벤트를 생성하여 실행합니다.

4. 마지막으로 run함수에서 play함수에 사용자와 컴퓨터의 숫자를 넣고 실행합니다.

 

그런데 사용자가 입력한 값이 원하는 값이 아닌 경우가 정해져있지 않습니다.

그건 다음 시간에 해보도록 하겠습니다.