我的重置功能(在TIC TAC TOE游戏中)上的JavaScript异常功能

我在JavaScript中创建了一个TIC TAC TOE游戏。代码中有一个奇怪的问题。除非您按重置按钮，否则工作正常。如果按下重置按钮，计算机将在板上放置多个O。例如：如果您将第一个" X"按下6次重置按钮，则板上将有6'o。

请帮助我这是我的代码蛋白：https://codepen.io/raj1998211/pen/rjwjwy?editors=1011

(如果您有任何疑问，请询问(

<html>
<head>
    <title>Game</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div style="text-align: center;">
<!-- <button onclick="reset();">Reset</button> -->
</div>
<table>
    <tr>
        <td class="box" id="1" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="2" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="3" style="display: table-cell; text-align: center;"></td>
    </tr>
    <tr>
        <td class="box" id="4" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="5" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="6" style="display: table-cell; text-align: center;"></td>
    </tr>
    <tr>
        <td class="box" id="7" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="8" style="display: table-cell; text-align: center;"></td>
        <td class="box" id="9" style="display: table-cell; text-align: center;"></td>
    </tr>
</table>
<div id="winner">
  <p id="winnerText">Winner will be here!!</p>
  <button onclick="reset();">Reset</button>
  <button onclick="reset();">Reset all</button>
</div>
<div id="start">
    <p>Select</p>
    <button id="cross" onclick="selector(this);">X</button>
    <button id="circle" onclick="selector(this);">O</button>
</div>
<script type="text/javascript" src="app.js"></script>

  </body>
</html>

var player;
function selector(elem){
    console.log(elem.id);
    $("#start").css("display", "none");
    player = elem.id;
    if(player === "cross"){
    }
    else if(player === "circle"){
    }
}
var px = [];
var po = [];
var winArr = [];
$(".box").on("click", newClick);
// function clkfun(){
//  if (turn === 2)
//  {
//      $(this).addClass("fa fa-times fa-3x");
//      $(this).unbind( "click" );
//      turn--;
//      px.push(Number(this.id));
//      if(res() === "x"){
//          alert("X won.");
//          reset();
//          $("#winner").text("X won");
//      }
//      return;
//  }
//  if (turn === 1)
//  {
//      $(this).addClass("fa fa-circle-o fa-3x");
//      $(this).unbind( "click" );
//      turn++;
//      po.push(Number(this.id));
//      if(res() === "o"){
//          alert("O won.");
//          reset();
//          $("#winner").text("O won");
//      }
//  }
// }
function newClick() {
    $(this).addClass("fa fa-times fa-3x");
    $(this).unbind("click");
    px.push(Number(this.id));
    gameover = false;
    if (res() === "x") {
        // alert("X won.");
        $("#winner").css("display", "block");
        $("#winnerText").text("X won");
        $(".box").unbind("click", newClick);
        gameover = true;
        //reset();
    }
    var test;
    if (px.length === 1) {
        test = generateRandom(1, 9);
    }
    else {
        test = position(px);
        if (test == 99) {
            // alert("Draw");
            $("#winner").css("display", "block");
            $("#winnerText").text("Draw !!");
            $(".box").unbind("click", newClick);
            // reset();
        }
    }
    if (gameover === false) {
        var stest = test.toString();
        $("#" + stest).addClass("fa fa-circle-o fa-3x");
        $("#" + stest).unbind("click");
        po.push(test);
        if (res() === "o") {
            // alert("O won.");
            // reset();
            // $("#winner").text("O won");
            $("#winnerText").text("O won");
            $("#winner").css("display", "block");
            $(".box").unbind("click", newClick);
        }
    }
}

function position(px) {
    if ((px.includes(1) && px.includes(2)) && !po.includes(3))
        return 3;
    if ((px.includes(1) && px.includes(3)) && !po.includes(2))
        return 2;
    if ((px.includes(1) && px.includes(4)) && !po.includes(7))
        return 7;
    if ((px.includes(1) && px.includes(7)) && !po.includes(4))
        return 4;
    if ((px.includes(1) && px.includes(5)) && !po.includes(9))
        return 9;
    if ((px.includes(1) && px.includes(9)) && !po.includes(5))
        return 5;
    if ((px.includes(2) && px.includes(3)) && !po.includes(1))
        return 1;
    if ((px.includes(2) && px.includes(5)) && !po.includes(8))
        return 8;
    if ((px.includes(2) && px.includes(8)) && !po.includes(5))
        return 5;
    if ((px.includes(3) && px.includes(2)) && !po.includes(1))
        return 1;
    if ((px.includes(3) && px.includes(6)) && !po.includes(9))
        return 9;
    if ((px.includes(3) && px.includes(9)) && !po.includes(6))
        return 6;
    if ((px.includes(3) && px.includes(5)) && !po.includes(7))
        return 7;
    if ((px.includes(3) && px.includes(7)) && !po.includes(5))
        return 5;
    if ((px.includes(4) && px.includes(7)) && !po.includes(1))
        return 1;
    if ((px.includes(4) && px.includes(5)) && !po.includes(6))
        return 6;
    if ((px.includes(4) && px.includes(6)) && !po.includes(5))
        return 5;
    if ((px.includes(6) && px.includes(5)) && !po.includes(4))
        return 4;
    if ((px.includes(6) && px.includes(9)) && !po.includes(3))
        return 3;
    if ((px.includes(7) && px.includes(8)) && !po.includes(9))
        return 9;
    if ((px.includes(7) && px.includes(9)) && !po.includes(8))
        return 8;
    if ((px.includes(7) && px.includes(5)) && !po.includes(3))
        return 3;
    if ((px.includes(8) && px.includes(9)) && !po.includes(7))
        return 7;
    if ((px.includes(8) && px.includes(5)) && !po.includes(2))
        return 2;
    if ((px.includes(9) && px.includes(5)) && !po.includes(1))
        return 1;

    else if (px.length + po.length != 9)
        return generateRandom(1, 9);
    else
        return 99;
}
function generateRandom(min, max) {
    var num = Math.floor(Math.random() * (max - min + 1)) + min;
    return (px.includes(num) || po.includes(num)) ? generateRandom(min, max) : num;
}
function reset() {
    $(".box").removeClass("fa fa-times");
    $(".box").removeClass("fa fa-circle-o");
    px = [];
    po = [];
    for (i = 0; i < winArr.length; i++) {
        var newId = winArr[i].toString();
        $("#" + newId).css("color", "black");
    }
    winArr = [];
    //$("#winnerText").text("Winner will be here!!");
    $("#winner").css("display", "none");
    $(".box").bind("click", newClick);
}
function line(arr, i, j, k) {
    if (arr.includes(i) && arr.includes(j) && arr.includes(k))
    {
        winArr.push(i,j,k);
        for(i = 0; i < winArr.length; i++){
            var newId = winArr[i].toString();
            $("#" + newId).css("color", "green");
        }
        // console.log(winArr);
        return true;
    }
    else
        return false;
}
function res() {
    if (line(px, 1, 2, 3) || line(px, 4, 5, 6) || line(px, 7, 8, 9) || line(px, 1, 5, 9) || line(px, 3, 5, 7) || line(px, 1, 4, 7) || line(px, 2, 5, 8) || line(px, 3, 6, 9)) {
        return "x";
    }
    else if (line(po, 1, 2, 3) || line(po, 4, 5, 6) || line(po, 7, 8, 9) || line(po, 1, 5, 9) || line(po, 3, 5, 7) || line(po, 1, 4, 7) || line(po, 2, 5, 8) || line(po, 3, 6, 9)) {
        return "o";
    }
    else
        return "raj";
}

CSS

.box {
    background-color: #ffffff;
    height: 100px;
    width: 100px;
    border: 3px solid black ;
}
table {
    margin: 50px auto;
}
#winner {
    text-align: center;
    margin-bottom: 20px;
}
h1 {
    text-align: center;
}
.fa-times {
    color: black;
}
.fa-circle-o {
    color: black;
}
#winner{
  background-color:grey;
  height: 200px;
  width: 200px;
  margin: auto;
  margin-top: -300px;
  display:none;
}
#winnerText{
  font-size:40px;
  margin:auto;
  font-weight:bold;
}
#start{
  background-color:grey;
  /* position: fixed; */
  height: 200px;
  width: 200px;
  margin: auto;
  margin-top: -300px;
  display:block;
}


/* for table */
table tr:first-child td{
  border-top:0;
}
table tr:last-child td{
  border-bottom:0;
}
table tr td:first-child{
  border-left:0;
}
table tr td:last-child{
  border-right:0;
}

问题出现的原因是在功能调用上多次点击事件绑定。因此，我在重置函数中添加了一条线，该行首先会删除点击事件侦听器，然后在以下行上绑定

    function reset() {
       $(".box").off("click", newClick);
    .....
    .....
       $(".box").on("click", newClick);
    }

相关内容

最新更新

热门标签：