[js] 숫자 야구 (Number Baseball)

GY·2021년 5월 27일
0

Vanilla JS Project

목록 보기
2/19
post-thumbnail

결과물

html

<!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">
        <p style="text-align: center">
          <img class="logo" src="images/vanilla_coding_logo.png" />
        </p>
      </div>
      <h1>Baseball</h1>

      <!-- 야구게임 Start -->
      <!-- <div class="strike">
        <p class="strike1">e</p>
      </div>
      <p class="ball">ball</p> -->

      <p class ="starts" style="text-align: center">
        <input
          type="button"
          id="gamestart"
          style="height: 60px; width: 100px; border-radius: 50px"
          value="게임시작"
          onclick="makeno()"
        ></button>
        <input
        type="button"
        style="height: 60px; width: 100px; border-radius: 50px"
        id="restartb"
        value="재시작"
        onclick="restart()"
      />
      </p>
      <p id="inputs" style="text-align: center">
        <input class ="write" type="text" id="writeno" placeholder="3자리 숫자를 입력하세요"/>
        <input type="button"
          value="결과보기"
          style="height: 25px; width: 70px"
          id="submit"
          
          onclick="getno()"
        />
        <p id="restart" style="text-align: center">
          

      </p>
      <p style >
      <p id=s style=text-align:center>
          스트라이크:0
      </p>
      <p id=b style=text-align:center>
        볼:0
    </p>
    <p id=r style=text-align:center>
        기회는 10번입니다
    </p>
</p>
      <!-- <p style="text-align: center">
        <button
          type="button"
          style="height: 25px; width: 70px"
          id="restart"
          value="restart"
          onclick="restartb()" -->
        <!-- /> -->
        <!-- <button
          type="button"
          style="height: 25px; width: 70px"
          id="change"
          value="submit"
          onclick="changep()"
        /> -->
      </p>

      <!-- 야구게임 End -->
    </section>

    <script src="index.js"></script>
  </body>
</html>

css

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;
}
.logo {
  height: 20px;
  width: 60px;
}
#gamestart {
  position: fixed;
  left: 300px;
  top: 220px;
}
#submit {
  position: fixed;
  top: 410px;
  left: 490px;
}
#inputs {
  position: fixed;
  top: 400px;
  left: 300px;
}
.starts {
  flex: flex-wrap;
}
#restartb {
  position: fixed;
  right: 300px;
  top: 220px;
}
#result {
  float: left;
}

js

let nolist2 = new Array(3);
let a = 10;
function makeno() {
  //길이가 3인 새 배열을 생성한다.
  //   let nolist = ["a", "b", "c"];
  for (i = 0; i < 3; i++) {
    nolist2.splice(i, 1, Math.floor(Math.random() * 9));
    //nolist배열 1번째 위치의 1개 요소를 삭제하고
    //그 자리에 랜덤하게 만든 0~9 범위의 한 자리 숫자를 추가한다.
  }
  console.log(nolist2);
  //   return nolist;
}
// var nolist2 = makeno();
// let a = 10;
function getno() {
  a--;

  if (a <= 0) {
    alert("10번을 모두 시도했습니다! 게임 실패!");
  }
  //   let getnolist = [];
  const getnolist = document.getElementById("writeno").value;
  if (getnolist.length != 3) {
    alert("3자리 숫자를 입력해주세요!");
  } else {
    // for (i = 0; i < 3; i++) {
    let slicenolist = [1, 2, 3];
    let sliceno0 = getnolist.substr(0, 1);
    slicenolist.splice(0, 1, sliceno0);
    let sliceno1 = getnolist.substr(1, 1);
    slicenolist.splice(1, 1, sliceno1);
    let sliceno2 = getnolist.substr(2, 1);
    slicenolist.splice(2, 1, sliceno2);
    let tonum0 = slicenolist.splice(0, 1, parseFloat(slicenolist[0]));
    let tonum1 = slicenolist.splice(1, 1, parseFloat(slicenolist[1]));
    let tonum2 = slicenolist.splice(2, 1, parseFloat(slicenolist[2]));
    console.log(slicenolist);

    //스트라이크
    let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
        let exception = i;
        // console.log("제외할 스트라이크 위치:" + exception);
        // console.log("스트라이크:" + n);

        let x = 0;
        for (j = 0; j < 3; j++) {
          for (k = 0; k < 3; k++) {
            if (j != exception && k != exception) {
              if (j != k) {
                if (nolist2[j] == slicenolist[k]) {
                  x++;

                  console.log(j + "," + k + "볼" + x);
                } else {
                  console.log("볼:" + x);
                  console.log("스트라이크" + n);
                }
              }
            }
          }
        }
        console.log("볼:" + x);
        // alert("볼:" + x); //여기서 볼 갯수
        document.getElementById("b").innerHTML = "볼:" + x;
      } else {
        n = n;
        console.log("스트라이크" + n);
        // document.getElementById("s").innerHTML = "스트라이크:" + n;
      }
    } //for문 끝

    if (a > 0) {
      //   alert("스트라이크:" + n + " " + "볼:" + x + " " + a + "번 남았습니다"); //여기서 스트라이크 갯수
      document.getElementById("s").innerHTML = "스트라이크:" + n;
      document.getElementById("r").innerHTML = a + "번 남았습니다";
    }
  }
}

//
function clearno() {
  var inp = document.getElementsByClassName("write");

  for (var i = 0; i < inp.length; i++) {
    inp[i].value = "";
  }
}
function restart() {
  var a = 10;

  document.getElementById("r").innerHTML = a + "번 남았습니다";

  makeno();


  clearno();


}

과정

- 게임 시작 버튼 만들기

- 게임 시작 버튼 클릭 시 랜덤한 세 자리 숫자 생성

function makeno() {
  //길이가 3인 새 배열을 생성한다.
  const nolist = ['a','b','c']
  for (i = 0; i < 3; i++) {
    nolist.splice(i, 1, Math.floor(Math.random() * 9));
    //nolist배열 1번째 위치의 1개 요소를 삭제하고
    //그 자리에 랜덤하게 만든 0~9 범위의 한 자리 숫자를 추가한다.
  }
 //테스트 console.log(nolist);
}

- 숫자 입력칸 만들기

입력창에 숫자를 입력하고 버튼을 클릭하면 해당 숫자 값을 받아올 수 있도록 만든다.

<p style="text-align: center">
        <button
          type="button"
          id="gamestart"
          style="height: 60px; width: 100px; border-radius: 50px"
          value="gamestart"
          onclick="makeno()"
        ></button>
      </p>
      <p id="inputs" style="text-align: center">
        <input type="text" id="writeno" />
        <button type="button" style= "height:25px;
        width:70px;"id="submit"value="submit" value="submit"token function">getno()"
      </p>
//script
function getno() {
  //   let getnolist = [];
  let getnolist = document.getElementById(writeno);
  console.log(getnolist);
}

- 입력값이 세자리 숫자가 아닌 경우 경고창 띄우기

배열값의 길이를 length()로 확인하고, 3이 아닐경우 if문으로 경고창 띄우기

everdevel

function getno() {
  //   let getnolist = [];
  const getnolist = document.getElementById("writeno").value;
  if (getnolist.length != 3) {
    alert("3자리 숫자를 입력해주세요!");
//배열값의 길이를 length()로 확인하고, 3이 아닐경우 if문으로 경고창 띄우기
  }
 
}

- 입력완료 후 생성한 숫자와 사용자의 입력값 비교

여기서 엔터키는 숫자를 입력하기 위한 것이니, 이미 만들어놓은 제출 버튼으로 대체, 받은 세자리 숫자를 배열값으로 바꿔 넣기

substr()로 문자열 자르기

function getno() {
  //   let getnolist = [];
  const getnolist = document.getElementById("writeno").value;
  if (getnolist.length != 3) {
    alert("3자리 숫자를 입력해주세요!");
  } else {
    // for (i = 0; i < 3; i++) {
    let slicenolist = ["a", "b", "c"];
    let sliceno0 = getnolist.substr(0, 1);
    slicenolist.splice(0, 1, sliceno0);
    let sliceno1 = getnolist.substr(1, 1);
    slicenolist.splice(1, 1, sliceno1);
    let sliceno2 = getnolist.substr(2, 1);
    slicenolist.splice(2, 1, sliceno2);
    console.log(slicenolist);
    console.log(getnolist);
    console.log(slicenolist);
    // }
  }
}
//635를 입력창에 입력했을 때
//결과 : ["6", "3", "5"]
//게임시작 버튼을 클릭했을 때 랜덤생성 숫자 : [1, 4, 6]
//문자열로 들어왔기 때문에 숫자로 변환이 필요하다.

- 스트라이크 갯수 판별

입력창에 입력한 숫자는 문자열로 들어왔다 (예: 134)

이 배열을 하나하나 분리해 배열에 넣었다.이 때 요소는 문자 형태이다(예:"1","3","4")

게임 시작 버튼을 클릭했을 때 랜덤으로 생성된 숫자는 숫자형태이다(예: 254)

따라서 먼저 입력숫자를 넣은 배열을 숫자형태로 바꾸어야 한다.

parseFloat으로 문자열을 숫자로 변환

function getno() {
  //   let getnolist = [];
  const getnolist = document.getElementById("writeno").value;
  if (getnolist.length != 3) {
    alert("3자리 숫자를 입력해주세요!");
  } else {
    // for (i = 0; i < 3; i++) {
    let slicenolist = [1, 2, 3];
    let sliceno0 = getnolist.substr(0, 1);
    slicenolist.splice(0, 1, sliceno0);
    let sliceno1 = getnolist.substr(1, 1);
    slicenolist.splice(1, 1, sliceno1);
    let sliceno2 = getnolist.substr(2, 1);
    slicenolist.splice(2, 1, sliceno2);
    let tonum0 = slicenolist.splice(0, 1, parseFloat(slicenolist[0]));
    let tonum1 = slicenolist.splice(1, 1, parseFloat(slicenolist[1]));
    let tonum2 = slicenolist.splice(2, 1, parseFloat(slicenolist[2]));
    console.log(slicenolist);
//for문으로 간략하게 작성하고 싶었으나...작성 시 오류가 나서 일일히 다 작성했다.
    // console.log(tonum);
    // console.log(getnolist);
    // console.log(slicenolist);
    // }

  }
}
//이전결과: ["4", "6", "4"]
//결과 : [4, 6, 4]

nolist in not defined라는 오류가 난다.

아마도...makeno()에서 만든 nolist가 getno()실행시에는 유효하지 않아 if문에서 nolist가 정의되어 있지 않다고 뜨는 것 같다. 

let n = 0;
    if (nolist2[0] == slicenolist[0]) {
      console.log("right");
    }
//결과
(3) [0, 2, 7] //게임시작 버튼 클릭시 랜덤으로 생성된 3자리 숫자
(3) [0, 2, 7] //테스트를 위해 
index.js:34 right
let n = 0;
    if (nolist2[0] == slicenolist[0]) {
      n++;
      console.log(n);
      if (nolist2[1] == slicenolist[1]) {
        n++;
        console.log(n);
        if (nolist2[2] == slicenolist[2]) {
          n++;
          console.log(n);
        }
      }
    }
//결과
(3) [6, 3, 6]//랜덤생성 숮자
(3) [6, 3, 6]//입력한 숫자
1 //첫번째 숫자가 동일하니 n++
2 //두번째 숫자가 동일하니 n++
3 //세번째 숫자가 동일하니 n++
(3) [6, 4, 6]//다시 입력한 숫자
1//첫번째 숫자가 동일하니 n++
 //하지만 두번째 숫자가 다르므로 카운트하지않음
 //세번째 숫자는 동일하지만 카운트하지 않음

//일일히 경우의 수를 나눠 if문을 작성하는 건 비효율적인 일이다. 다른 방법을 찾아보자.

let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
      }
    }
    console.log(n);
  }
}

//결과
[0, 7, 7] //랜덤생성 숫자
[0, 7, 7] //입력숫자
3         //같은 숫자는 3개
[0, 7, 6] //입력숫자
2         //같은 숫자 2개
[0, 6, 7] //입력숫자
2         //같은 숫자 2개 ->2번째 숫자는 다르고 3번째 숫자는 같을 때, 위와 달리 정상적으로 카운트
[0, 2, 2] //입력숫자
1         //같은 숫자 1개 
[2, 2, 7] //입력숫자
1         //같은 숫자 1개

//이렇게 하면, 처음 생성된 랜덤 숫자 3자리외에 게임시작 버튼을 다시 눌렀을 때 생성되는 새로운 숫자는
//입력한 숫자와 비교되지 않는다.

- 볼 갯수 판별

//숫자는 맞지만 위치가 틀렸을 경우가 볼이다.
//그렇다면...nolist의 [0]을 slicenolist의 [0],[1],[2]에 각각 비교해 
//맞는 숫자인지 확인해 카운트하고,

//다시 [1]을 [0],[1],[2]에 각각 비교하는 방식으로 해야할 것 같다. 
//이 역시 비슷하게 for문으로 작성하면 될 것 같다.

let x = 0;
    for (j = 0; j < 3; j++) {
      for (k = 0; k < 3; k++) {
        if (nolist2[j] == slicenolist[k]) {
          x++;
        }
      }
      console.log("볼" + x);
    }
//결과
[0, 0, 1]//랜덤생성숫자
[0, 1, 0]//입력숫자
index.js:39 스트라이크:1 //첫번째 자리 0이 동일
index.js:47 볼2         //???왜 계속 카운트 되는 거지?
index.js:47 볼4
index.js:47 볼5

볼 갯수가 제대로 카운트 되지 않는다.스트라이크와 중복카운트가 발생한다.

/*[0]요소는 [1],[2]요소와 비교해야한다.[0]은 제외해야한다.
포함할경우 스트라이크를 포함해 볼 갯수를 카운트하게 된다.
인덱스로 비교해보면 어떨까? 
혹은 IF문에서 예외처리를 하는 방법도 있을 것 같다.
우선은 if문 조건을 추가해본다.*/

let x = 0;
    for (j = 0; j < 3; j++) {
      for (k = 0; k < 3; k++) {
        if (j != k) {                       //같은 자리 숫자는 비교하지 않도록 코드를 추가
          if (nolist2[j] == slicenolist[k]) {
            x++;
            console.log("k" + k);
            console.log("i" + j);
          }
        }
      }
      console.log("볼" + x);
    }

//아직 남아있는 문제..
//결과
[5, 4, 5]//생성숫자
[5, 5, 4]//입력숫자
스트라이크:1 //1번째 숫자가 동일하니 스트라이크가 1개는 맞다.
k1  //j와 k의 인덱스가 같은 경우는 제외, j=0,k=1의 인덱스 값을 비교했다.
i0
볼1 //생성숫자 배열의 [0]의 숫자는 이미 스트라이크로 판명이 되었는데, 
    //다시 입력숫자배열의 [1]과 같은 숫자이므로 볼로 카운트되었다.
		//이렇게 되면 이 케이스에서 볼이 4개가 된다.(실제로는2)
//한번 스트라이크로 판명이 되면, 이 경우를 제외하고 볼로 카운트해야 한다.

//그렇다면..애초에 스트라이크로 판명하는 조건인 nolist[j]==slicenolist[k]의 
//else if문 안에서 볼 카운트를 하면 되지 않을까?

스트라이크를 제외하고 볼을 카운트해야 한다.

let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
        console.log("스트라이크:" + n);
      } else {
        let x = 0;
        for (j = 0; j < 3; j++) {
          for (k = 0; k < 3; k++) {
            if (j != k) {
              if (nolist2[j] == slicenolist[k]) {
                x++;

                console.log(j + "," + k + "볼" + x);
              }
//결과
(3) [0, 0, 3]
(3) [0, 3, 0]
index.js:37 스트라이크:1
index.js:46 0,2볼1 //카운트하지 말아야함
index.js:46 1,0볼2 //카운트하지 말아야함
index.js:46 1,2볼3
index.js:46 2,1볼4

//한번 스트라이크가 판명되고 나면 해당 i와 j,k가 다른 경우에만 볼을 카운트 하도록 해본다.
//스트라이크로 판명난 인덱스는 exception변수로 예외처리를 했다.
//각 생성숫자와 입력숫자 배열을 비교할 때, 이 exception으로 처리된 인덱스값은 제외하고 비교한다.

let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
        let exception = i;
        console.log("제외할 스트라이크 위치:" + exception);
        console.log("스트라이크:" + n);

        let x = 0;
        for (j = 0; j < 3; j++) {
          for (k = 0; k < 3; k++) {
            if (j != exception && k != exception) {
              if (j != k) {
                if (nolist2[j] == slicenolist[k]) {
                  x++;

                  console.log(j + "," + k + "볼" + x);

//결과

(3) [6, 7, 7]//생성숫자
(3) [7, 6, 7]//입력숫자
index.js:38 제외할 스트라이크 위치:2
/*각 배열의 인덱스[2]의 값이 스트라이크이기 때문에,
해당 인덱스는 제외하고 볼을 카운트한다.*/
index.js:39 스트라이크:1
index.js:49 0,1볼1    
index.js:49 1,0볼2   
/*이전과 달리 각배열의 [2]의 값은 다른 인덱스와 비교하여 볼로 카운트 하지 않는다.
따라서 볼은 2개이다.*/

//남은 문제..
[070] //생성숫자
[707] //입력숫자
//이 경우 스트라이크:0으로 표기되지만, 볼은 3으로 카운트되지 않는 듯하다.

볼이 0일 경우 제대로 카운트하거나 출력되어야 한다.

let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
        let exception = i;
        console.log("제외할 스트라이크 위치:" + exception);
        console.log("스트라이크:" + n);

        let x = 0;
        for (j = 0; j < 3; j++) {
          for (k = 0; k < 3; k++) {
            if (j != exception && k != exception) {
              if (j != k) {
                if (nolist2[j] == slicenolist[k]) {
                  x++;

                  console.log(j + "," + k + "볼" + x);
                } else {
                  console.log("볼" + x);
                }
              }
            }
          }
        }
      } else {
        console.log("스트라이크" + n);
        console.log("볼:0");            //"볼"+x의 형식으로 x횟수를 출력하지 않고
																				//그대로 볼의 갯수는 0이라는 문장을 출력하도록 함
      }
    }
  }
}
//처음 조건이 if (nolist2[i] == slicenolist[i])었기 때문에, 어떤 인덱스값도 일치하지 않을 경우
//변수 exception이 제대로 정의되지 않아 if (j != exception && k != exception)아래로는
//제대로 작동하지 않은 듯합니다.따라서 x가 카운트되거나 제대로 출력되지 않은 것 같습니다.

//그리 깔끔하고 좋은 코드는 아닌 것 같지만...이런 경우는 볼이 0일 경우 하나이기 때문에
//이렇게 코드를 작성해도 기능을 작동시키는 데에는 큰 무리가 없을 것 같다고 판단했습니다.

- 화면에 스트라이크와 볼의 갯수 표기

//오류를 찾기위해 작성했던 테스트 코드들을 지우고, 
//최종 볼과 스트라이크 갯수만 콘솔창에 출력되도록 수정했습니다.
//이제 화면에 띄우기만 하면 됩니다.

let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
        let exception = i;
        // console.log("제외할 스트라이크 위치:" + exception);
        // console.log("스트라이크:" + n);

        let x = 0;
        for (j = 0; j < 3; j++) {
          for (k = 0; k < 3; k++) {
            if (j != exception && k != exception) {
              if (j != k) {
                if (nolist2[j] == slicenolist[k]) {
                  x++;

                  //   console.log(j + "," + k + "볼" + x);
                } else {
                  //   console.log("볼:" + x);
                }
              }
            }
          }
        }
        // console.log("볼:" + x);
        // alert("볼:" + x);
      } else {
        n = n;
        // console.log("스트라이크" + n);
        x = 0;
      }
    } //for문 끝
    // console.log("스트라이크:" + n);
    alert("스트라이크:" + n + " " + "볼:" + x);
//원래는 innerHTML로 화면상의 텍스트를 변경하려 했지만, 왜인지 적용이 되지 않아
//우선은 알림창으로 표시했다. 이 부분은 차차 해결해나가야 한다.
  }
}

- 사용자가 10회까지 시도할 수 있도록 제한

//우선....입력 버튼을 클릭한 횟수 혹은 경고창이 뜬 횟수를 카운트해야할 것 같다.
let a = 0;         //a를 함수 밖에서 선언
function getno() { //숫자입력후 입력버튼을 클릭하면 실행되는 함수
	  a++;           //버튼클릭 시마다 a가 1씩 증가
//a가 1씩 증가하다가 10이 되면 경고창만 뜨도록한다.
let a = 10;
function getno() {
  a--;

  if (a <= 0) {
    alert("10번을 모두 시도했습니다! 게임 실패!");
  }
  //   let getnolist = [];
  const getnolist = document.getElementById("writeno").value;
  if (getnolist.length != 3) {
    alert("3자리 숫자를 입력해주세요!");
  } else {
    // for (i = 0; i < 3; i++) {
    let slicenolist = [1, 2, 3];
    let sliceno0 = getnolist.substr(0, 1);
    slicenolist.splice(0, 1, sliceno0);
    let sliceno1 = getnolist.substr(1, 1);
    slicenolist.splice(1, 1, sliceno1);
    let sliceno2 = getnolist.substr(2, 1);
    slicenolist.splice(2, 1, sliceno2);
    let tonum0 = slicenolist.splice(0, 1, parseFloat(slicenolist[0]));
    let tonum1 = slicenolist.splice(1, 1, parseFloat(slicenolist[1]));
    let tonum2 = slicenolist.splice(2, 1, parseFloat(slicenolist[2]));
    console.log(slicenolist);

    //스트라이크
    let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
        let exception = i;
        // console.log("제외할 스트라이크 위치:" + exception);
        // console.log("스트라이크:" + n);

        let x = 0;
        for (j = 0; j < 3; j++) {
          for (k = 0; k < 3; k++) {
            if (j != exception && k != exception) {
              if (j != k) {
                if (nolist2[j] == slicenolist[k]) {
                  x++;

                  //   console.log(j + "," + k + "볼" + x);
                } else {
                  //   console.log("볼:" + x);
                }
              }
            }
          }
        }
        // console.log("볼:" + x);
        // alert("볼:" + x);
      } else {
        n = n;
        // console.log("스트라이크" + n);
        x = 0;
      }
    } //for문 끝
    // console.log("스트라이크:" + n);
    if (a > 0) {
      alert("스트라이크:" + n + " " + "볼:" + x + " " + a + "번 남았습니다");
    }
  }
}

//문제..
//왠일인지 갑자기 볼 갯수가 카운팅이 제대로 되지 않습니다... 다시 점검이 필요합니다.

alert에는 볼 갯수가 카운팅되어 출력되지 않고,콘솔창에는 제대로 출력된다.

변수 x값에 뭔가 문제가 생긴 것 같다.

let nolist2 = new Array(3);//nolist2 배열 선언을 모든 함수밖에서 가장먼저 해주었다.
												 	//makeno에서 배열에 값을 넣고 getno()에서 사용할 것이기 때문에,
													//nolist2는 지역변수가 아닌 권역변수가 되어야 한다.
let a = 10;
function makeno() {

  let nolist = ["a", "b", "c"];
  for (i = 0; i < 3; i++) {
    nolist2.splice(i, 1, Math.floor(Math.random() * 9));
    
  }
  console.log(nolist2);
  //   return nolist;
}
// var nolist2 = makeno(); <-기존에는 makeno()내 지역변수 nolist를 함수 밖,getno()에서
														//호출하기 위해 새로 nolist2=makeno()로 지정했는데,게임시작 버튼을
														//누르기도 전에 새로고침 시 숫자가 생성되는 문제가 있었다.
// let a = 10;
function getno() {
  a--;

콘솔창에서는 스트라이크가 제대로 카운트되는데, 화면에서는 반영이 되지 않는다.

let n = 0;
    for (i = 0; i < 3; i++) {
      if (nolist2[i] == slicenolist[i]) {
        n++;
        let exception = i;
        let x = 0;
        for (j = 0; j < 3; j++) {
          for (k = 0; k < 3; k++) {
            if (j != exception && k != exception) {
              if (j != k) {
                if (nolist2[j] == slicenolist[k]) {
                  x++;

                  console.log(j + "," + k + "볼" + x);
                } else {
                  console.log("볼:" + x);
                  console.log("스트라이크" + n);
                }
              }
            }
          }
        }
        console.log("볼:" + x);
      //여기서 볼 갯수 출력
        document.getElementById("b").innerHTML = "볼:" + x;
      } else {
        n = n;
        console.log("스트라이크" + n);
  
      }
    } //for문 끝

    if (a > 0) {
      //여기서 스트라이크 갯수 출력
      document.getElementById("s").innerHTML = "스트라이크:" + n;//여기서 출력하는 것으로 해결
      document.getElementById("r").innerHTML = a + "번 남았습니다";
    }
  }
}

- 게임 재시작 버튼만들기

재시작 버튼을 클릭하면 새로고침 후 게임시작이 되도록 만들면 되지 않을까?

[Javascript] 현재 페이지 Refresh 방법 - (3가지)

function restart() {
  location.reload();
  makeno();
}
//이렇게 하면 숫자는 생성되지만 바로 새로고침이 되면서 함께 날아가버린다.
//즉, 게임시작 버튼을 한 번 더 눌러야만 랜덤숫자가 생성되고 게임이 시작된다.
//재시작 버튼을 누름과 동시에 게임이 시작되기 위해서는 다른 방법이 필요하다.

게임 재시작의 효과:

  • 텍스트 입력창에 쓰인 숫자를 지우고,
  • 다시 랜덤 숫자를 생성하도록 만들어보자.
  • 동시에 게임 실행 기회도 10번으로 초기화해야한다.
    하지만 아직 이부분은 제대로 구현하지 못했다.

배운점 정리

- 배열 선언 방법 정리

[Javascript] 배열 선언하는 2가지 방법

function getno() {

*//   let getnolist = [];*

const getnolist = document.getElementById("writeno").value;

console.log(getnolist);

}

- 버튼에 글자가 나타나지 않는 이유

  • button태그로도 버튼 생성이 가능하나, input태그로 생성 후 value값을 지정해주었을 때 버튼에 텍스트가 나타납니다.

- 문자열을 숫자로 변환하기

  Number() 
  parseFloat()
  문자열 혹은 문자열을 값으로 하는 변수를 숫자로 변환
    
  반대로 숫자를 문자열로 변환할 때
  string()
  ////
  function getno() {
  //   let getnolist = [];
  const getnolist = document.getElementById("writeno").value;
  if (getnolist.length != 3) {
    alert("3자리 숫자를 입력해주세요!");
  } else {
    // for (i = 0; i < 3; i++) {
    let slicenolist = [1, 2, 3];
    let sliceno0 = getnolist.substr(0, 1);
    slicenolist.splice(0, 1, sliceno0);
    let sliceno1 = getnolist.substr(1, 1);
    slicenolist.splice(1, 1, sliceno1);
    let sliceno2 = getnolist.substr(2, 1);
    slicenolist.splice(2, 1, sliceno2);
    let tonum0 = slicenolist.splice(0, 1, parseFloat(slicenolist[0]));
    let tonum1 = slicenolist.splice(1, 1, parseFloat(slicenolist[1]));
    let tonum2 = slicenolist.splice(2, 1, parseFloat(slicenolist[2]));
    console.log(slicenolist);

}

  }
}
//이전결과: ["4", "6", "4"]
//결과 : [4, 6, 4]

- 문자열 자르는 방법(split, substr,substring)

https://sesok808.tistory.com/600

  
  split("구분자")
  substr(시작인덱스,길이)
  substring(시작인덱스,종료인덱스)
  
  
  예)*/
  var a = "1,2,3"
  var b = "1234567"
  
  var array = a.split(",") //array = [1,2,3]
  var array = b.substr(2,3) //array = [345]
  var array = b.substring(2,5) //array = [3456]

- 새로고침 방법

https://yyman.tistory.com/400

location.reload(true);
location.href = location.href;

history.go(0);

- 시간 지연함수(노마드 코더)

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, setTimeout() {}

setTimeout(function() { // Code here }, delay);
  //예시)
  setTimeout(function() {
  console.log('3초후 실행');
}, 3000);

// 3초 후 함수 실행- '3초후 실행' 출력

- 배열 추가 방법

https://gent.tistory.com/295

//push(), unshift()는 web project1에서 정리했었다.
//또다른 배열 추가 방법은 splice()이다.
  
arr.splice("위치",0,["요소1","요소2"....])
  
/*index "위치"에 "요소1","요소2"...를 추가
  원하는 위치에 하나 이상의 요소를 추가할 수 있는 것이 특징이다.*/

  //배열 삭제 방법
  array.pop : 마지막 요소 제거
  array.shift : 첫번째 요소 제거
  array.splice(index,갯수) :특정 index부터 특정 갯수의 요소를 제거
  arr.splice(1,2):index1 부터 2개의 요소를 제거/*
  배열 추가방법과도 동일한데, 추가시에는 제거할 요소의 갯수를 0으로 넣었다. 
  제거 시에는 대체할 요소를 지정하지 않았기 때문에 삭제된 상태로 결과가 출력되는 것이다.

- 클로저

자바스크립트 클로저(Javascript Closure) 사용법

[JavaScript (6)] Javascript 함수(함수 기본, 재귀함수, 호이스팅 등)

//### **▶ 9. 클로저**

//- 함수가 실행 후 종료 되어도, 종료된 함수 내의 변수가 소멸되지 않는 특성을 가진다. 
//- 이런 특성을 활용한 함수가 클로저 함수 이다. - 리턴문이 포함된 함수여야 한다.

(추가예정)

아직 고민 중인 포인트

게임 재시작:

  • 텍스트 입력창에 쓰인 숫자를 지우고,
  • 다시 랜덤 숫자를 생성하도록 만들어보자.
  • 동시에 게임 실행 기회도 10번으로 초기화해야한다.

Input 란의 텍스트 모두 없애기

//input창 텍스트 지우기
function clearno() {
  var inp = document.getElementsByClassName("write");

  for (var i = 0; i < inp.length; i++) {
    inp[i].value = "";
  }
}
function restart() {
  clearno();

게임재시작-새로고침

특정 영역만 새로고침

[javascript*jQuery] 페이지 자동 새로고침 & 특정 div 영역 새로고침

//특정 영역만 새로고침하는 건 어떨까?
  • 추가 : 스트라이크:3이면 더 이상 게임 기회를 카운트하지 않고 성공이라는 메시지를 띄우기

새로고침하는게 가장 간단한 방법인데, 이럴 경우 게임시작버튼을 누르지 않는한 곧바로 랜덤 숫자가 생성되며 게임이 시작되지는 않는다.'재시작'버튼을 눌렀으니 바로 실행이 되어야하는데...

새로고침 후 함수 실행 코드를 넣으면, 코드가 먼저 실행된 후 새로고침이 된다. 시간지연 함수(setTimeout)을 넣어도 되지 않는다.

reload - JavaScript 후 페이지 새로 고침 및 기능 실행

현재 첫 화면은 '10번남았습니다'가 뜨지만, 숫자를 입력하면 이전게임에 남아있던 횟수에서 -1되기 시작하는게 문제다.

function restart() {
  var a = 10;

  document.getElementById("r").innerHTML = a + "번 남았습니다";
  makeno();
  clearno();

새로고침 후 함수 실행하기

jquery location.reload(); 이후 remove(); 실행 질문드립니다. > SIR

여러 방법을 시도해보았는데 제대로 되지 않아서, 좀 더 고민이 필요하다.

profile
GY
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
이전 포스트

[js] 버튼 클릭시 배경색 바꾸기 (Background Changer)

다음 포스트

[js] 버튼 클릭시 여러 이미지 넘기기 (Carousel)

0개의 댓글