我用 HTML、CSS 和 Javascript 制作了一個井字游戲。單擊方框、顯示消息以及其他所有操作都可以正常工作，但檢查某人是否贏得了游戲則不行。該代碼不會生成錯誤，它只是不起作用。這是我使用的代碼：var currentPlayer = "X";var tds = document.querySelectorAll("td");var playerDisplay = document.querySelector("#playerDisplay")var warning = document.querySelector("#warning")var winDisplay = document.querySelector("#win")function switchPlayers() { if(currentPlayer === "X") { currentPlayer = "O"; playerDisplay.innerHTML = "O" } else { currentPlayer = "X"; playerDisplay.innerHTML = "X" }}function checkWin() { if (tds[0].textContent === tds[1].textContent === tds[2].textContent) { return tds[0].textContent; } else if (tds[3].textContent === tds[4].textContent ==tds[5].textContent){ return tds[3].textContent; } else if (tds[6].textContent === tds[7].textContent === tds[8].textContent){ return tds[6].textContent; } else if (tds[0].textContent === tds[3].textContent === tds[6].textContent){ return tds[0].textContent; } else if (tds[1].textContent === tds[4].textContent === tds[7].textContent){ return tds[1].textContent; } else if (tds[2].textContent === tds[5].textContent === tds[8].textContent){ return tds[2].textContent; } else if (tds[0].textContent === tds[4].textContent === tds[8].textContent){ return tds[0].textContent; } else if (tds[2].textContent === tds[4].textContent === tds[6].textContent){ return tds[2].textContent; } else if (tds[0].textContent != "-" && tds[1].textContent != "-" && tds[2].textContent != "-" && tds[3].textContent != "-" && tds[4].textContent != "-" && tds[5].textContent != "-" && tds[6].textContent != "-" && tds[7].textContent != "-" && tds[8].textContent != "-"){ return -1; } else { return -2; }}我只是不明白為什么它不起作用。:)
2 回答
HUH函數
TA貢獻1836條經驗 獲得超4個贊
如果您想了解為什么您的解決方案具體不起作用，那是因為這一行（以及其他類似的行）：
if?(tds[0].textContent?===?tds[1].textContent?===?tds[2].textContent)
不幸的是，你無法像這樣測試三件事是否相等。您實際上所做的是將tds[0].textContent，比方說 'X' 與結果進行比較tds[1].textContent === tds[2].textContent（如果它們都是 'X'，則不會再次是 'X' 而是 boolean?true）。
為了進行比較，您可以使用：
if?(tds[0].textContent?===?tds[1].textContent?&&?tds[0].textContent?===?tds[2].textContent)
我修改了您的代碼片段，但為了簡潔起見，使用了一個函數來返回比較。
希望這是有道理的！
var currentPlayer = "X";
var tds = document.querySelectorAll("td");
var playerDisplay = document.querySelector("#playerDisplay")
var warning = document.querySelector("#warning")
var winDisplay = document.querySelector("#win")
function switchPlayers() {
? if(currentPlayer === "X") {
? ? currentPlayer = "O";
? ? playerDisplay.innerHTML = "O"
? } else {
? ? currentPlayer = "X";
? ? playerDisplay.innerHTML = "X"
? }
}
function checkWin() {
? if (check3Same(0, 1, 2)) {
? ? ? ? return tds[0].textContent;
? } else if (check3Same(3, 4, 5)){
? ? ? ? return tds[3].textContent;
? } else if (check3Same(6, 7, 8)){
? ? ? ? return tds[6].textContent;
? } else if (check3Same(0, 3, 6)){
? ? ? ? return tds[0].textContent;
? } else if (check3Same(1, 4, 7)){
? ? ? ? return tds[1].textContent;
? } else if (check3Same(2, 5, 8)){
? ? ? ? return tds[2].textContent;
? } else if (check3Same(0, 4, 8)){
? ? ? ? return tds[0].textContent;
? } else if (check3Same(2, 4, 6)){
? ? ? ? return tds[2].textContent;
? } else if (tds[0].textContent != "-" && tds[1].textContent != "-" && tds[2].textContent != "-" && tds[3].textContent != "-" && tds[4].textContent != "-" && tds[5].textContent != "-" && tds[6].textContent != "-" && tds[7].textContent != "-" && tds[8].textContent != "-"){
? ? ? ? return -1;
? } else {
? ? return -2;
? }
}
function check3Same(a, b, c) {
? return tds[a].textContent === tds[b].textContent && tds[a].textContent === tds[c].textContent;
}
function game() {
? for(var i = 0; i < tds.length; i++) {
? ? ? tds[i].addEventListener("click", function(){
? ? ? ? if(this.textContent === "-") {
? ? ? ? ? this.textContent = currentPlayer;
? ? ? ? ? if(checkWin() === "X") {
? ? ? ? ? ? winDisplay.textContent = "X wins!!!";
? ? ? ? ? ? return;
? ? ? ? ? } else if(checkWin() === "O"){
? ? ? ? ? ? winDisplay.textContent = "O wins!!!";
? ? ? ? ? ? return;
? ? ? ? ? } else if (checkWin() === -1) {
? ? ? ? ? ? winDisplay.textContent = "Tied!!!"
? ? ? ? ? ? return;
? ? ? ? ? }
? ? ? ? ? switchPlayers();
? ? ? ? } else {
? ? ? ? ? warning.textContent = "That block has already been filled, choose and empty one."
? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? warning.textContent = "";
? ? ? ? ? }, 1000);
? ? ? ? }
? ? ? });
? }
}
game();
<html>
? <head>
? ? <meta charset="utf-8">
? ? <meta name="viewport" content="width=device-width">
? ? <title>Tic Tac Toe</title>
? ? <link href="style.css" rel="stylesheet" type="text/css" />
? ? <link rel="stylesheet">
? </head>
? <body>
? ? <h1>Tic Tac Toe</h1>
? ? <table>
? ? ? <tr>
? ? ? ? <td id="1">-</td>
? ? ? ? <td id="2" class="top-middle">-</td>
? ? ? ? <td id="3" >-</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td id="4" class="left">-</td>
? ? ? ? <td id="5" class="middle">-</td>
? ? ? ? <td id="6" class="right">-</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td id="7" >-</td>
? ? ? ? <td id="8" class="bottom-middle">-</td>
? ? ? ? <td id="9">-</td>
? ? ? </tr>
? ? </table>
? ? <p id = "win">It's <span id="playerDisplay">X</span>'s turn.</p>
? ? <p id="warning"></p>
? ? <script src="script.js"></script>
? </body>
</html>
函數式編程
TA貢獻1807條經驗 獲得超9個贊
我將創建一系列可能的勝利，并斷言這些獲勝配置是否存在
var currentPlayer = "X";
var tds = document.querySelectorAll("td");
var playerDisplay = document.querySelector("#playerDisplay")
var warning = document.querySelector("#warning")
var winDisplay = document.querySelector("#win")
function switchPlayers() {
if(currentPlayer === "X") {
currentPlayer = "O";
playerDisplay.innerHTML = "O"
} else {
currentPlayer = "X";
playerDisplay.innerHTML = "X"
}
}
var WINNING_INDEX_CONFIGURATIONS = [
// horizontal
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
// vertical
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
// diagonal
[0, 4, 8],
[2, 4, 6],
]
function checkPlayerWin(currentPlayer) {
return WINNING_INDEX_CONFIGURATIONS.some(function (config) {
return config.every(function (idx) {
return tds[idx].textContent === currentPlayer
})
})
}
function isTie() {
for (let i = 0; i < 9; i++) {
if (td[i] !== '-') {
return false
}
}
return true
}
function game() {
for(var i = 0; i < tds.length; i++) {
tds[i].addEventListener("click", function(){
if(this.textContent === "-") {
this.textContent = currentPlayer;
if(checkPlayerWin('X')) {
winDisplay.textContent = "X wins!!!";
return;
} else if(checkPlayerWin('O')){
winDisplay.textContent = "O wins!!!";
return;
} else if (isTie()) {
winDisplay.textContent = "Tied!!!"
return;
}
switchPlayers();
} else {
warning.textContent = "That block has already been filled, choose and empty one."
setTimeout(function(){
warning.textContent = "";
}, 1000);
}
});
}
}
game();
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tic Tac Toe</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap" rel="stylesheet">
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td id="1">-</td>
<td id="2" class="top-middle">-</td>
<td id="3" >-</td>
</tr>
<tr>
<td id="4" class="left">-</td>
<td id="5" class="middle">-</td>
<td id="6" class="right">-</td>
</tr>
<tr>
<td id="7" >-</td>
<td id="8" class="bottom-middle">-</td>
<td id="9">-</td>
</tr>
</table>
<p id = "win">It's <span id="playerDisplay">X</span>'s turn.</p>
<p id="warning"></p>
<script src="script.js"></script>
</body>
</html>
- 2 回答
- 0 關注
- 122 瀏覽
添加回答
舉報
0/150
提交
取消