과제 시작
3주차 강의 전에 첫번째 과제를 끝낼 수 있을 것 같아서 마무리 지어보았다. 개인적으로 JS 내용은 그리 어렵지 않았는데 타이머 부분이 좀 시간이 걸렸다.
게임 설명
예시보다 컬러만 넣어서 꾸며본 숫자 기억 게임 완성본
시작을 누르면 타이머 3초부터 뜨면서 숫자를 보여주고
답을 맞추면 정답을, 틀리면 오답이며 정답 숫자를 보여주는
간단한 게임 페이지이다.
검색했던 부분들
div를 센터로
오랜만에 div를 중앙에 놓고자 인터넷에 유명한 밈을 따라해보았다. 'How to center a div'를 열심히 구글링 하면서 메인 div를 중앙에 배치했다.
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);화면 정중앙에 놓을 때는 저 4줄을 많이 사용한다길래 저장했다. flex와 center만 기억하고 있었는데, 역시 모를땐 인터넷이 답이다
난수(Random Number)생성
난수 생성은 힌트로 나왔던 아래의 링크에서 찾아볼 수 있었다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math
모든 프로그래밍 Math가 대개 그렇듯 0과 1사이의 값을 기본으로 생성한다. 그래서 최댓값과 최솟값을 지정하는 부분은 참고해서 사용하였고, 게임에서는 1000~9999의 숫자였기에 아래의 코드를 사용하였다.
function generateRandom() {
const minCeiled = Math.ceil(1000);
const maxFloored = Math.floor(9999);
return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // 최댓값도 포함, 최솟값도 포함
}타이머 세팅
타이머 사용을 처음 해보았는데 setTimeout()을 이용하라는 힌트가 있어 아래의 페이지를 참고하였다.
https://developer.mozilla.org/ko/docs/Web/API/setTimeout
여기서 헷갈렸던 점은 setTimeout(code, delay)와 setTimeout(functionRef, delay)의 차이였는데 아무생각없이 functionRef에 '게임 시작하는 함수(gameStart())가 들어가면 3초 뒤에 끝날거야'라고 생각했다가 gameStart()가 2번 실행되는 걸 보고서야 잘못 되었음을 깨달았다.
이 함수는 지정한 일정 시간(delay) 이후에 첫번째로 들어가는 코드나 함수를 실행하는 것이었다.
따라서 이 게임에 필요했던 건 전자였으며, 숫자가 사라지도록 하는 코드가 따로 필요했던 것. 추가로 시간 표기가 밀리세컨드로 되어있기 때문에 1000ms = 1s이다.
setTimeout(function () {
// 숫자를 지우는 코드
}, 3000); // 3초 후 실행타이머 표기 (추가사항)
이 부분은 재밌어보여서 인터넷에 따로 검색해본 결과 setInterval() 을 사용해서 구현이 가능했다.
https://developer.mozilla.org/ko/docs/Web/API/setInterval
setTimeout()과 유사한 형태의 매개변수를 요구하며, 여기서는 setInterval(code, delay)를 사용하였다. delay에는 1초마다 표시가 바뀌어야 하므로 1000을 지정하고 code에는 남은시간이 0이 될때까지 표시하도록 작성하면 잘 작동된다.
더 이상 타이머가 필요없거나 0에 도달했을때 필요한 함수는 clearInterval()이며 setInterval()과 호환이 되는 함수이다.
let countdownInterval;
function gameStart() {
// 게임 시작할때 필요한 코드
// ...
// 타이머 표기
let timeRemain = 3;
// 남은 시간 3초 페이지에 표기
countdownInterval = setInterval(function() {
timeRemain--; // 1초마다 줄어들게끔
// 남은 시간 페이지에 표기
// 0에 도달하면 타이머 멈추기
if (timeRemain <= 0) {
clearInterval(countdownInterval);
}
}, 1000) // 1초 간격 지정
}이렇게 과제를 하면서 고민하거나 검색했던 부분들을 정리해보았다. 간단한 게임이지만 복습으로 하기 좋았던 과제라고 생각한다.
마치며...
오늘은 강의보다 과제에 대해 회고하는 글을 써보았고, 두고두고 쓸 좋은 팁들을 저장하는 시간이 되었다. 미래의 과제나 프로젝트가 있을때 참고하면 좋을 듯 하다.
