오늘은
function generateRandomNumber()와
function startGame()은 function generateRandomNumber()을 불러와 랜덤한 숫자를 위쪽 박스에 띄우고, 3초 뒤에 보이지 않게 하는 함수이다. 저번에는 숫자를 지워야 한다고 생각했었는데 오늘 이 기능을 위한 코드들을 찾아보니, 이 기능을 숫자 기억 게임에 맞추어서 수행시키려면 '삭제'가 아니라 '보이지 않음' 상태로 만들어야 한다는 것을 깨달았다.
이를 구현하기 위한 두 가지 방법을 찾았는데
첫번째는 <head>에서 랜덤한 숫자가 표기되는 위쪽 박스
display: none(비표시)상태로 만들고
그리고 스크립트를 이용해 function startGame()이 시작 버튼으로 작동하면
number_display에 .show를 붙여서 number_display.show(표시상태)로 만들고
3초 뒤에 .show를 지워서 number_display(비표시상태)로 돌려놓는 것이다.
show를 붙이는 방법은 number_display.classList.add('show')이고
show를 떼는 방법은 number_display.classList.remove('show')이다.
두번째 방법은 함수로 박스의 표시/비표시 스타일을 변경하는 것이다.
number_display.style.display = none;(비표시)
number_display.style.display = flex;(표시)
여기까지 알아보았지만 아직 작동을 성공하지는 못했다. 이후로는 함수 연동에 대해 더 많이 알아보아야겠다.
function generateRandomNumber()으로 불러온 랜덤한 숫자는 함수 내에서 일회용으로 사용되는 것이 아니라 스크립트 전체에서 사용되는 변수이므로 함수 밖에서 let randomnumber;로 선언을 해두어야 한다. 또한 가장 앞에 위치하는 것이 적절하다.
내가 찾은 글에서는 Math.random의 범위를 지정하기 위해서는 먼저 최대값을 지정하고, 최소값을 지정한 뒤, 최소값 지정 시의 문제를 해결해야 한다고 했다. 이 말인즉, 다음과 같다.
Math.random() ==> 0~1
최대값
Math.random()*9999 ==> 0~9999
최소값
(Math.random()*9999)+1000 ==> 1000~10999
최소값 문제 해결
(Math.random()*(9999-1000))+1000 ==> (0~8999)+1000 ==> 1000~9999
마무리로 정수값 지정
Math.floor(Math.random()*(9999-1000))+1000 ==> 1000, 1001, 1002, 1003......9999
이렇게 랜덤한 정수를 생성하는 부분은 완성된 것 같다. 나중에 잘 작동되었으면 좋겠다. 일단 오늘은 여기까지 했고, 다음에는 이 스크립트들을 본문과 연동하는 문법을 조사할 것이다.
'til' 카테고리의 다른 글
| 숫자 기억 게임 만들기 4일차 完 (0) | 2024.06.27 |
|---|---|
| 숫자 기억 게임 만들기 3일차 (0) | 2024.06.26 |
| 숫자 기억 게임 만들기 1일차 (0) | 2024.06.24 |
| 개발 아티클 스터디(2) (0) | 2024.06.21 |
| 콘솔 적극 활용하기-강아지 편 (0) | 2024.06.20 |