document.addEventListener("DOMContentLoaded", function () { const board = document.getElementById("board"); const result = document.getElementById("result"); let currentPlayer = "X"; let gameBoard = ["", "", "", "", "", "", "", "", ""]; let gameActive = true;
function renderBoard() { board.innerHTML = ""; for (let i = 0; i < 9; i++) { const cell = document.createElement("div"); cell.innerText = gameBoard[i]; cell.addEventListener("click", () => handleCellClick(i)); board.appendChild(cell); } }
function handleCellClick(index) { if (!gameActive || gameBoard[index] !== "") return;
gameBoard[index] = currentPlayer; renderBoard(); if (checkWin()) { result.innerText = `Player ${currentPlayer} wins!`; gameActive = false; } else if (checkDraw()) { result.innerText = "It's a draw!"; gameActive = false; } else { currentPlayer = currentPlayer === "X" ? "O" : "X"; }
}
function checkWin() { const winPatterns = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns [0, 4, 8], [2, 4, 6], // Diagonals ];
for (const pattern of winPatterns) { const [a, b, c] = pattern; if ( gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c] ) { return true; } } return false;
}
function checkDraw() { return gameBoard.every((cell) => cell !== ""); }
function resetGame() { currentPlayer = 'X'; gameBoard = ['', '', '', '', '', '', '', '', '']; gameActive = true; result.innerText = ''; renderBoard(); }
renderBoard(); });
fix when cant reset on button
It looks like you're encountering an issue with resetting the game when clicking the reset button. Here's a potential solution to address the problem:
Add a button element to your HTML with the id "resetButton". Then, you can update your JavaScript code to handle the reset functionality as shown below:
document.addEventListener("DOMContentLoaded", function () { const board = document.getElementById("board"); const result = document.getElementById("result"); const resetButton = document.getElementById("resetButton"); let currentPlayer = "X"; let gameBoard = ["", "", "", "", "", "", "", "", ""]; let gameActive = true; function renderBoard() { board.innerHTML = ""; for (let i = 0; i < 9; i++) { const cell = document.createElement("div"); cell.innerText = gameBoard[i]; cell.addEventListener("click", () => handleCellClick(i)); board.appendChild(cell); } } function handleCellClick(index) { if (!gameActive || gameBoard[index] !== "") return; gameBoard[index] = currentPlayer; renderBoard(); if (checkWin()) { result.innerText = `Player ${currentPlayer} wins!`; gameActive = false; } else if (checkDraw()) { result.innerText = "It's a draw!"; gameActive = false; } else { currentPlayer = currentPlayer === "X" ? "O" : "X"; } } function checkWin() { const winPatterns = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns [0, 4, 8], [2, 4, 6], // Diagonals ]; for (const pattern of winPatterns) { const [a, b, c] = pattern; if ( gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c] ) { return true; } } return false; } function checkDraw() { return gameBoard.every((cell) => cell !== ""); } function resetGame() { currentPlayer = 'X'; gameBoard = ['', '', '', '', '', '', '', '', '']; gameActive = true; result.innerText = ''; renderBoard(); } resetButton.addEventListener("click", resetGame); renderBoard(); });
By adding the reset button and incorporating the button listener within the JavaScript code, the reset functionality should work as intended when clicking the button.
buatkan agar work saat menjalankan javascript
Untuk menjadikan skrip JavaScript Anda berfungsi dengan, Anda perlu membuat perubahan pada file skripscript.js` Anda. Berikut adalah cara untuk memperbaiki fungsionalitas reset game dan memast bahwa JavaScript dapat dijalankan dengan benar:
script.js:
document.addEventListener("DOMContentLoaded", function () { const board = document.getElementById("board"); const result = document.getElementById("result"); const resetButton = document.querySelector('button'); let currentPlayer = "X"; let gameBoard = ["", "", "", "", "", "", "", "", ""]; let gameActive = true; function renderBoard() { board.innerHTML = ""; for (let i = 0; i < 9; i++) { const cell = document("div"); cell.innerText = gameBoard[i]; cell.addEventListener("click", () => handleCellClick(i)); board.appendChild(cell); } } function handleCellClick(index) { if (!gameActive || gameBoard] !== "") return; gameBoard[index] = currentPlayer; renderBoard(); if (checkWin()) { result.innerText = `Player ${currentPlayer} wins!`; Active = false; } else if (checkDraw()) { result = "It's a draw!"; gameActive = false; } else { currentPlayer = currentPlayer === "X" ? "O" "X"; } } function checkWin() { const winPatterns = [ [0, 1, 2], [3, 4, 5], [, 7, 8], // Rows [0 3, 6], [1, 4, 7], [2, , 8], // Columns [0, 4, 8], [2, 4, 6], Diagonals ]; for (const pattern of win) { const [a, b, c] = pattern; if gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c] ) { return true; } } return false; } function checkDraw() { return gameBoard.every((cell) => cell !== ""); } function resetGame() { currentPlayer = 'X'; Board = ['', '', '', '', '', '', '', '', '']; gameActive = true; result.innerText = renderBoard(); } resetButton.addEventListener("click resetGame); renderBoard(); });
Dengan perubahan ini, Anda seharusnya menjalankan skrip JavaScript dengan benar untuk permainan Tic Tac Toe Anda termasuk fungsi reset ketika tombol reset ditekan.