1. top_ui 기능 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function displayAll() {
init().then((items) => {
//아이콘 초기화
playField.innerHTML = "";
// json안에 있는 data를 전달해주긴 했지만 그걸 사용하지는 않았음.
const carrotItems = items.map(createCarrotIcon);
const bugItems = items.map(createBugIcon);
// console.log(carrotItems[0],typeof bugItems);
playField.append(...carrotItems);
playField.append(...bugItems);
countCarrotFunc();
});
}
function startAgain() {
playBtnDiv.style.visibility = "visible";
playBtn.innerHTML = `<i class="fas fa-pause"></i>`;
audioBackground.play();
count = 10;
clearInterval(intervalId);
intervalId = setInterval(decreasingCount, 1000);
popUp.classList.add("non_display");
displayAll();
}
우선 엘리님이 mini shopping에서 사용한 방법을 사용해서 여러개의 아이콘을 만들어보려고 했었다. 그래서 data 폴더안에 아무것도 들어있지 않은 item을 10개 만들고 json파일에 담았다. fetch를 이용해서 data를 받아오고 displayAll에서 받아온 data를 순회하면서 안에 담겨있는 갯수(10개) 만큼 아이템을 만들게 했다.
1-1. 버튼 기능 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function startGame(event) {
if (playFromTheVeryStart === true) {
activateReplayBtn();
startAgain();
playFromTheVeryStart = false;
} else if (playFromTheVeryStart === false) {
if (event.target.classList.contains("fa-pause")) {
playBtn.innerHTML = `<i class="fas fa-play"></i>`;
audioBackground.pause();
clearInterval(intervalId);
popUp.classList.toggle("non_display");
gameResult.innerHTML = `Restart?`;
}
if (event.target.classList.contains("fa-play")) {
playBtn.innerHTML = `<i class="fas fa-pause"></i>`;
audioBackground.play();
intervalId = setInterval(decreasingCount, 1000);
popUp.classList.toggle("non_display");
}
if (event.target.classList.contains("fa-reply-all")) {
startAgain();
}
}
}
//main
function init() {
playBtnDiv.addEventListener("click", startGame);
return fetch("./data/data.json")
.then((response) => response.json())
.then((json) => json.items);
}
init();
그리고 startGame함수를 통해서 최초 게임실행을 표시하기 위한 boolean 변수를 만들고(playFromTheVeryStart) 토글처럼 최초 게임실행시 false가 되도록 했다.
그리고 playFromTheVeryStart === false 인경우에 한하여 또다시 로직을 구성하였다. 일시정지 버튼을 구현하기 위한 로직이다. 클릭했을때 pause 아이콘이면 다시 시작, 그게 아니면 pause 되도록 했고. replay 버튼을 클릭시 다시 시작 하도록 했다.
일단 동작이 되긴 된다 ㅋㅋㅋ 그런데 여기서 훨씬 더 깔끔해 질 수 있고 미래 확장성 까지 고려해서 코드에 옵션을 굉장히 쉽게 추가할 수 있도록 코드를 재구성 할 수 있다. 바로 클래스를 단위로 해서 리팩토링하는 거다.(A quality of design that takes possible future advances into consideration and attempts to accommodate them)
다음글에서 자세히 다뤄보자.
P.S: 구현 결과를 확인하려면 여기를 들어가보면 됩니다 ㅋㅋ