2차 공부/TIL

24.06.10 숫자기억게임 페이지 만들기

공대탈출 2024. 6. 10. 17:56

자바스크립트를 사용하여 페이지를 만들어 볼 것이다.

페이지에 진입하면 게임 시작이 되지 않은 페이지만 아래와 같이 보이며, 숫자를 입력하는 칸, 게임 시작버튼, 게임 중 숫자를 제출하는 버튼 세가지가 있다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>숫자 기억 게임!</title>
        <style>
            body {
                background-color: lightgray;
            }
            .wrap {
                background-color: white;
                width: 400px;
                padding: 50px 0px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 300px auto;
                border-radius: 10px;
            }
            .wrap > h2 {
                background-color: red;
            }
            .submitWrap {
                background-color: green;
                width: 300px;
                height: 40px;

                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
            }
            .submitWrap > input {
                width: 180px;
                height: 33px;
                border-radius: 5px;
            }
            .submitWrap > button {
                width: 50px;
                height: 33px;
                border-radius: 3px;
                font-size: 13px;
                font-weight: bold;
            }
            .submitWrap > button:hover {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <h2>숫자 기억 게임</h2>
            <!-- <p>숫자 자리</p> -->
            <div class="submitWrap">
                <input placeholder="숫자를 입력하세요" type="text" id="numSpace" />
                <button onclick="">시작</button>
                <button onclick="">제출</button>
            </div>
        </div>
    </body>
</html>

위 코드로 보이는 페이지

시작 버튼을 누르면 화면에 1000~9999 범위의 숫자가 무작위로 하나 나타나며, 3초 뒤에 숫자가 사라진다.

사용자가 숫자를 입력하고 제출 버튼을 누르면 정답의 유무를 출력한다.

 

<head>
    <script>
        let num;
        //숫자생성함수
        function numGenerate() {
            let minCeiled = Math.ceil(1000);
            let maxFloored = Math.floor(9000);
            //1000~9000사이 정수인 난수 생성
            num = Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
            //숫자위치에 난수 값 넣기
            document.getElementById('numSection').innerHTML = `${num}`;
            //다른 함수에서 사용가능하도록 num 리턴
            return num;
        }

        //게임실행함수
        function gameStart() {
            //정답위치 안보이게하기
            let answerSect = document.getElementById('answerSection');
            answerSect.style.display = 'none';
            //숫자생성 함수 실행
            numGenerate();
            //숫자위치 보이도록하기
            let numSect = document.getElementById('numSection');
            numSect.style.display = 'block';
            //3초 뒤 게임종료함수실행
            setTimeout(() => gameEnd(), 3000);
        }

        //게임종료함수
        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;
            //제출하려는 답과 정답 비교하여 결과 보이기
            if (ans == num) {
                answerSect.innerHTML = '정답입니다!';
            } else {
                answerSect.innerHTML = `오답입니다. 정답은 ${num}입니다.`;
            }
        }
    </script>
</head>
    <body>
        <div class="wrap">
            <h2>숫자 기억 게임</h2>
            <p id="numSection" style="display: none">숫자섹션</p>
            <div class="submitWrap">
                <input placeholder="숫자를 입력하세요" type="text" id="numSpace" />
                <button onclick="gameStart()">시작</button>
                <button onclick="answerSubmit()">제출</button>
            </div>
            <p id="answerSection" style="display: none">정답섹션</p>
        </div>
    </body>
</html>

간결하게 보이도록 script와 body만 보이게 하였다.

실행모습

모든 함수에서 num이 사용 가능하도록 외부스코프에 num을 선언하고

처음 게임이 시작되면 input값을 초기화하고, 정답유무를 알려주는 곳을 안보이게한다.

그리고 숫자생성함수를 싱행하여 num값을 특정 정수인 난수값으로 리턴해준다.

let num;
            //숫자생성함수
            function numGenerate() {
                let minCeiled = Math.ceil(1000);
                let maxFloored = Math.floor(9000);
                //1000~9000사이 정수인 난수 생성
                num = Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
                //숫자위치에 난수 값 넣기
                document.getElementById('numSection').innerHTML = `${num}`;
                //다른 함수에서 사용가능하도록 num 리턴
                return num;
            }

            //게임실행함수
            function gameStart() {
                //input값 초기화
                document.getElementById('numSpace').value = null;
                //정답위치 안보이게하기
                let answerSect = document.getElementById('answerSection');
                answerSect.style.display = 'none';
                //숫자생성 함수 실행
                numGenerate();
                //숫자위치 보이도록하기
                let numSect = document.getElementById('numSection');
                numSect.style.display = 'block';
                //3초 뒤 게임종료함수실행
                setTimeout(() => gameEnd(), 3000);
            }

 

게임 실행 마지막에 setTimeout함수가 실행되는데 버튼이 눌리고나서 3000밀리초 후에 gameEnd()함수가 실행된다.

//게임종료함수
            function gameEnd() {
                //숫자구역 안보이도록하기
                let numSect = document.getElementById('numSection');
                numSect.style.display = 'none';
            }

gameEnd함수가 실행되면 숫자를 보여주는 구역의 display값이 none이 돼 안보이게 된다.

 

그리고 사용자가 기억한 숫자를 input에 입력하고, 제출 버튼을 누르면 아래 함수가 실행된다.

//정답 제출함수
            function answerSubmit() {
                //정답위치 보이도록하기
                let answerSect = document.getElementById('answerSection');
                answerSect.style.display = 'block';
                //제출하려는 답을 input값에서 가져오기
                let ans = document.getElementById('numSpace').value;
                //제출하려는 답과 정답 비교하여 결과 보이기
                if (ans == num) {
                    answerSect.innerHTML = '정답입니다!';
                } else {
                    answerSect.innerHTML = `오답입니다. 정답은 ${num}입니다.`;
                }
            }

정답유무를 보이는 위치를 잡아내 보이게하고, 사용자가 입력한 값과 실제 정답을 비교하여

정답인지 아닌지 사용자에게 전달하게된다.

 

그리고 다시 게임시작버튼을 누르게되면, input값이 초기화되고 정답유무가 가려지며, 새로운 난수가 생성되며 반복된다.

jQuery를 이용해 id값으로 특정 DOM을 지정하는 방식을 많이 사용했었고, 리액트때는 어떻게 했는지 잘 기억이 나지않아, 특정 id값을 어떻게 지정하는지, 해당 id값의 style을 어떻게 변경하는지, 원하는 문구를 어떻게 출력하는지, input의 value를 어떻게 가져오는지 검색하면서 다시 알게되었다.

시간이 날 때 style을 수정하며 보기좋고 사용하기 편하게 만들어야겠다.

저작자표시

'2차 공부 > TIL' 카테고리의 다른 글

24.06.12 리액트 css 적용하기 + 컴포넌트 분리하기 + export default  (0) 2024.06.12
24.06.11 리액트 시작하기  (1) 2024.06.11
24.06.07 PostgreSQL  (0) 2024.06.07
24.06.05 new Set()  (0) 2024.06.05
24.06.04 콘솔 적극 활용하기  (0) 2024.06.04

'2차 공부/TIL'의 다른글

  • 현재글24.06.10 숫자기억게임 페이지 만들기

관련글

댓글

티스토리툴바