井字游戏-检查获胜（Vanilla JS）

问题描述 投票：1回答：1

我做了一个嵌套的数组，用于模拟表中的情况，并且看起来工作正常。我的目标是在每一个动作上都在这个数组上运行，以检查是否有胜利。它分为3部分：列检查器，行检查器和倾斜检查器，但是由于某种原因，我看不到警报“胜利”。

非常感谢！

相关代码：Html

 <main>
        <table class="delete">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </main>

CSS

.cross {
    background-image: url(x.png);
    background-size: cover;
}

.circle {
    background-image: url(circle.png);
    background-size: cover;
}

table {
    border-collapse: collapse;
    width: 50vw;
    height: 70vh;
    border: 5px solid black;
    margin: auto;
}

td {
    border: 5px solid black;
}

香草JS

let table = document.getElementsByTagName("table")[0];
let saveTypeGame;
let friendTurn = 0;
let arr = [[],[],[]];
let colWin = 0;

 if(saveTypeGame=="friend")
        {
            table.addEventListener("click", function (e1) {
                if (friendTurn%2 == 0)
                {
                    e1.target.classList.add("cross");
                    arr[parseInt(e1.target.cellIndex)][parseInt(e1.target.parentElement.rowIndex)] = "cross";
                }

                else {
                    e1.target.classList.add("circle");
                    arr[parseInt(e1.target.cellIndex)][parseInt(e1.target.parentElement.rowIndex)] = "circle";
                }

                //collums winning
                for(let z = 0; z<2; z++)
                {
                    //collums winning
                    if(arr[z][0] == arr[z][1] == arr[z][2])
                    {
                        alert("win");
                    }

                    //rows winning
                    if(arr[0][z] == arr[1][z] == arr[2][z])
                    {
                        alert("win");
                    }

                    //slant winning
                    if(arr[0][0] == arr[1][1] == arr[2][2])
                    {
                        alert("win");
                    }
                }

                friendTurn++;
            })
        }


.cross {
    background-image: url(x.png);
    background-size: cover;
    background: red;
}

.circle {
    background-image: url(circle.png);
    background-size: cover;
    background: green;
}

table {
    border-collapse: collapse;
    width: 50vw;
    height: 70vh;
    border: 5px solid black;
    margin: auto;
}

td {
    border: 5px solid black;
}
<html>
<head>
</head>
<body>
<main>
        <table class="delete">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </main>
    <script>
    (function() {
   // your page initialization code here
   // the DOM will be available here
let table = document.getElementsByTagName("table")[0];
let saveTypeGame;
let friendTurn = 0;
let arr = [[],[],[]];
let colWin = 0;

 if(true)//saveTypeGame=="friend")
        {
            table.addEventListener("click", function (e1) {
                if (friendTurn%2 == 0)
                {
                    e1.target.classList.add("cross");
                    arr[parseInt(e1.target.cellIndex)][parseInt(e1.target.parentElement.rowIndex)] = "cross";
                }

                else {
                    e1.target.classList.add("circle");
                    arr[parseInt(e1.target.cellIndex)][parseInt(e1.target.parentElement.rowIndex)] = "circle";
                }

                //collums winning
                for(let z = 0; z<2; z++)
                {
                    //collums winning
                    if(arr[z][0] == arr[z][1] == arr[z][2])
                    {
                        alert("win");
                    }

                    //rows winning
                    if(arr[0][z] == arr[1][z] == arr[2][z])
                    {
                        alert("win");
                    }

                    //slant winning
                    if(arr[0][0] == arr[1][1] == arr[2][2])
                    {
                        alert("win");
                    }
                }

                friendTurn++;
            })
        }
})()
    </script>
    
    </body>
    </html>
javascript tic-tac-toe
1个回答
1
投票

您无法像以前那样顺序比较项目。

if(arr[0][0] == arr[1][1] == arr[2][2]) // don't work

相反，您需要链接比较：

if ( arr[0][0] == s && 
     arr[1][1] == s &&
     arr[2][2] == s)


let table = document.getElementsByTagName("table")[0];
let friendTurn = 0;
let arr = [
  [],
  [],
  []
];

table.addEventListener("click", function(e1) {
  let cellIndex = parseInt(e1.target.cellIndex);

  // check if cell isn't clicked
  if (!e1.target.classList.contains("cross") &&
    !e1.target.classList.contains("circle") &&
    // check for border clicks
    arr[cellIndex] !== undefined) {

    let s = "circle";
    if (friendTurn % 2 == 0) s = "cross";
    friendTurn++;

    let rowIndex = parseInt(e1.target.parentElement.rowIndex);
    arr[cellIndex][rowIndex] = s;
    e1.target.classList.add(s);

    for (let z = 0; z <= 2; z++) {
      if (arr[z][0] == s &&
        arr[z][1] == s &&
        arr[z][2] == s) {
        reset("collums" + z, s);
      }
      if (arr[0][z] == s &&
        arr[1][z] == s &&
        arr[2][z] == s) {
        reset("rows" + z, s);
      }
    }
    if (arr[0][0] == s &&
      arr[1][1] == s &&
      arr[2][2] == s) {
      reset("slant1", s);
    }
    if (arr[0][2] == s &&
      arr[1][1] == s &&
      arr[2][0] == s) {
      reset("slant2", s);
    }
    if (friendTurn >= 9) reset("draw", "no one");
  }
});

function reset(p, s) {
  console.clear();
  console.log(s, "win", p);
  friendTurn = 0;
  arr = [
    [],
    [],
    []
  ];
  for (let td of document.querySelectorAll("td")) {
    td.classList.remove("circle", "cross");
  }
}
.cross {
  background-image: url("https://via.placeholder.com/90/444/fff/?text=X");
  background-size: cover;
}

.circle {
  background-image: url("https://via.placeholder.com/90/bbb/000/?text=O");
  background-size: cover;
}

table {
  border-collapse: collapse;
  width: 10em;
  height: 10em;
  margin: auto;
}

td {
  border: 5px solid black;
}
<main>
  <table class="delete">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</main>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.