틱택토 게임 강의 중 질문

20.02.08 13:47 작성 조회수 96

0

function 비동기콜백(event) {
  event.preventDefault();
  // 칸을 클릭했을 때 몇 줄 몇 칸인지 알기 위해서
  var 몇줄 = 줄들.indexOf(event.target.parentNode);
  var 몇칸 = 칸들[몇줄].indexOf(event.target);
  console.log("몇줄 ? " + 몇줄 + " 몇칸 ? " + 몇칸);
  var 다참 = false;

  if (칸들[몇줄][몇칸].textContent === "") {
    칸들[몇줄][몇칸].textContent = ;

    // 가로줄 검사
    if (
      칸들[몇줄][0].textContent ===  &&
      칸들[몇줄][1].textContent ===  &&
      칸들[몇줄][2].textContent === 
    ) {
      다참 = true;
    }
    // 세로줄 검사
    if (
      칸들[0][몇칸].textContent ===  &&
      칸들[1][몇칸].textContent ===  &&
      칸들[2][몇칸].textContent === 
    ) {
      다참 = true;
    }
    // 대각선 검사
    if (몇줄 - 몇칸 === 0) {
      if (
        칸들[0][0].textContent ===  &&
        칸들[1][1].textContent ===  &&
        칸들[2][2].textContent === 
      ) {
        다참 = true;
      }
    }
    if (Math.abs(몇줄 - 몇칸 === 2)) {
      if (칸들[0][2] ===  && 칸들[1][1] ===  && 칸들[2][0] === ) {
        다참 = true;
      }
    }

제가 이 부분에서 질문드리고 싶은 것은 앞에서 몇줄, 몇칸인지 검사하는 것을 따로 함수로 정의하여 그 함수를 호출하여 사용하고,

가로줄, 세로줄 , 대각선 검사하여 승리자를 판별하는 것을 따로 함수로 정의하여 그 함수를 호출하여 사용하고 싶었는데 함수로 정의하여 사용하다 보니까 

몇줄, 몇칸이라는 변수가 비동기콜백함수 안에 지역변수로 정의되어 있다 보니까 함수를 호출하여 사용하면 그 함수 안에서는 정의되지 않은 변수라서 계속해서 error가 발생했습니다. 

위와 같은 것들을 함수로 따로 정의해서 사용하는 것은 불가능한가요???

여러가지 해결책에 대해 생각해봤는데 아직 제 수준에서는 해결이 안되서 이렇게 질문을 올리게 되었습니다.

답변 2

·

답변을 작성해보세요.

0

박병찬님의 프로필

박병찬

질문자

2020.02.09

function 승리자체크(칸들다참몇줄몇칸) {
  // 가로줄 검사
  if (
    칸들[몇줄][0].textContent ===  &&
    칸들[몇줄][1].textContent ===  &&
    칸들[몇줄][2].textContent === 
  ) {
    다참 = true;
  }
  // 세로줄 검사
  if (
    칸들[0][몇칸].textContent ===  &&
    칸들[1][몇칸].textContent ===  &&
    칸들[2][몇칸].textContent === 
  ) {
    다참 = true;
  }
  // 대각선 검사
  if (몇줄 - 몇칸 === 0) {
    if (
      칸들[0][0].textContent ===  &&
      칸들[1][1].textContent ===  &&
      칸들[2][2].textContent === 
    ) {
      다참 = true;
    }
  }
  if (Math.abs(몇줄 - 몇칸 === 2)) {
    if (칸들[0][2] ===  && 칸들[1][1] ===  && 칸들[2][0] === ) {
      다참 = true;
    }
  }
}

function 비동기콜백(event) {
  event.preventDefault();
  // 칸을 클릭했을 때 몇 줄 몇 칸인지 알기 위해서
  var 몇줄 = 줄들.indexOf(event.target.parentNode);
  var 몇칸 = 칸들[몇줄].indexOf(event.target);
  줄칸체크(몇줄몇칸);
  var 다참 = false;
  if (칸들[몇줄][몇칸].textContent === "") {
    칸들[몇줄][몇칸].textContent = ;
    승리자체크(칸들다참몇줄몇칸);

제 생각대로라면, 칸을 클릭하고 나서 그에 따라 비동기콜백 함수가 동작하는데 이 함수 안에서 이미 칸들, 다참, 몇줄, 몇칸, 턴이라는 변수들에 각각 값들이 담겨 있고 

승리자체크라는 함수 안에는 이 변수들이 들어 있어서 매개변수로 칸들,다참,몇줄,몇칸,턴을 포함시켰습니다. 그리고 비동기콜백 함수 안에서 이 함수를 호출 시 그 값들을 담고 있는 변수들을 인자로 포함시켰는데 동작하지가 않습니다. 동작하지가 않는다는 것은 제가 argument로 포함시켜준 변수들의 값이 함수에 전달이 안되었다는 것인데 분명히 저 함수 안에서 각각 변수들에 값이 저장되어 있다는 것을 확인하였습니다. 왜 값들을 가진 변수를 인자로 삼았는데 그 값이 함수 호출 시 전달되지 않는 걸까요? 

0

함수로 만들 때 매개변수로 몇줄 몇칸을 만들어 호출 시 인자로 넘겨주시면 됩니다.