Question

我正在制作一个tic tac toe游戏，我正处于游戏决定谁赢得比赛的地步。我写了逻辑和所有可能的赢家解决方案，但是当我玩游戏时，即使没有获胜组合，游戏也会宣布获胜者。我做错了什么？这是代码笔： https://codepen.io/xshirl/pen/dmzeMd

这是我的代码：

let player = true;

$(document).ready(function () {
  const square = $('.square');

  function display() {
    if (player === true) {
      square.on('click', first);
    } else if (player === false) {
      square.on('click', function () {
        $(this).addClass('second');
      });
    }
  }

  display();

  function first() {
    $(this).addClass('first');
    player = !player;
    if (player === true) {
      $(this).addClass('second');
      alert("Player 2 has made a move.")
    } else {
      alert("Player 1 has made a move.")
    }
    if (($(".one").hasClass('first') && $(".two").hasClass('first') && $(".three").hasClass('first')) || ($(".four").hasClass('first') && $(".five").hasClass('first') && $(".six").hasClass('first')) || ($(".seven").hasClass('first') && $(".eight").hasClass('first') && $(".nine").hasClass('first')) ||
      ($(".one").hasClass('first') && $(".four").hasClass('first') && $(".seven").hasClass('first')) || ($(".two").hasClass('first') && $(".five").hasClass('first') && $(".eight").hasClass('first')) || ($(".three").hasClass('first') && $(".six").hasClass('first') && $(".nine").hasClass('first')) ||
      ($(".one").hasClass('first') && $(".five").hasClass('first') && $(".nine").hasClass('first')) || ($(".three").hasClass('first') && $(".five").hasClass('first') && $(".seven").hasClass('first'))) {
      alert("Player 1 has won the game!");
    }
    if ($(".one").hasClass('second') && $(".two").hasClass('second') && $(".three").hasClass('second') || $(".four").hasClass('second') && $(".five").hasClass('second') && $(".six").hasClass('second') || $(".seven").hasClass('second') && $(".eight").hasClass('second') && $(".nine").hasClass('second') ||
      $(".one").hasClass('second') && $(".four").hasClass('second') && $(".seven").hasClass('second') || $(".two").hasClass('second') && $(".five").hasClass('second') && $(".eight").hasClass('second') || $(".three").hasClass('second') && $(".six").hasClass('second') && $(".nine").hasClass('second') ||
      $(".one").hasClass('second') && $(".five").hasClass('second') && $(".nine").hasClass('second') || $(".three").hasClass('second') && $(".five").hasClass('second') && $(".seven").hasClass('second')) {
      alert("Player 2 has won the game!");
    }
  }
});

Answer 1

首先在函数中，将行$(this).addClass('first');移到else块。所以代码将是：

function first() {

    player = !player;
    if (player === true) {
      $(this).addClass('second');
      alert("Player 2 has made a move.")
    } else {
        $(this).addClass('first');
      alert("Player 1 has made a move.")
    }
    if (($(".one").hasClass('first') && $(".two").hasClass('first') && $(".three").hasClass('first')) || ($(".four").hasClass('first') && $(".five").hasClass('first') && $(".six").hasClass('first')) || ($(".seven").hasClass('first') && $(".eight").hasClass('first') && $(".nine").hasClass('first')) ||
      ($(".one").hasClass('first') && $(".four").hasClass('first') && $(".seven").hasClass('first')) || ($(".two").hasClass('first') && $(".five").hasClass('first') && $(".eight").hasClass('first')) || ($(".three").hasClass('first') && $(".six").hasClass('first') && $(".nine").hasClass('first')) ||
      ($(".one").hasClass('first') && $(".five").hasClass('first') && $(".nine").hasClass('first')) || ($(".three").hasClass('first') && $(".five").hasClass('first') && $(".seven").hasClass('first'))) {
      alert("Player 1 has won the game!");
    }
    if ($(".one").hasClass('second') && $(".two").hasClass('second') && $(".three").hasClass('second') || $(".four").hasClass('second') && $(".five").hasClass('second') && $(".six").hasClass('second') || $(".seven").hasClass('second') && $(".eight").hasClass('second') && $(".nine").hasClass('second') ||
      $(".one").hasClass('second') && $(".four").hasClass('second') && $(".seven").hasClass('second') || $(".two").hasClass('second') && $(".five").hasClass('second') && $(".eight").hasClass('second') || $(".three").hasClass('second') && $(".six").hasClass('second') && $(".nine").hasClass('second') ||
      $(".one").hasClass('second') && $(".five").hasClass('second') && $(".nine").hasClass('second') || $(".three").hasClass('second') && $(".five").hasClass('second') && $(".seven").hasClass('second')) {
      alert("Player 2 has won the game!");
    }
  }
});

tic tac toe游戏无法正常工作（javascript）

1 个答案: