如何判斷玩家是否在井字遊戲中獲勝或失敗

<!DOCTYPE html> 
<html> 
<head> 
<link href="tictactoe.css" type="text/css" rel="stylesheet" > 
<meta charset= "utf-8"> 
<title>Tic Tac Toe</title> 
</head> 
<body> 

<h1>Tic Tac Toe</h1> 
<form> 
Current Player <p id="currentplayer">X</p> 
<table id= "game" border="1"> 
<tr> 
<td type = "button" onclick = "set('box1');" id = "box1" ></button></td> 
<td type = "button" onclick = "set('box2');" id = "box2" ></button></td> 
<td type = "button" onclick = "set('box3');" id = "box3" ></button></td> 
</tr> 
<tr> 
<td type = "button" onclick = "set('box4');" id = "box4" ></button></td> 
<td type = "button" onclick = "set('box5');" id = "box5" ></button></td> 
<td type = "button" onclick = "set('box6');" id = "box6" ></button></td> 
</tr> 
<tr> 
<td type = "button" onclick = "set('box7');" id = "box7" ></button></td> 
<td type = "button" onclick = "set('box8');" id = "box8" ></button></td> 
<td type = "button" onclick = "set('box9');" id = "box9" ></button></td> 
</tr> 
</table> 

<button id = "restart">New Game </button> 
</form> 

<script src= "tictactoe.js" type = "text/Javascript"></script> 
</body> 
</html>

這是我的HTML代碼。如何判斷玩家是否在井字遊戲中獲勝或失敗

h1 { 
font-family: "Courier New"; 
} 
body { 
text-align: center; 
background-color: #FFB6C1; 
} 

table { 
height: 300px; 
width: 300px; 
margin: auto; 

} 

button { 
height: 100px; 
width: 100px; 
} 
#box1 { 
height: 100px; 
width: 100px; 
} 

#box2 { 
height: 100px; 
width: 100px; 
} 
#box3 { 
height: 100px; 
width: 100px; 
} 
#box4 { 
height: 100px; 
width: 100px; 
} 
#box5 { 
height: 100px; 
width: 100px; 
} 
#box6 { 
height: 100px; 
width: 100px; 
} 
#box7 { 
height: 100px; 
width: 100px; 
} 
#box8 { 
height: 100px; 
width: 100px; 
} 
#box9 { 
height: 100px; 
width: 100px; 
}

這是我的tic tac toe遊戲的CSS。

function changeplayer() 
{ 
var player = document.getElementById("currentplayer").innerHTML; 
if(player == "X") 
{ 
    document.getElementById("currentplayer").innerHTML = "O"; 
} 
else{ 
    document.getElementById("currentplayer").innerHTML = "X"; 
} 

} 

function set(idvalue) 
{ 
var buttonclicked = document.getElementById(idvalue); 
if(buttonclicked.innerHTML == "" || buttonclicked.innerHTML == null) 
{ 
    var player = document.getElementById("currentplayer").innerHTML; 
    buttonclicked.innerHTML = player; 
} 
changeplayer(); 

}

這是我的tic tac toe遊戲的JS。事情是我不知道如何通知玩家，如果他們贏了或不。到目前爲止，雙方都可以輪流參加這一切。如何在Javascript中添加代碼以顯示「X」或「O」贏了？另外，我想知道我的代碼看起來是否正確。所有建議將不勝感激！

來源

2016-11-15 Alvi

這很棒，你已經包含了一些代碼，但是在發佈之前，這是一個好主意，可以自己做一些研究並嘗試。如果你嘗試並認爲你很接近，我們可以幫助你朝正確的方向發展。現在，你基本上已經給了我們一個基礎，並且你要求我們建造房子 - 勝利邏輯是這個練習中最複雜/最困難的部分。 – Santi

要知道哪個玩家贏了，您需要知道某人是否連續有三個「X」或「O」。您可以通過在代碼中添加更多邏輯或從UI中獲取CSS值/狀態來實現此目的。

建議將更多的邏輯放入代碼中。你可以通過例如將多維數組添加到您的JavaScript代碼中。在那裏你正在構建一個3行3列的3x3用戶界面，每個用戶有3個條目。

var gameBoard = [ 
    [1, 2, 3], 
    [4, 5, 6], 
    [7, 8, 9] 
];

但不是從1到9，你店裏的數字哪個球員已經把他/她的「盒子」到該位置。你可以在你的set（）函數中做到這一點，就像你在那裏知道的那樣，哪個玩家選擇了哪個盒子。在每次調用set（）函數之後，您將遍歷該數組，並查明是否有人在一行或一列中有三個「框」

除此之外，如果您查看CSS，則使用CSS ID而不是類。一個類可以被定義一次，可以用於任何你的「盒子」，而不用9次寫同樣的定義。

在你煩擾代碼質量和更多問題之前，我建議你讓它「以某種方式」工作，然後嘗試逐步改進它。

試試吧，不要猶豫再問一次。

來源

2016-11-15 23:47:44 SLi

如何判斷玩家是否在井字遊戲中獲勝或失敗

回答

相關問題