티스토리 뷰

Study

Vanilla coding _ Number Baseball Ga

SungminKim 2022. 6. 2. 23:01

Number Baseball Game(WEP)

기능
1. 'Game start' 를 클릭 할 경우 'Enter' 버튼이 생김.
2. 입력칸에 세자리 숫자를 입력할 경우, 입력한 숫자와 무작위의 세자리 숫자를 비교하여
'Strike', 'Ball' score를 표시.
(입력한 숫자가 3자리가 아닐 경우 세자리로 입력하라는 경고창이 실행 되도록 함.)
3. 참여자는 10회 play 가능하며, 10회가 끝나면 'Enter' 버튼이 사라짐.
4. 'Replay' 버튼 클릭 시 'Enter' 버튼이 다시 생겨나며, 게임 가능 회수 또한 다시 10회가 주어짐.

 

 

회고
- 랜덤숫자를 생성하는 반목문을 별도의 함수로 만드려 하였으나, 함수로 만들 시 실행에서 문제가 발생하여 불가피하게 코드가 길어졌습니다.

-  'Enter' 버튼을 'display : none' , 'dispaly : block' 으로 교차 실행하는 방식을 사용하여 시작과 끝을 제한하였습니다.

- 참여자가 작성한 숫자와 'Game start' 버튼을 누를 때 생성되는 무작위 숫자를 비교 할 때 사용할 함수를 만들었으며,
해당 함수는 주로 indexOf를 활용한 반목문으로 구성했습니다. 

.

 

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link
      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Baseball Project</title>
  </head>

  <body>
    <section>
      <div class="image-box">
        <img src="images/vanilla_coding_logo.png" />
      </div>
      <h1>Baseball</h1>
      <div class="startbutton">Game start</div>
      <!-- 야구게임 Start -->
      <div class="enternumber">
        <label for="usernum">Please enter a number: </label>
        <input id="usernum" type="number" name="usernum" minleght ="3" maxlength="3" size="10" >
        <br>
        <button class="enterbutton">Enter</button>
        </br>
      </div>
      <div class="score">
        <p id = "strike">Strike: </p>
        <p id = "ball">Ball: </p>
      </div>
      <!-- 야구게임 End -->
      <div class="replaybutton">Replay</div>
    </section>

    <script src="index.js"></script>
  </body>
</html>
body {
  background-image: url("./images/bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 72px;
}

.startbutton{
  background-color: white;
  width : 150px;
  height: 120px;
  margin: auto;
  text-align: center;
  padding: 0px;
  border: 5px solid black;
  font-size: 20px;
  line-height: 120px
}

.enternumber{
  display: block;
  width : 200px;
  height: 80px;
  margin: auto;
  padding-top: 10px;
  text-align: center;
}

.enterbutton{
  display: none;
  margin: auto;
}

.score{
  background-color: white;
  border: 5px solid black;
  font-size: 20px;
  width : 140px;
  height: 110px;
  padding: 5px;
  margin: auto;
  text-align: start;
  line-height: center;
}

.replaybutton{
  background-color: white;
  width : 150px;
  height: 120px;
  margin: auto;
  text-align: center;
  padding: 0px;
  border: 5px solid black;
  font-size: 20px;
  line-height: 120px
}
const startButton = document.querySelector(".startbutton");
const enterNumber = document.querySelector(".enternumber");
const enterButton = document.querySelector(".enterbutton");
const replayButton = document.querySelector(".replaybutton");
const input = document.querySelector("input");
let Strike = document.getElementsByTagName("p")[0];
let Ball = document.getElementsByTagName("p")[1];
let hideNumber = [];

startButton.addEventListener("click",function(){
    let Numbers = [
        0,1,2,3,4,5,6,7,8,9
        ];
    for(let i = 0; i < 3; i++){
        const randomNumber = Math.floor(Math.random() * Numbers.length);
        hideNumber += randomNumber;
    };
    enterButton.style.display = "block";
});

function compareNum(){
    let a = 0;
    let b = 0;
    for(c = 0; c < hideNumber.length; c++){
        if(userNumber.indexOf(hideNumber[c],0)!==c && userNumber.indexOf(hideNumber[c],0) > -1){
            b +=1;
        } else if(userNumber.indexOf(hideNumber[c],0)===c){
            a +=1;
        };
    };
    Strike.innerText = "Strike: " + `${a}`;
    Ball.innerText = "Ball: " + `${b}`;
}

let userNumber = [];
let gameChance = 10;
enterButton.addEventListener("click",function() {
        Strike.innerText = "Strike: ";
        Ball.innerText = "Ball: ";
        userNumber = input.value;
        if(userNumber.length !== 3) {
            alert("세자리 숫자를 입력해주세요");
        } else if (gameChance < 0){
            Strike.innerText = "Strike: ";
            Ball.innerText = "Ball: ";
            input.value = "";
            enterButton.style.display = "none";
            hideNumber = [];
            userNumber = 0;
        } else if (userNumber.length === 3){
            compareNum();
            gameChance -= 1;
        };
});

replayButton.addEventListener("click",function() {
    
    Strike.innerText = "Strike: ";
    Ball.innerText = "Ball: ";
    userNumber = 0;
    gameChance = 10;
    input.value = "";
    let Numbers = [
        0,1,2,3,4,5,6,7,8,9
        ];
    for(let i = 0; i < 3; i++){
        const randomNumber = Math.floor(Math.random() * Numbers.length);
        hideNumber += randomNumber;
       };
    enterButton.style.display = "block";
});

'Study' 카테고리의 다른 글

[CS] 데이크스트라 알고리즘(Dijkstra algorithm) 분석  (0) 2023.04.23
[Service] 결제 서비스 구축 - 1. 결제 API 분석 및 엔티티 도출  (0) 2023.04.07
[Service] 결제 프로세스 및 사업자별 역할  (0) 2023.04.02
댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday