HTML Javascript 거꾸로 숫자야구 게임

컴퓨터가 숫자를 맞추는 거꾸로(?) 숫자야구 게임입니다. 사람이 3 ~ 5 자리 숫자를 하나 정하면, 컴퓨터가 숫자를 추측해서 부릅니다. 컴퓨터 숫자에 맞는 Ball과 Strike를 입력해줘야 합니다. 예를 들어 1 Ball 0 Strike일 경우에는 1 0 이렇게 입력해주면 됩니다. 보통 7번 내로 컴퓨터가 정답을 맞춥니다.

며칠 전에 만들었던 숫자야구 게임과 모양새는 거의 비슷합니다. 컴퓨터가 정답을 찾아내는 로직은 단순한데, 전체 수의 목록에서 정답이 될 수 없는 수들을 제거해 나가면 됩니다. (물론 최선의 방법은 아닙니다.) 프로그램 전체 구조를 만드는게 생각보다 힘들었습니다. 많이 연습하다보면 그래도 실력이 늘겠죠...😅

Hello 😄

순서	숫자	결과

<!DOCTYPE html>

<style>
.startBtn { padding: 4px; font-size: 14px; }
#myInput { font-size: 16px; padding: 4px; width: 100px; }
#myInput::placeholder { color: #ccc; }
#myAnswer {
  display: inline-block;
  box-sizing: border-box; min-width: 220px;
  background: pink; color: gray;
  border: 2px solid #aaa; padding: 10px;
  font-size: 24px; font-weight: bold; text-align: center;
}
#myTable { width: 100%; max-width: 400px; text-align: center; 
  border-collapse: collapse; }
#myTable, #myTable th, #myTable td { border: 1px solid lightgray; }
#myTable th, #myTable td { padding: 4px; }
#myTable th { color: white; background: #aaa; }
#myTable tr:nth-child(odd) { background: #eee; }
#myTable .ok { color: dodgerblue; background: #def !important; }
#myTable .error { color: tomato; }
</style>

<div style="margin: 30px 0;">
  <button class="startBtn" onclick="startGame(3)">3자리</button>
  <button class="startBtn" onclick="startGame(4)">4자리</button>
  <button class="startBtn" onclick="startGame(5)">5자리</button>
</div>

<div style="margin: 30px 0;">
  <input id="myInput" type="text" onkeydown="input(event.keyCode)"
    maxlength="5" placeholder="B S">
  <button onclick="input(ENTER)" style="padding:4px">입력</button>
</div>

<div style="margin: 30px 0;">
  <span id="myAnswer">Hello 😄</span>
</div>

<table id="myTable">
  <tr>
    <th style="width: 15%;">순서</th>
    <th>숫자</th>
    <th>결과</th>    
  </tr>  
</table>

<script>

var gameObj = {
  nbb2: null,
  len: 0,
  count: 0,
  answer: 0,
  state: "none"
};
var inputElem = document.getElementById("myInput");
var answerElem = document.getElementById("myAnswer");
var tableElem = document.getElementById("myTable");
initTable();

function startGame(len) { 
  gameObj.nbb2 = new Nbb2(len);
  gameObj.len = len;
  gameObj.count = 0;  
  gameObj.answer = gameObj.nbb2.getOne();
  gameObj.state = "playing";  

  initTable();  
  dispAnswer();
  inputElem.value = "";
  inputElem.focus();
}

function initTable() {
  var firstTr = tableElem.querySelector("tr");
  tableElem.innerHTML = "";
  tableElem.appendChild(firstTr);
  for (var i = 1; i <= 7; i++) {
    var tr = document.createElement("tr");
    tr.innerHTML = `<tr><td>${i}</td><td></td><td></td></tr>`;
    tableElem.appendChild(tr);      
  }
}

var smiles = ["😅", "🙄", "😗", "😖", "😥", "😏", "😐"];

function dispAnswer() {    
  switch (gameObj.state) {
    case "playing": 
      answerElem.innerHTML = "Com : " + gameObj.answer + " " +
        smiles[Math.floor(Math.random() * smiles.length)];
      break;
    case "ok": 
      answerElem.innerHTML = "Thank You 😎";
      break;
    case "sorry": 
      answerElem.innerHTML = "Sorry, I don't know... 😭";
      break;
  }
}

const ENTER = 13;

function input(keyCode) {
  if (keyCode != ENTER) return;   
  if (gameObj.state == "playing" && inputElem.value.trim()) 
    applyInput();
  inputElem.value = "";
  inputElem.focus();
}

function applyInput() {
  gameObj.count++;
  var [b, s] = inputElem.value.trim().split(/[\s,]+/).map(Number);  

  var cond1 = () => Number.isInteger(b) && Number.isInteger(s);
  var cond2 = () => 0 <= b && b <= gameObj.len;
  var cond3 = () => 0 <= s && s <= gameObj.len;
  var cond4 = () => b + s <= gameObj.len;  
  if (cond1() && cond2() && cond3() && cond4()) {    
    if (s == gameObj.len) {
      gameObj.state = "ok";
      addTableRow([gameObj.count, gameObj.answer, "O.K."], "ok");
    } 
    else {
      gameObj.nbb2.calc(gameObj.answer, b, s);
      addTableRow([gameObj.count, gameObj.answer, `B:${b}, S:${s}`]);
      gameObj.answer = gameObj.nbb2.getOne();
      if (gameObj.answer == 0) gameObj.state = "sorry";         
    }
    dispAnswer();
  }
  else 
    addTableRow([gameObj.count, "Error", `(${inputElem.value})`],
      "error");
}

function addTableRow(textList, className) {
  var tr = document.createElement("tr");
  if (className) tr.className = className;
  for (var text of textList) {
    tr.innerHTML += "<td>" + text + "</td>";
  }  
  if(gameObj.count < tableElem.childElementCount) {
    tableElem.children[gameObj.count].replaceWith(tr);
  }
  else tableElem.appendChild(tr);
}

function Nbb2(len) {
  this.ar = [];  
  var min = 10 ** (len - 1);
  var max = 10 ** len;
  for (var i = min; i < max; i++) {
    if (nbbCheckNumber(i, len)) {
      this.ar.push(i);
    }
  }

  this.getOne = function() {
    if (this.ar.length == 0) return 0;
    return this.ar[Math.floor(Math.random() *
      this.ar.length)];
  }

  this.calc = function(n, b, s) {
    this.ar = this.ar.filter(num => {
      var bs = nbbCheckBs(num, n);
      return bs.b == b && bs.s == s;
    });
  }
}

function nbbCheckNumber(n, len) {
  var s = n.toString();
  if (s.length != len) return false;
  if (new Set(s).size != len) return false;
  return true;
}

function nbbCheckBs(n1, n2) {
  var s1 = n1.toString();
  var s2 = n2.toString();
  var bs = { b:0, s:0 };
  
  for (var i = 0; i < s1.length; i++) {
    for (var j = 0; j < s2.length; j++) {
      if (s1[i] == s2[j]) {
        if (i == j) bs.s++;
        else bs.b++;
      }
    }
  }

  return bs;
}

</script>