Solo-Project ( 야구게임 ) 회고록

2021-11-22 노션페이지

앱 요구 사항

1. 웹 브라우저에서 열었을 때, "야구 게임 시작" 이라는 버튼이 존재하고, 해당 버튼을 누르면 야구 게임이 시작된다.
2. 기본적으로 야구게임이 시작되면 컴퓨터는 랜덤의 숫자 3자리수를 정합니다.
   • 해당 숫자는 서로가 겹칠 수가 없습니다.
     ex) 521
3. 컴퓨터의 숫자가 정해지면 가위바위보 와 같이 prompt 로 사용자의 답을 받습니다.
4. 기본적으로 사용자는 3자리를 입력해야 되며 제대로 입력하지 않았을 때에는 "다시 입력해주세요." 라고 alert 가 나와야 하며 다시 prompt 로 사용자의 답을 받아야 합니다.
5. 정상적인 세자리수의 숫자를 입력했다면 입력한 숫자가 자리도 같고 숫자도 동일하다면 1 Strike, 자리수는 다르지만 값이 어느자리든 포함되어 있다면 Ball 로 친다. 이런 경우의 수를 모두 합쳐서 한꺼번에 alert 해야한다.
   • ex) 1 Strike, 2 ball
6. 정답을 맞췄다면 게임은 그 상태에서 종료되어야 하며, 정답을 맞추지 못했다면 html 에 어떤 숫자를 입력했을때 결과값이 어떤지 기록되어야 한다.

var computerAnswer;
function setComputerAnswer(){
  var computerAnswerArray = [];
  for (i=0; i<3; i++) {
    randomNum = Math.floor(Math.random() * 10)
    if (computerAnswerArray.indexOf(randomNum) === -1) {
      computerAnswerArray.push(randomNum);
    } else {
      i--;
    }
  }
  return computerAnswerArray;
}


function battle(meAnswer,computerAnswer) {
  var strike = 0;
  var ball = 0;
  var meAnswerArray = meAnswer.split('').map(Number);
  for (var i = 0; i < meAnswerArray.length; i++){
    if(computerAnswer.includes(meAnswerArray[i])){
      if(computerAnswer[i]===meAnswerArray[i]){ 
        strike++;
      }else{
        ball++;
      }
    }
  }
  console.log('meAnswer: '+meAnswer+' strike: '+strike+' ball: '+ball);
  return strike;
}


function baseBallStart(){
  while(true){
    var meAnswer = prompt('야구 게임 시작!');
    if(isNaN(meAnswer*1)||Array.from(new Set(meAnswer)).length!==3){
      alert('다시입력해주세요');
      continue;
    }
    if(battle(meAnswer,computerAnswer)===3){
      console.log('end')
      break;
    }
  }
}

소감

가위바위보 다음으로 JS와 친해지기 위해 비슷하게 만든 야구게임
배운점
배열 두개를 비교할 때 스트라이크라면 이 숫자 뒤에 굳이 검사할 필요가 없음 => break 문 사용
퍼포먼스 최적화