[JavaScript] 승부차기 게임 만들기 - 2

저번에 레이아웃 구성에 이어서 스크립트를 보자. 구현은 JavaScript 기본적인 문법을 익히기 위해서 사용했다.. 중간중간 코드가

너무길어지는 경우에는 jQuery를 이용하기도 했다. 우선 사용된 오브젝트와 배열을 보자.

JavaScript

var korea = {
  score : 0,
  percent : 0.75
};
var japen = {
  score : 0,
  percent : 0.7
};
var soccerGame = {
  jpScoreNumber: 5,
   krScoreNumber: 5
}
 
var krTeam = ["손흥민","조현우","황희찬","이승우","박지성"];

korea 오브젝트에 스코어에 초기 값인 0 을 줬다. 슛을 눌렀을 때 한국의 슛 성공 확률은 0.75% 이다. (75%)

일본도 똑같이 스코어 값을 저장할 오브젝트 , 퍼센트는 0.7%이다.. 

아래 soccerGame에서는 이제 양 팀의 남은 슛 횟수를 5번으로 만들어주고 남은 슛 횟수가 0이 되면 양 팀의 스코어를 비교해 

결과를 도출한다.

function screen(s){
   var textElem = document.getElementById('score-text');
   textElem.innerHTML = s ;
}
function updateKorScore(){
  var korElem = document.getElementById('kr-score');
 
  korea.score += 1;  // 슛이 성공하면 한국 스코어 1 증가 .
  korElem.innerHTML = korea.score;
}
function updateJpScore(){
  var jpElem = document.getElementById('jp-score');
 
  japen.score += 1;  // 슛이 성공하면 한국 스코어 1 증가 .
  jpElem.innerHTML = japen.score;
}
function disabledKrButton(flag){
   $('.btn-korea').prop('disabled', flag);
}
function disabledJpButton(flag){
   $('.btn-japen').prop('disabled', flag);
}

원래는 함수를 슛 함수에 함께 넣어서 쓰다가 빼주는게 조금 더 가독성에 좋을 것 같고 수정할때 일일이 다 수정해야하니 

하단에 빼주는게 맞다고 생각했따. 

screen에서는 상황 판에 안내 문구를 출력.. 아래 updateScore 에서는 각팀의 스코어를 가져와서 슛 버튼을 눌러서 성공하면 

스코어가 1씩 증가하고 그 값이 반영이 된다. 아래버튼 함수는 순서를 부여하기 위해 만들었다.

function onKoreaShoot(){
  if (Math.random() < korea.percent) {
      screen("한국팀 : " + krTeam[0]  + "선수가 슛에 성공했습니다."); // 상황판에 나올 텍스트
      updateKorScore();
  }else{
      screen("한국팀 : " +  krTeam[0]  + " 선수가 슛에 실패했습니다."); // 상황판에 나올 텍스트
  }
 
var krScoreNumberElem = document.getElementById('kr-number');
  soccerGame.krScoreNumber -= 1;
  krScoreNumberElem.innerHTML = soccerGame.krScoreNumber;
 
  disabledKrButton(true);
  disabledJpButton(false);
}
 
function onJapenShoot(){
  krTeam.shift()
 
  if (Math.random() < japen.percent ) {
      screen("일본팀이 슛에 성공했습니다.");// 상황판에 나올 텍스트
      updateJpScore();
  } else {
      screen("일본팀이 슛에 실패했습니다.");// 상황판에 나올 텍스트
  }
  var jpScoreNumberElem = document.getElementById('jp-number');
    soccerGame.jpScoreNumber -= 1;
    jpScoreNumberElem.innerHTML = soccerGame.jpScoreNumber;
    disabledKrButton(false);
    disabledJpButton(true);
    if(soccerGame.jpScoreNumber === 0){
        if(korea.score > japen.score){
          screen("한국팀이 승리했습니다."); // 상황판에 나올 텍스트
        }else if(korea.score < japen.score){
            screen("일본팀이 승리했습니다.")// 상황판에 나올 텍스트
        }else{
          screen("비겼습니다.");// 상황판에 나올 텍스트
        }
        disabledKrButton(true);
        disabledJpButton(true);
    }
}

각 팀은 슛 이벤트가 들어오면 Math.random 와 퍼센트가 비교하여 슛에 성공 실패가 나뉜다.

그리고 보면 onKoreaShoot 함수에만 krTeam이 있는걸 볼수가 있다. 이 것은 위에 krTeam 배열에 우리 

한국선수들이 들어가 있따. 그리고 순서대로 키커가 빠진다. 아래 onJapenShoot 함수를 보면 shift()를 보면 알수 있다.

요런식으로 한국선수 이름이 함께 들어온다. 손흥민이 1번이면 다음 shift()에 의해 손흥민이 빠지고 조현우가

krTeam[0]으로 들어오게 된다. 그리고 매 슛 이벤트 마다 남은 슛 횟수가 줄어드는걸 볼 수 가있다.

처음 시작은 한국이 먼저 시작하며 슛 버튼이 턴에 맞춰 비활성화 된다.

아래 처럼 각팀의 남은 슛이 0번이 되면 각 팀의 스코어를 비교해서 결과를 도출한다. 

그리고 슛 버튼은 비활성화 된다.. 참 별거 없는데 어려웠다.. 일본 선수들은 이름을 몰라서 

jpTeam[]을 만들지 않았다. 다음에는 jQuery로 할수 있는데 까지 리팩토링을 한번 해봐야 되겠다.