TIL.4 Random Baseball Game 코드리뷰

37066 단어 jsTILTIL

간단 개념 정리

  • DOM 이란

The Document Object Model (문서 객체 모델) 은 HTML,XML 문서의 프로그래밍 interface 이다.
DOM 은 문서의 구조화된 표현을 제공하기때문에 프로그래밍 언어가 이것을 이용하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다. 이 특성을 이용하여 자바스크립트로 HTML문서를 생성과 조작하고 제어할 수 있다.

JS DOM 예시

var inputTag = document.querySelector('input'); // 기존 HTML에 있는 태그 선택.
var newDivTag = document.createElement('div'); // 새로운 div태그 생성.
newDivTag.innerHTML = '새로 생성된 input입니다.'; // 생성한 div태그에 text삽입.

  • 쓰여진 함수 간단히 보기

JS

numberList.splice(Math.floor(Math.random() * (9 - i)), 1);
// splice는 '배열'에서 인덱스에 있는 숫자(첫번째 인자)를 두번째 인자갯수만큼 반환하는 함수.
randomList.push(randomNumber[0]);
// push는 배열에 인자를 추가시킴.
randomList.join('')
// 배열.join(구분자) -> 문자로 만들어줌.
answer.split('')
// 문자.split(구분자) -> 배열로 만들어줌.(인덱스로 활용)
randomList.indexOf(Number(answerList[i])
// 배열에서 인자를 찾고 인덱스를 반환.

  • 이외 기억 할 것들

JS

event.preventDefault();
// event.preventDefault(); 는 'submit'의 기본 특성인 '새로고침'을 막는 기능.
inputTag.focus();
// 새로고침 되었을때 input태그로 다시 커서줌.

코드리뷰

랜덤으로 4가지 숫자를 야구방식으로 맞추는 게임.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css" />
        <title>JS Game/chrome</title>
    </head>
    <body>
        <h1>Number Baseball Game</h1>
        <div id="title">Choose 4 random digits, Be careful! you only have 5 chances😜</div>
        <form class="js-gameForm">
            <input type="text" maxlength="4"/>
            <button>Try</button>
        </form>
        <div id="result"></div>
        <div class="js-clock clock">
            <span class="js-time">00:00</span>
        </div>
        <form class="js-form form showing">
            <input type="text" placeholder="What is your name?" />
        </form>
        <div class="js-greeting greeting"></div>
        <script src="clock.js"></script>
        <script src="greeting.js"></script>
        <script src="bg.js"></script>
        <script src="numberBaseball.js"></script>
    </body>
</html>

JS

// 1~9랜덤숫자를 먼저 뽑아보자
var numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var randomList = [];
for (var i = 0; i < 4; i += 1) {
    var randomNumber = numberList.splice(Math.floor(Math.random() * (9 - i)), 1);
    randomList.push(randomNumber[0]);  
}
// Math.random() 함수로 랜덤숫자를 찾고,
// 0~8 의 자리수 중 랜덤으로 하나를 뽑아 새로운 배열에 넣음.
//splice는 기본으로 배열을 반환하기 떄문에 숫자만 얻기위해 배열의 특징인 자리수로 반환.
var formTag = document.querySelector('form'); // js에서 form 과 input 태그를 선택해줌.
var inputTag = document.querySelector('input'); 
var resultDiv = document.querySelector('#result');
var wrong = 0;
formTag.addEventListener('submit', function(event) { // 중요! addEventListener에서 'submit' 을 사용하기 위해서는 form 에 적용!(input 아님!)
    event.preventDefault(); // event.preventDefault(); 는 'submit'의 기본 특성인 '새로고침'을 막는 기능.
    var answer = inputTag.value; // 전역변수로 설정하면 안먹힌다.
    var answerList = answer.split('')
    if (randomList.join('') === answer) {
        console.log(randomList, answer, answerList)
        resultDiv.innerHTML = 'Home Run!!! Congratulations!'; // html 태그를 선택하여 text넣어주기.
        inputTag.value = "";
        inputTag.focus();
        console.log(randomList, answer, answerList)
        numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        randomList = [];
        for (var i = 0; i < 4; i += 1) {
            var randomNumber = numberList.splice(Math.floor(Math.random() * (9 - i)), 1);
            randomList.push(randomNumber[0]);
        }
        wrong = 0;   
    } else {
        wrong += 1;
        if (wrong < 5) {
            var strike = 0;
            var ball = 0;
            for (var i = 0; i < 4; i += 1) {
                if (Number(answerList[i]) === randomList[i]) {
                    strike += 1;
                } else if (randomList.indexOf(Number(answerList[i])) > -1) {
                    ball += 1;
                } else {
                }
            }
            inputTag.value = "";
            inputTag.focus();
            var left = 5 - wrong;
            var chance = "chances";
            if (wrong === 4) {
                chance = "chance";
                resultDiv.innerText = `${strike} strike, ${ball} ball. (${left} ${chance} left)`;
            }
            resultDiv.innerText = `${strike} strike, ${ball} ball. (${left} ${chance} left)`;
        } else {
            inputTag.value = "";
            inputTag.focus();
            resultDiv.innerHTML = 'It was (' + randomList + ')😛 Try again!';
            wrong = 0;
            numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            randomList = [];
            for (var i = 0; i < 4; i += 1) {
                var randomNumber = numberList.splice(Math.floor(Math.random() * (9 - i)), 1);
                randomList.push(randomNumber[0]);
            }            
        }           
    }   
});

💻구현된 페이지보기

2주 프로젝트 - loginPage
[Algorithm Study] 백준 10815

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage