숫자 맞추기 게임을 만들어 봅시다

안녕하세요 오늘은 숫자 맞추기 게임을 포스팅 하겠습니다...
하느라 꽤나 고생했답니다아아아아...ㅠㅠ

* 뼈대 만들기!

일단 nav바는 원래 사용했던 index.html 자기소개 페이지에서 그대로 가져 왔구요!

여기의 도움을 받았습니다! (출처)

네 그러면 바로 코드로 뼈대를 볼까요?

 <div id="number_game_position">
        <h2>숫자 맞추기 게임!</h2>
        <p class="text_font">이 게임은 1부터 100까지의 숫자를 맞추는 게임입니다.</p>
        <form>
            <p class="text_font">숫자 : <input type="text" id="user" size="5"> <input type="button" id="btn" value="확인"
                    onclick="guess()"></p>
            <p class="text_font">추측횟수 : <input type="text" id="guesses" size="30"></p>
            <p class="text_font">힌트 : <input type="text" id="result" size="20"></p>
            <p class="text_font"><input type="button" id="resetbtn" value="다시!"></p>
        </form>
        <div id="area"></div>
    </div>

네 코드를 보시면 이렇게 뼈대를 구현 했답니다~!
그리고 css코드를 한번 보겠습니다.

#number_game_position{
    margin: 200px auto;
    text-align: center;
    width: 600px;
    padding-top: 40px;
    padding-bottom: 40px;
    border: 1px solid black;
}

이렇게 코드를 짰더니...

사진으로 한번 볼까요? 그 결과!

짜잔~ 이렇게 뼈대가 완성 되었습니다!!

이제 자바 스크립트 코드를 넣어 볼게요

* javascript 코드를 만들자

여기서 꽤 고생했어요! ㅋㅋㅋ 모르는 것 들 투성이라서~
차근차근 봅시다.

- getElementByID 란 무엇일까?

get = 가져오다
element = 요소
byid = id를 통해서

네 말그대로 입니다. 자신이 설정해놓은 id를 통해서 요소를 가져오는 거죠!
자바스크립트에서 자주 쓰이기에 먼저 정의해 봤습니다~

- 함수

바로 함수를 만들어 봅시다~
아 먼저 변수를 만들고요 ㅎㅎㅎ

var ran; //랜덤으로 나올 수
var count; // 시도한 횟수
function guess() {
    var num1 = document.getElementById("user").value;
    if (num1 == "") {
        alert('숫자를 입력하세요');
    }
    else if (num1 == ran) {
        var area = document.getElementById("area");
        area.innerHTML = "정답입니다";
    }
    else {
        if (ran > num1) {
            document.getElementById("result").value = (num1 + "보다 큽니다.");
        }
        else {
            document.getElementById("result").value = (num1 + "보다 작습니다.");
        }
    }
    document.getElementById("guesses").value = ("시도한 횟수는" + (count++) + "번 입니다.");
}

먼저 저는 이렇게 코드를 짰습니다.

guess()라는 함수가 실행될때 if, else 문을 통해서 조건에 맞는 길로 가는 것이죠.

아 여기서도 살펴 볼까요?

- value

document.getElementById("user").value;

이건 무슨뜻일 까요~
"user"라는 id의 요소에 적혀있는 무언가 입니다.
즉 여기서는 저희가 적은 숫자가 되겠죠!

- innerHTML

var area = document.getElementById("area");
        area.innerHTML = "정답입니다";

여기서 innerHTML은?

Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.

네 그러면 ran 이라는 변수에 랜덤으로 수를 넣는 함수를 넣어볼게요!

- Math.floor(Math.random() * '숫자')

function gameReset() {
    ran = Math.floor(Math.random() * 100 + 1);
    count = 1;
    document.getElementById("area").innerHTML = "";
    document.getElementById("result").value = "";
    document.getElementById("guesses").value = "";
    document.getElementById("user").value = "";
}
window.onload = function () {
    document.getElementById("resetbtn").addEventListener('click', function () {
        gameReset();
    });
    gameReset();
}

일단 Math.floor라는 것은 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환하는 함수입니다.
Math.random * '숫자'는 숫자를 넣은 것만큼 랜덤한 수가 나오는 것이죠!
여기서 floor를 왜 넣었냐면 랜덤한 수는 소수까지 랜덤으로 나오거든요...ㅋㅋㅋㅋ
그러다보니 마지막에 + 1 을 한 것이랍니다~!!

- window.onload

이 함수는 동생이 조금 도움을 줬는데요!
제가 < script> 를 헤드에 넣어버리는 바람에 html뼈대가 로드되기 전에 스크립트가 먼저 실행이 되어서
오류가 나더라구요 ㅠㅠ 그래서! window.onload라는 것을 사용했습니다.
로드가 될때! 저 함수가 실행이 되는 것이죠
그래서 시작할때 리셋이 되고
document.getElementById("resetbtn").addEventListener('click', function () {gameReset();})
코드를 통해서 버튼을 눌렀을때도 리셋이 되는것입니다.

아 저거는 자바스크립트 코든데 동생이 알려줬답니다! ㅋㅋㅋ
html에서이렇게 해도 되겠지만 자바스크립트로 웬만한거 다하라고 해서요;;

아무튼!

이렇게 해서

    <script src="numbergame.js"></script>

이렇게 html파일에 넣으면!

완성이 됐습니다....

다들 한번 제 페이지 와서 해보세용 ㅎㅎ
이상으로 마치겠습니다!