🔥 #15 Javascript(숫자 맞추기 게임_Project)

박준석·2022년 9월 11일

JavaScript project

javascript

목록 보기

15/22

🔥 랜덤숫자 맞추기 프로젝트

git 코드보기
랜덤숫자 프로젝트 보기

이번 프로젝트는 컴퓨터에서 랜덤 숫자를 지정해 숫자를 맞추는 게임이다.

프로젝트 만드는 조건
1. 랜덤 번호 지정
2. 5번 기회동안 맞춰야하고 유저가 번호를 입력하고 입력 버튼 눌러 입력(5번 기회가 끝났으면 버튼 기능 비활성화)
3. 유저가 1~100 범위 밖에 숫자를 입력하면 알려준다.
4. 유저가 이미 입력한 숫자를 재입력하면 알려준다.
5. 유저가 입력한 숫자보다 높으면 up 낮으면 down 맞추면 맞췄습니다. 출력.

6. RESET버튼을 누르면 기회, 랜덤번호, 입력한 숫자, 전부 초기화

🐱HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="Random Number">
    <meta property="og:description" content="자신있으면 맞춰봐!">
    <meta property="og:image" content="Image/15457.jpg">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
    <title>숫자 맞추기 게임!</title>
</head>
<body>
    <div id="container">
        <div id="secondContainer">
            <h1>숫자맞추기 게임!</h1>
            <p>5번안에 맞춰봐!</p>
            <p>그럼 <span>커피</span>쏜다!</p>
            <img id="changeImg"src="Images/go!.gif" alt="가자!!">
            <p id="result">도전해봐~🙌</p>
            <div id="chance">남은기회 : 5</div>
            <div class="inputArea">
                <input id="inputNumber" type="number" placeholder="1부터 100까지 숫자를 입력하세요.">
                <button id="startButton">입력!</button>
                <button id="resetButton">RESET!</button>
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

    <meta property="og:title" content="Random Number">
    <meta property="og:description" content="자신있으면 맞춰봐!">
    <meta property="og:image" content="Image/15457.jpg">

위 코드는 모바일로 url 주소를 보낼때 아래와 같이 보내주는 역할이다.

🐱 javascript

// 랜덤 번호 지정
// 유저가  번호를 입력한다. 그리고 .go라는 버튼을 누름
// 만약에 유저가 랜덤번호를 맞추면, 맞췄습니다!
// 랜덤번호가 < 유저번호 Down
// 랜덤번호가 > 유저번호 up
// reset버튼을 누르면 게임이 리셋된다.
// 5번의 기회를 다쓰면 게임이 끝난다. (더이상 추측 불가, 버튼이 disable)
// 유저가 1~100 범위 밖에 숫자를 입력하면 알려준다. 기회를 깎지 않는다.
// 유저가 이미 입력한 숫자를 또 입력하면, 알려준다, 기회를 깎지 않는다.

let randomNumber = 0;
let inputNum = document.getElementById("inputNumber");
let startBtn = document.getElementById("startButton");
let result = document.getElementById("result");
let resetBtn = document.getElementById("resetButton");
let chanceArea = document.getElementById("chance");
let chance = 5;
let gameEnd = false;
let inputNumList = [];
let change = document.getElementById("changeImg");

startBtn.style.cursor="pointer";

// 랜덤 번호 지정.
function computerNum(){
    randomNumber = Math.floor(Math.random()*100)+1;
    console.log(randomNumber);
}
// 버튼
startBtn.addEventListener("click", start);
resetBtn.addEventListener("click", reset);

// 마우스로 입력창을 클릭할때 입력되어 있는 값을 리셋
inputNum.addEventListener("focus", function(){
    inputNum.value="";
})

// startbutton을 눌렀을 때 반응
function start(){
    let inputNumValue = inputNum.value;

    if(inputNumValue > 100 || inputNumValue < 1){
        result.textContent = "1부터 100사이의 숫자만 입력해주세요."
        return;
    }

    if(inputNumList.includes(inputNumValue)){
        result.textContent = "이미 입력한 숫자입니다."
        return;
    }

    chance--;

    chanceArea.textContent =`남은 기회 : ${chance}`;

    if(inputNumValue < randomNumber){
        change.src="Images/up.gif"
        result.textContent = "UP!!";
        
    } else if(inputNumValue > randomNumber){
        result.textContent = "DOWN!!";
        change.src="Images/down.gif"
    } else {
        result.textContent = "정답입니다!!!";
        change.src="Images/ok.gif"
        gameEnd=true;
    }

    inputNumList.push(inputNumValue);
    
    if(chance==0){
        gameEnd = true;
    }

    if(gameEnd==true){
        startBtn.disabled= true;
        startBtn.style.backgroundColor="rgba(75, 87, 255, 0.4)";
        startBtn.style.cursor = "default";
    }
};

// 리셋버튼 함수
function reset(){
    inputNumValue="";
    computerNum();
    gameEnd = false;
    chance = 5;
    startBtn.disabled =false;
    chanceArea.textContent =`남은 기회 : ${chance}`;
    inputNumList = [];
    change.src="Images/go!.gif"
};
// 함수를 실행하는 것.
computerNum();

코드 리뷰
위 코드를 하나씩 리뷰해보자.

let randomNumber = 0;
let inputNum = document.getElementById("inputNumber");
let startBtn = document.getElementById("startButton");
let result = document.getElementById("result");
let resetBtn = document.getElementById("resetButton");
let chanceArea = document.getElementById("chance");
let chance = 5;
let gameEnd = false;
let inputNumList = [];
let change = document.getElementById("changeImg");

일단은 변수명을 지정해주고 할당을 해준다.
document.getElementById("inputNumber"); 변수에 다음과 같이 할당한 이유는 HTML문서에 <input id="inputNumber" type="number" placeholder="1부터 100까지 숫자를 입력하세요.">에 있는 ID 값을 지정해 할당한 값이다.
즉 inputNum이라는 변수에 inputNumber라는 ID값이 할당이 된 것이다.

function computerNum(){
    randomNumber = Math.floor(Math.random()*100)+1;
    console.log(randomNumber);
}

function은 함수를 지정해 주는것이다. function computerNum()은 함수 이름은 computerNum()이라는 함수를 선언한 것이다.
computerNum() 함수 안에 randomNumber = Math.floor(Math.random()*100)+1;은 randomNumber라는 변수에 Math.floor(Math.random()*100)+1을 할당한 것이다.
여기서 Math.floor()은 소수점 이하를 버림하는 내장함수이고, Math.random()은 0부터 1까지 소수점 까지 랜덤으로 지정해주는 내장 함수이다. Math.random()*100 랜덤함수에서 100을 곱하고 1을 더하는 이유는 1부터 100까지 랜덤 숫자가 나와야해서 이다.
100을 곱하면 0~99까지 랜덤숫자가 나올 것이고 거기에 1을 더하면 1~100까지 출력이 될것이다.
그럼 100을 곱하면 1부터 100까지 소수점이 표현이 되는데 이 소수점을 없애려고 Math.floor()함수를 써서 소수점을 버려 정수만 표시해주는 것이다.

startBtn.addEventListener("click", start);
resetBtn.addEventListener("click", reset);

변수명.addEventListener("이벤트", 함수이름);
입렵, 리셋 버튼에 함수를 이벤트를 지정해 주는 것이다. 버튼을 클릭을 했을 때 각 함수를 실행하는 이벤트를 지정해주는 것이다.

function start(){
    let inputNumValue = inputNum.value;

    if(inputNumValue > 100 || inputNumValue < 1){
        result.textContent = "1부터 100사이의 숫자만 입력해주세요."
        return;
    }

    inputNumList.push(inputNumValue);
    if(inputNumList.includes(inputNumValue)){
        result.textContent = "이미 입력한 숫자입니다."
        return;
    }

    chance--;

    chanceArea.textContent =`남은 기회 : ${chance}`;

    if(inputNumValue < randomNumber){
        change.src="Images/up.gif"
        result.textContent = "UP!!";

    } else if(inputNumValue > randomNumber){
        result.textContent = "DOWN!!";
        change.src="Images/down.gif"
    } else {
        result.textContent = "정답입니다!!!";
        change.src="Images/ok.gif"
        gameEnd=true;
    }
 
    if(chance==0){
        gameEnd = true;
    }

    if(gameEnd==true){
        startBtn.disabled= true;
        startBtn.style.backgroundColor="rgba(75, 87, 255, 0.4)";
        startBtn.style.cursor = "default";
    }
};

let inputNumValue = inputNum.value;은 inputNumValue변수에 inputNum.value을 할당한다. 여기서 .value는 inputNum에 입력된 숫자의 값을 받겠다는 것이다.

	//사용자 입력값이 100보다 크거나 1보다 작다면 html문서 id값인 
  	//result에 textContent(출력한다.) 1부터 100사이의 숫자만 입력하세요." 라는 값을 
  	//출력하고,출력이 됬다면 return 어떤값도 반환하지 않고 끝낸다.
    if(inputNumValue > 100 || inputNumValue < 1){
        result.textContent = "1부터 100사이의 숫자만 입력해주세요."
        return;
    }

 	//inputList 배열에 사용자가 입력한 입력값을 입력한다.
  	inputNumList.push(inputNumValue);
	//사용자가 입력값을 입력하면 inputNumList라는 배열에 입력이된다.
  	//그럼 입력이 된 배열값에 .includes(~안에 포함이 되어있냐?)로 입력한
  	//값이 포함이 되어 있다면 result에 textContent(출력한다.)
  	//"이미 입력한 숫자입니다."를 출력하고, 출력이 됬다면 return 한다.
    if(inputNumList.includes(inputNumValue)){
        result.textContent = "이미 입력한 숫자입니다."
        return;
    }
	
  	//저 위 if문에 아무것도 포함이 되자않는다면 사용자가 값을 입력하고
  	//입력 버튼을 눌러 랜덤값과 입력값이 맞지 않는다면 기회가 하나씩 감소한다.
    chance--;
	
  	//그 남은 기회를 chanceArea라는 id값에 "남은기회 : (찬스값)"이 출력이된다.
    chanceArea.textContent =`남은 기회 : ${chance}`;

위 코드는 사용자가 입력했을 때 같은 숫자나 1부터 100까지의 숫자가 넘으면 남은기회를 깎지 않고 그렇지 않다면 남은 찬스를 깎는 코드이다.

	//만약에 사용자가 입력한 값이 랜덤번호보다 작다면 
	//change.src= 원래 있던 그림의 주소를 바꾸고.
	//result 값에 "up"이라는 메세지를 출력.
if(inputNumValue < randomNumber){
        change.src="Images/up.gif"
        result.textContent = "UP!!";

  	//만약에 사용자가 입력한 값이 랜덤번호보다 크다면 
	//change.src= 원래 있던 그림의 주소를 바꾸고.
	//result 값에 "down"이라는 메세지를 출력.
    } else if(inputNumValue > randomNumber){
        result.textContent = "DOWN!!";
        change.src="Images/down.gif"
 	//만약에 사용자가 입력한 값이 랜덤번호와 일치한다면 
	//change.src= 원래 있던 그림의 주소를 바꾸고.
	//gameEnd라는 변수에 true를 할당한다.
    } else {
        result.textContent = "정답입니다!!!";
        change.src="Images/ok.gif"
        gameEnd=true;
    }

  	//만약에 사용자에 남은기회가 0이 되면 gameEnd 변수에 ture를 할당한다.
        if(chance==0){
        gameEnd = true;
    }
	
  	//만약에 gameEnd가 true일 경우 입력버튼을 비활성화 시키고
  	//버튼을 흐리게 바꾸고. 버튼에 커서를 가져다 놓을때 마우스커서를 default 시킨다.
    if(gameEnd==true){
        startBtn.disabled= true;
        startBtn.style.backgroundColor="rgba(75, 87, 255, 0.4)";
        startBtn.style.cursor = "default";
    }

위 코드는 사용자 입력값에 따라 결과 값이 출력이되고, 사용자의 남는기회가 없을 때도, 정답일때도 버튼을 비활성화 시키는 코드이다.

function reset(){
    inputNumValue="";
    computerNum();
    gameEnd = false;
    chance = 5;
    startBtn.disabled =false;
    chanceArea.textContent =`남은 기회 : ${chance}`;
    inputNumList = [];
    change.src="Images/go!.gif"
};

리셋버튼이다. 리셋버튼을 누르면 inputNumValue=""; 사용자의 입력값을 초기화 시키고 computerNum(); 다시 랜덤번호를 실행시킨다. 이후 gameEnd = false; gameEnd을 false로 바꿔 버튼 비활성화 함수에서 빠져나온다. 그리고 chance = 5;남은기회를 다시 5번 으로 초기화시키고 startBtn.disabled =false; 버튼을 다시 활성화 시켜 chanceArea.textContent =남은 기회 : ${chance};남은기회를 다시 출력시킨다. 마지막으로 change.src="Images/go!.gif"원래 이미지로 바꾼다.

🔥 느낀점

자바스크립트로 여러가지를 만들 수 있다는 것을 느꼈고 자바스크립트를 더 배워서 더 많은것을 만들어 봐야 겠다.

박준석

안녕하세요 프론트엔드 개발자입니다. 글을 이전 중입니다.

이전 포스트

🔥 #14 javascript(함수 연습)

다음 포스트