Tic-Tac-Toe
The code the created this is below:
<script>
let currentPlayer = 'X';
let gameActive = true;
let gameState = ["", "", "", "", "", "", "", "", ""];
function makeMove(cell, index) {
if (gameState[index] !== "" || !gameActive) {
return;
}
gameState[index] = currentPlayer;
cell.innerHTML = currentPlayer;
checkResult();
}
function checkResult() {
const winConditions = [
[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 roundWon = false;
for (let i = 0; i < winConditions.length; i++) {
const winCondition = winConditions[i];
let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
break;
}
}
if (roundWon) {
alert(`${currentPlayer} wins!`);
gameActive = false;
return;
}
let roundDraw = !gameState.includes("");
if (roundDraw) {
alert("Draw!");
gameActive = false;
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
function restartGame() {
gameState = ["", "", "", "", "", "", "", "", ""];
gameActive = true;
currentPlayer = "X";
document.querySelectorAll('#tic-tac-toe-board button').forEach(button => button.innerHTML = "");
}
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe Game</title>
<div class="uk-container">
<h1 class="uk-heading-line uk-text-center"><span>Tic-Tac-Toe</span></h1>
<div id="tic-tac-toe-board" class="uk-grid-small uk-child-width-1-3@s uk-text-center" uk-grid="">
<div><button class="uk-button uk-button-default" onclick="makeMove(this,0)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,1)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,2)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,3)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,4)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,5)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,6)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,7)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,8)"> </button></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/js/uikit-icons.min.js"></script>
<script>
// JavaScript for game logic will go here
</script>
<script>
let currentPlayer = 'X';
let gameActive = true;
let gameState = ["", "", "", "", "", "", "", "", ""];
function makeMove(cell, index) {
if (gameState[index] !== "" || !gameActive) {
return;
}
gameState[index] = currentPlayer;
cell.innerHTML = currentPlayer;
checkResult();
}
function checkResult() {
const winConditions = [
[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 roundWon = false;
for (let i = 0; i < winConditions.length; i++) {
const winCondition = winConditions[i];
let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
break;
}
}
if (roundWon) {
alert(`${currentPlayer} wins!`);
gameActive = false;
return;
}
let roundDraw = !gameState.includes("");
if (roundDraw) {
alert("Draw!");
gameActive = false;
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
function restartGame() {
gameState = ["", "", "", "", "", "", "", "", ""];
gameActive = true;
currentPlayer = "X";
document.querySelectorAll('#tic-tac-toe-board button').forEach(button => button.innerHTML = "");
}
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe Game</title>
<div class="uk-container">
<h1 class="uk-heading-line uk-text-center"><span>Tic-Tac-Toe</span></h1>
<div id="tic-tac-toe-board" class="uk-grid-small uk-child-width-1-3@s uk-text-center" uk-grid="">
<div><button class="uk-button uk-button-default" onclick="makeMove(this,0)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,1)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,2)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,3)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,4)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,5)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,6)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,7)"> </button></div>
<div><button class="uk-button uk-button-default" onclick="makeMove(this,8)"> </button></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/js/uikit-icons.min.js"></script>
<script>
// JavaScript for game logic will go here
</script>