JS로 숫자야구 만들기 실습 #1

채록·2020년 12월 16일

짜투리

목록 보기

2/26

들어가는 말

강의를 통해 배운걸 이해하고 스스로 코드를 작성해 보았다. (물론 강의에서 배운 코드 기반)
JS를 이해하는게 조금 어려웠다 ㅠㅠ 한번 강의듣는거로는 절대 이해 못했고, 두세번을 들으니 이해가 조금 되기 시작했다. 계속 이론만 듣다가는 끝이 없을것 같아 무작정 만들기부터 시작했는데 오히려 이게 더 도움이 된것 같다.

아직 배운만큼만 작성할 수 있어 다양한 기능은 구현하지 못했지만 JS를 더 공부해서 추가적인 기능을 구현할꺼다.

코드

코드는 전반적으로 제로초님의 것을 참고하였다.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>숫자야구</title>
    </head>
    <body>
      <header>
        </header>
        <div id="result"></div>
        <form id="answer_form" action="submit">
          <input type="text" id="answer" maxlength="4" minlength="4" placeholder="4자리 숫자 입력 후 Enter를 눌러주세요">
          <button type="button" id = "retry_button">새 게임</button>
        </form>
        <div>
        <span>남은 기회는 <span id="chance"></span>회 입니다.</span>
        <script src="숫자야구.js"></script>
    </body>
</html>

JS

<script> //숫자야구.js
var result = document.getElementById('result');
var answer_form = document.getElementById('answer_form');
var answer = document.getElementById('answer');
var retry_button = document.getElementById('retry_button');
var chance = document.getElementById('chance');
var number_candidate;
var number_picked;
var wrong = 0;

function number_random() {
    number_candidate = [1,2,3,4,5,6,7,8,9];
    number_picked = [];
    for (i = 0; i < 4; i += 1) {
        var picked = number_candidate.splice(Math.floor(Math.random() * (9-i)), 1)[0];
        number_picked.push(picked);
    }
    console.log(number_picked); // 뽑힌 수 확인
}

function clear() { //초기화 설정
    answer.value='';
    answer.focus();
    wrong = 0;
    chance.textContent = 7;
}

function done () { //기회 모두 소진했을때 뜨는 알림창
    alert('기회 모두 소진! 정답은 '+number_picked+'였습니다. 다시 도전해 보세요.')
}

// 게임 초기 화면&설정
result.textContent = '맞춰봐요 숫자야구'
number_random();
answer.focus();
chance.textContent = 7;

// 게임 흐름
// 엔터를 누를 시 발생 이벤트
answer_form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (answer.value === number_picked.join('')) { // 한번에 정답을 맞추었을 경우
        result.textContent = "깡!!!!! 호옴런!"
        number_random();
        clear();
    } else { // 한번에 정답을 못맞췄을 경우
        var answer_array = answer.value.split('');
        var strike = 0;
        var ball = 0;
        wrong += 1;
        chance.textContent -= 1;
        if (wrong >= 7) { // 제공 기회 모두 소진했을 경우
            result.textContent = '맞춰봐요 숫자야구'
            done();
            number_random();
            clear();
        } else { // 오답횟수 6회까지 진행
            for (i = 0; i < 4; i +=1) { // 숫자야구가 4개 숫자로 구성되어 있으므로 4번 반복하면 된다.
                if (Number(answer_array[i]) === number_picked[i]) { // 스트라이크 상황
                    strike += 1;
                } else if (number_picked.indexOf(Number(answer_array[i])) > -1) { // 볼 상황
                    ball += 1;
                }
            }
            result.textContent = '현재 '+strike+'스트라이크 '+ball+'볼 입니다.'
            answer.value='';
            answer.focus();
        }
    }
})


retry_button.addEventListener('click', function (r) { // 새로운 게임 시작하기
    number_candidate = [1,2,3,4,5,6,7,8,9];
    number_picked = [];
    for (i = 0; i < 4; i += 1) {
        var picked = number_candidate.splice(Math.floor(Math.random() * (9-i)), 1)[0];
        number_picked.push(picked);
    }
    clear();
});
</script>

숫자야구게임 해보기

내 홈페이지와 연결

홈페이지 항목 중 project (임시 제목)에 들어가서 버튼을 누르면 야구게임 페이지가 새탭으로 열리게 했다.
아직 다 꾸미진 못했는데 야구공 모양 아이콘이 돌아가도록 설정했다. (참고한 코드 설정에서 속도가 괜찮은것 같아 따로 수치를 수정하진 않았다.)

<style>
#baseball img {
  margin : 10%;
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
}
</style>