[javaScript] 승부차기 게임 만들기 - 3

전에 스크립트 에서 jQuery 이용해서 코드를 조금 더 간결하게 만들수 있을 것 같아 jQuery 이용하고 새로운 기능을 추가했다.

아무래도 기본 자바스크립트에서 문법인 documet.getElementById() , innerHtml 같이 길어질수 밖에 없다.

jQuery의  '$' 의 핵심 기능은  원하는 DOM 엘리먼트를 셀렉트 하는 기능 이다. 아이디 같은 경우에도

$('#kkr') 이렇게  짧게 표현 할 수 있는데 사용하지 않을 이유가 없다.

var korea = {
  score : 0,
  percent : 0.75
};
var japen = {
  score : 0,
  percent : 0.7
};
var soccerGame = {
  jpScoreNumber: 5,
   krScoreNumber: 5
}
 
var krTeam = ["손흥민","조현우","황희찬","이승우","박지성"];
 
function onKoreaShoot(){
  if (Math.random() < korea.percent) {
      screen("한국팀 : " + krTeam[0]  + "선수가 슛에 성공했습니다."); // 스크린 인자값에 들어갈 상황 텍스트
      updateKorScore();
  }else{
      screen("한국팀 : " +  krTeam[0]  + " 선수가 슛에 실패했습니다."); // 스크린 인자값에 들어갈 상황 텍스트
  }
 
var $krScoreNumberElem = $('#kr-number')
 
  soccerGame.krScoreNumber --;
  $krScoreNumberElem.html(soccerGame.krScoreNumber);
 
  disabledKrButton(true);
  disabledJpButton(false);
}
function onJapenShoot(){
  krTeam.shift();
 
  if (Math.random() < japen.percent ) {
      screen("일본팀이 슛에 성공했습니다.");// 스크린 인자값에 들어갈 상황 텍스트
      updateJpScore();
  } else {
      screen("일본팀이 슛에 실패했습니다.");// 스크린 인자값에 들어갈 상황 텍스트
  }
  var $jpScoreNumberElem = $('#jp-number');
    soccerGame.jpScoreNumber --;
    $jpScoreNumberElem.html(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);
    }
}
 
 
function screen(s){
   var $textElem = $('#score-text');
   $textElem.html(s);
}
function updateKorScore(){
  var $korElem = $('#kr-score');
 
  korea.score += 1;  // 슛이 성공하면 한국 스코어 1 증가 .
  $korElem.html(korea.score);
 
}
function updateJpScore(){
  var $jpElem = $('#jp-score');
 
  japen.score += 1;  // 슛이 성공하면 한국 스코어 1 증가 .
  $jpElem.html(japen.score);
}
function disabledKrButton(flag){
   $('.btn-korea').prop('disabled', flag);
}
function disabledJpButton(flag){
   $('.btn-japen').prop('disabled', flag);
}
 
$(function(){
  disabledJpButton(true)
  disabledKrButton(true)
        screen(3);
        window.setTimeout(function(){
            screen(2);
          window.setTimeout(function(){
                  screen(1);
                  window.setTimeout(function(){
                     screen('한국팀 부터 시작합니다. !');
                     disabledKrButton(false)
            }, 1000);
          }, 1000);
        }, 1000);
    });
 

전과 비교하면 DOM을 셀렉트하는 부분에서 만 바뀌고 나머지는 거의 바뀌지 않았다. innerHtml 같은경우도 jQuery의 html 함수를

이용했다. 그리고 새로운 기능을 추가했는데. 하단에 DOMContentLoaded 이벤트를 보면 처음에 버튼을 비활성화 해놓고

상황판에 3 2 1 출력하고 한국팀 부터 시작하는걸 알려주고 있다. 그리고 한국팀 버튼은 활성화되고 게임을 시작할 수 있다.