[달리기반]숫자기억게임 만들기

몇가지 함수를 알아야 한다.

Math._()

• ceil 올림
• floor 내림
• round 반올림

예시)

Math.ceil(100);

 

 

 

document.getElementById

• document.getElementById('').innerHTML= '<div style=color:red'>A</div>;

이건 element에 html이 포함됨을 의미함.

설정해놓은 html태그가 해석되면서 색이 입혀지거나 함.

 

• document.getElementById('').innerText= ' div style=color:red'>A '

이건 문자열을 입력하면 문자열그대로 출력

 

 

numSect.style.display

• numSect.style.dispaly=="none";

숨기기

• numSect.style.dispaly=="block";

보이기 

 

 

 

setTimeout

일정시간 지나면 실행하는 함수

setInterval은 일정시간 간격을 두고 실행하는 함수

// 기본적으로 아래코드처럼 사용.
function say(){
    alert('안녕하세요');
}
setTimeout(say,300);

//문자열일 경우
function say(who, phrase){
    alert(who+'님'+phrase);
}
setTimeout(say,300,'김철수', '안녕하세요');


//
setTimeout('alert('안녕하세요')', 300);

---

 

 

 

완성된 스크립트 

<script>
    let num;
    //숫자생성
    function numGenerate() {
        // 범위지정
        // Math.ceil함수: 올림
        // Math.floor 함수: 내림
        // Math.round함수: 반올림
        let min = Math.ceil(1000);
        let max = Math.floor(9000);

        // 생성한 변수위치에 많들어놓은 난수 
        num = Math.floor(Math.random() * (max - min) + min);

        // 시작누르면 생성된 변수 뜨기
        document.getElementById('numSection').innerHTML = `${num}`;
    }


    //실행
    function gameStart() {
        //정답위치 안보이게
        let answerSect = document.getElementById('answerSection');
        answerSect.style.display = 'none';
        //가져오기
        numGenerate();
        //생성된 변수 보이기
        let numSect = document.getElementById('numSection');
        // 처음에 안보였다가 누르면 보이기
        if (numSect.style.display == "none") {
            numSect.style.display = "block";
        } else {
            numSect.style.display = "none";
        }

        //섹션 끝내기
        setTimeout('gameEnd()', 1000);
    }

    // 종료
    //시작함수랑 똑같이 해줌.
    function gameEnd() {
        let numSect = document.getElementById('numSection');
        numSect.style.display = 'none';
    }


    //정답지
    function answerSubmit() {
        //정답위치
        let answerSect = document.getElementById('answerSection');
        // 보이기
        answerSect.style.display = 'block';
        //제출하려는 답을 input호출
        let ans = document.getElementById('numSpace').value;
        // 알리기
        alert("제출되었습니다.");
        //비교 
        if (ans == num) {
            answerSect.innerHTML = '정답입니다!';
        } else {
            answerSect.innerHTML = `오답입니다. 정답은 ${num}입니다.`;
        }
    }
</script>

 

 

 

 

며칠동안 끄적이고 만든 코드인데 

머릿속이 뒤죽박죽이다.

모르는 거 하나하나 구글링해서 가져왔는데 작동 잘 된다. 

타이머를 넣어보고싶어서 구글링했는데 시작 누르고나서 작동되는 함수를 못찾았다.