숫자 기억 게임 만들기 (2)

돌아보기

지난 번에 난수를 생성하는 함수와 게임을 시작하는 함수를 각각 만들었다.

오늘은 input를 통해 데이터를 받아온 다음, 그 데이터를 통해 정답인지 아닌지 판별하는 함수를 만들어볼 거다! 

3주차 때 input을 통해 값을 받아오는 법을 배운 지금이 바로 적기라고 생각한다. 

제출 버튼 클릭 시, 답을 확인하는 함수

필요한 것

 

// 제이퀴리로 input을 통해 답을 받아오는 것. 

// 받아온 데이터가 정답인지 판별하는 것. 

// 정답이라면 정답을, 오답이라면 오답을 출력하는 것. 

 

function checknumber() {

            let kotae = $('#answer').val();

            console.log(kotae)

        }

 

제대로 된 결과값을 받아오는 데 성공했다.

이제 받아온 데이터가 정답인지, 아닌지 판별하고 정답이라면 정답을, 오답이라면 오답을 출력하는 함수가 필요하다. 

조건문을 쓰면 쉬울듯. 

 

function checknumber() {

            let kotae = $('#answer').val();

            if (kotae == Num) {

                $('#check').text('정답입니다.')

                console.log('정답입니다.')

            } else {

                $('#check').text('오답입니다. 정답은 ' + Num + '입니다.')

               

            }

        }

 

그렇게 해서 완성된 코드. 간결하고 이쁘다. 

 

var answer = 5; // 정답 변수 $('#check').text(`오답입니다. 정답은 ${answer}입니다.`);

 

이렇게  템플릿 리터럴(`)을 사용하여 ${answer}로 변수를 쉽게 삽입할 수도 있다.

이 방법은 가독성이 좋고, 문자열 내 여러 변수를 삽입할 때 유용하다고 한다. 

 

콘솔을 지워주고 변수를 다듬었다. 

 

CSS로 꾸미기

<style>

        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

        * {

            font-family: "Jua", sans-serif;

        }

        .box {

            width: 300px;

            height: 200px;

            margin: 500px auto 0px auto;

            display: flex;

            flex-direction: row;

            align-items: center;

            justify-content: center;

            border: 1px solid black;

            border-radius: 5px;

            box-shadow: 0px 0px 3px 0px black;

        }

    </style>

 

숫자 기억 게임을 꾸며보았다.