我正在使用 javascript 的立即呼叫函式元素 (IIFE) 創建井字游戲。到目前為止，我已經成功地使用 CSS 和 HTML 創建了游戲板，并且還設法獲得了根據標志識別獲勝者的游戲。我還能夠創建一個重置功能。然而，我的問題是，當沒有找到任何組合時，我無法弄清楚如何對邏輯進行編程以顯示平局。經常發生的情況是，每當我嘗試撰寫平局的邏輯時，它會在第一次單擊游戲板上顯示平局。有人可以幫我解決這個問題！
const gameBoard = (() =>{
const sectors = document.querySelectorAll(".sector");
let sector = Array.from(sectors);
const winner = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];
let choice = "X";
const gamePlay = () =>{
const count = () => sector.forEach((val, index)=>{
val.addEventListener('click',()=>{
if(val.textContent === choice){
index = 1;
}else{
index = 0;
}
})
})
const move = () =>{
sector.forEach((mark)=>{
mark.addEventListener("click",()=>{
if(mark.textContent === ""){
choice = choice === "X"?"O":"X";
mark.textContent = choice;
gameWinner();
}
})
})
}
move()
const resetGame = () =>{
const reset = document.querySelector("#reset");
reset.addEventListener('click',()=>{
sector.forEach((mark) =>{
mark.textContent = "";
})
})
}
resetGame();
const gameWinner = () =>{
winner.forEach((combo)=>{
let checkWinner = combo.every(idx =>
sector[idx].textContent === choice)
if(checkWinner){
alert(choice " has won!");
}else if(count() <= winner.length && !checkWinner){
alert('tie');
}
})
}
}
const players = (player1, player2, machine)=>{
}
return {gamePlay};
})();
gameBoard.gamePlay();
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tic-Tac-Toe</title>
<script src="game.js" defer></script>
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header id="title">Tic-Tac-Toe</header>
<main>
<!--<div id="playerSelection">
<p>Select Your Mark</p>
<button id="x">X</button><button id="o">O</button>
</div>-->
<div id="board">
<div id = "one" class="sector"></div>
<div id = "two" class="sector"></div>
<div id = "three" class="sector"></div>
<div id = "four" class="sector"></div>
<div id = "five" class="sector"></div>
<div id = "six" class="sector"></div>
<div id = "seven"class="sector"></div>
<div id = "eight" class="sector"></div>
<div id = "nine" class="sector"></div>
</div>
<button id="reset">Reset</button>
</main>
</body>
</html>
#title{
display:flex;
align-items: center;
justify-content: center;
}
#board{
display:grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap:10px;
background-color: darkblue;
width:320px;
height:320px;
}
.sector{
background-color: cadetblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
}
#playerSelection{
display:flex;
flex-direction: column;
justify-content: center;
}
main{
display:flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
uj5u.com熱心網友回復：
一些問題：
count是系結事件監聽器。它沒有計算任何東西。當這些事件被觸發時（點擊時），事情就完成了，但那是沒有用的。index增量不會產生任何影響，因為此變數永遠不會用于除增量和重置之外的任何其他操作。最后，count()總是回傳undefined，因為這forEach是旨在回傳的。而是定義一個函式boardIsFull：const boardIsFull = () => sector.every((val) => val.textContent != "");gameWinner正在呼喚每一種組合count()。當然，平局的狀態不依賴于正在驗證的組合，因此平局的檢查應該只發生一次。以下是定義此函式的方法：const gameWinner = () => { let checkWinner = winner.find((combo) => combo.every(idx => sector[idx].textContent === choice) ); if (checkWinner) { alert(choice " has won!"); } else if(boardIsFull()) { alert('tie'); } };
您應該進一步改進您的代碼，以避免在玩家已經贏得連擊之后游戲繼續進行。
然后，您可以添加更多功能，例如計算移動的演算法，以便您可以玩“計算機”對手。有關此類實作，請參閱此答案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/438947.html
標籤：javascript 数组 dom javascript 对象 生活
下一篇：如何洗掉DOM元素屬性？