[JS] 숫자 맞추기 게임 만들기!

728x90

숫자 맞추기 게임

- 컴퓨터가 랜덤한 숫자를 생성하면 그 숫자를 사용자가 맞추는 게임

필요한 기능
1. 약간의 HTML과 CSS 사용
2. 컴퓨터가 랜덤 번호를 지정한다.
3. 사용자가 예상 번호를 입력한 후 '확인' 버튼을 누른다.
4. 만약, 랜덤번호를 맞추면 맞췄다고 알려준다.
5. 랜덤번호 < 유저번호일 경우, Down 출력
6. 랜덤번호 > 유저번호일 경우, UP 출력
7. '초기화' 버튼을 누르면 게임이 리셋된다.
8. 기회는 5번 주어지며 5번의 기회를 다 쓰면 게임이 끝난다.
9. 유저가 1~100 범위 밖의 숫자를 입력하면 알려주고, 기회를 감소시키지 않는다.
10. 이미 입력한 숫자를 또 입력하면 알려준 후 기회를 감소시키지 않는다.

1. 컴퓨터가 랜덤 번호를 지정하는 방법

let computerNumber=0;

//랜덤 번호 생성
function RandomNumber(){
    computerNumber = Math.floor(Math.random() * 100) + 1;
    console.log("정답: ",computerNumber);
}

RandomNumber();

함수를 이용하여 computerNumber에 랜덤한 수를 넣어준다.

Math.floor: 소수점 아래를 버린다.
Math.random: 0부터 1 사이의 수(0.1, 0.00001... 등)를 랜덤하게 발생시켜준다.

2. 사용자가 예상 번호를 입력한 후 확인 버튼을 누른다.

<body>
    <h1>Up&Down Game</h1>
    
    <div>1~100까지 수를 입력하세요.</div>
    <input type="number" id="input-number">
    <button id="ok-button">확인</button>
    <script src="main.js"></script>
</body>

let computerNumber=0;
let okButton = document.getElementById("ok-button");
let inputNumber = document.getElementById("input-number");

okButton.addEventListener("click", ok);

//랜덤 번호 생성
function RandomNumber(){
    computerNumber = Math.floor(Math.random() * 100) + 1;
    console.log("정답: ",computerNumber);
}

function ok() {
    let numberValue = inputNumber.value;
    console.log(numberValue);
}

RandomNumber();

확인 버튼을 자바스크립트로 가져와서 클릭 이벤트를 준다.

클릭을 할때마다 사용자가 입력한 숫자를 버튼이 받게 한다.

3. 사용자에게 정보 주기(Up, Down, 정답)

function ok() {
    let numberValue = inputNumber.value;
    if(computerNumber < numberValue){
        console.log("Down")
    }else if(computerNumber > numberValue){
        console.log("Up")
    }else{
        console.log("정답입니다.")
    }
}

RandomNumber();

ok 함수 안에 if문을 실행시켜 간단하게 정리할 수 있다.

만약 컴퓨터의 랜덤 번호가 사용자 입력보다 작다면 "Down" 출력

컴퓨터의 랜덤 번호가 사용자 입력보다 크다면 "Up" 출력

컴퓨터의 랜덤 번호와 사용자 입력가 같다면 "정답입니다." 출력

사용자가 콘솔을 보고 게임을 진행 할 수는 없기 때문에

결과를 화면에 출력해 주어야 한다.

HTML의 <div>1~100까지 수를 입력하세요.</div> 부분을 자바스크립트로 가져와

이 부분의 텍스트를 바꿔 주어야 한다.

let computerNumber=0;
let okButton = document.getElementById("ok-button");
let inputNumber = document.getElementById("input-number");
let resultText = document.getElementById("result-text");

okButton.addEventListener("click", ok);

//랜덤 번호 생성
function RandomNumber(){
    computerNumber = Math.floor(Math.random() * 100) + 1;
    console.log("정답: ",computerNumber);
}

function ok() {
    let numberValue = inputNumber.value;
    if(computerNumber < numberValue){
        resultText.textContent = "Down";
    }else if(computerNumber > numberValue){
        resultText.textContent = "Up";
    }else{
        resultText.textContent = "정답입니다.";
    }
}

RandomNumber();

resultText.textContent = "Down";
resultText의 텍스트를 Down으로 바꾸겠다는 의미

4. 초기화 버튼 만들기

초기화 버튼을 누를 경우

1. 숫자 입력창에 있는 숫자가 사라진다.

2. 컴퓨터의 랜덤한 수가 다시 할당된다.

3. 텍스트도 초기화 된다.

<body>
    <h1>Up&Down Game</h1>
    
    <div id="result-text">1~100까지 수를 입력하세요.</div>
    <input type="number" id="input-number">
    <button id="ok-button">확인</button>
    <button id="reset-button">초기화</button>
    <script src="main.js"></script>
</body>

let computerNumber=0;
let okButton = document.getElementById("ok-button");
let inputNumber = document.getElementById("input-number");
let resultText = document.getElementById("result-text");
let resetButton = document.getElementById("reset-button");

okButton.addEventListener("click", ok);
resetButton.addEventListener("click",reset);

//랜덤 번호 생성
function RandomNumber(){
    computerNumber = Math.floor(Math.random() * 100) + 1;
    console.log("정답: ",computerNumber);
}

function ok() {
    let numberValue = inputNumber.value;
    if(computerNumber < numberValue){
        resultText.textContent = "Down";
    }else if(computerNumber > numberValue){
        resultText.textContent = "Up";
    }else{
        resultText.textContent = "정답입니다.";
    }
}

function reset(){
    // 숫자 입력 창 초기화
    inputNumber.value="";
    // 랜덤한 수 재할당
    RandomNumber();
    // 텍스트 초기화
    resultText.textContent = "1~100까지 수를 입력하세요.";
}
RandomNumber();

리셋 버튼에 클릭 이벤트를 주고 클릭이 될때마다 reset 함수가 실행 되도록 구현해준다.

5. 5번의 기회를 준다.

기회를 5번을 주고 기회를 다 소진하면 버튼을 더 이상 누를 수 없게 만든다.

우선 몇 번의 기회가 남았는지 알기 위해HTML에 기회를 작성해준다.

<body>
    <h1>Up&Down Game</h1>
    
    <div id="result-text">1~100까지 수를 입력하세요.</div>
    <input type="number" id="input-number">
    <button id="ok-button">확인</button>
    <button id="reset-button">초기화</button>
    <div id="chance-text">남은 기회: 5</div>
    <script src="main.js"></script>
</body>

그 후 이 텍스트를 자바스크립트로 들고 와서 기회가 한 번씩 줄어 들 때마다 감소하게

코드를 작성해 준다.

let computerNumber=0;
let okButton = document.getElementById("ok-button");
let inputNumber = document.getElementById("input-number");
let resultText = document.getElementById("result-text");
let resetButton = document.getElementById("reset-button");
let chance = 5;
let finish = false;
let chanceText= document.getElementById("chance-text");

okButton.addEventListener("click", ok);
resetButton.addEventListener("click",reset);

//랜덤 번호 생성
function RandomNumber(){
    computerNumber = Math.floor(Math.random() * 100) + 1;
    console.log("정답: ",computerNumber);
}

function ok() {
    let numberValue = inputNumber.value;

    chance--;
    // 기회가 감소한다.
    chanceText.textContent = `남은 기회: ${chance}`;
    //if로 결과 알려주기
    if(computerNumber < numberValue){
        resultText.textContent = "Down";
    }else if(computerNumber > numberValue){
        resultText.textContent = "Up";
    }else{
        resultText.textContent = "정답입니다.";
    }

    if(chance == 0){
        finish = true;
    }

    if(finish == true){
        okButton.disabled = true;
    }
}


function reset(){
    // 숫자 입력 창 초기화
    inputNumber.value="";
    // 랜덤한 수 재할당
    RandomNumber();
    // 텍스트 초기화
    resultText.textContent = "1~100까지 수를 입력하세요.";
}
RandomNumber();

`남은 기회 &{chance}`;
변하지 않는 값과 변할 수 있는 값을 같이 쓰고 싶을 때는
` ` 안에 쓰고 변하는 값은 &{ }으로 감싼다.

6. 1~ 100 사이의 수가 아닌 수를 입력했을 경우

사용자가 1부터 100 사이의 숫자를 입력하지 않은 경우

1부터 100 사이의 수를 입력하라고 텍스트에 알려준 후 기회는 줄어들지 않게 한다.

function ok() {
    let numberValue = inputNumber.value;

    // 1~100 사이의 수가 아닌 수를 입력했을 경우
    if(numberValue < 1 || numberValue> 100){
        resultText.textContent = "1~100까지 수를 입력하세요.";
        return;
    }
    chance--;
}

ok 함수의 chance가 줄어들기 전에 우선 사용자가 입력한 수가

1~100 사이의 수인지 if문을 통해 검사를 한다.

만약 사이의 수가 아니라면 return을 통해 빠져 나온다.

7. 중복된 수를 입력했을 경우

사용자가 중복해서 수를 입력했을 경우

텍스트로 알려주고 기회를 감소시키지 않는다.

지금까지 입력해 온 수를 저장해 놓기 위해 위에서 배열을 선언한다.

let infomaition = [ ];그 후 ok 함수 안에서 구현을 해 주면 된다.

function ok() {
    let numberValue = inputNumber.value;

    // 1~100 사이의 수가 아닌 수를 입력했을 경우
    if(numberValue < 1 || numberValue> 100){
        resultText.textContent = "1~100까지 수를 입력하세요.";
        return;
    }
    // 중복해서 수를 입력했을 경우
    if(infomaition.includes(numberValue)){
        resultText.textContent="이미 입력한 숫자입니다.";
        return;
    }
    
    chance--;
    
    // [생략]
   
    infomaition.push(numberValue);

	// [생략]
}

끝!

(더 많은 디테일이나 HTML, CSS로 꾸미는 건 나중에 해서 깃헙에 올려야지...)

728x90

저작자표시

'Javascript' 카테고리의 다른 글

[JS] ES6 문법을 알아보자 (0)	2022.08.12
[JS] 반복문 for문, while문 (0)	2022.08.08
[JS] 조건문인 if문, switch문, 삼항 연산식에 대해 알아보자 (0)	2022.08.04
[JS] 객체(Object) 알아보기 (0)	2022.08.03
[JS] 배열과 배열과 함께 쓰이는 함수들 (0)	2022.08.02

공대생의 IT 정복기

[JS] 숫자 맞추기 게임 만들기!

'Javascript' 카테고리의 다른 글

티스토리툴바

[JS] 숫자 맞추기 게임 만들기!

'Javascript' 카테고리의 다른 글

관련글

티스토리툴바