Tic Tac Toe Game
<m-group id="board" z="-20" y="0">
<m-label id="winner" width="22" y="-5" height="5" content="" font-size="200" alignment="center"></m-label>
<!-- horizontal lines -->
<m-cube id="line-horizontal-1" width="22" z="1" y="21.5" color="black"></m-cube>
<m-cube id="line-horizontal-2" width="22" z="1" y="14.5" color="black"></m-cube>
<m-cube id="line-horizontal-3" width="22" z="1" y="7.5" color="black"></m-cube>
<m-cube id="line-horizontal-4" width="22" z="1" y="0.5" color="black"></m-cube>
<!-- vertical lines -->
<m-cube id="line-vertical-1" height="22" z="1" x="-10.5" y="11" color="black"></m-cube>
<m-cube id="line-vertical-2" height="22" z="1" x="-3.5" y="11" color="black"></m-cube>
<m-cube id="line-vertical-3" height="22" z="1" x="3.5" y="11" color="black"></m-cube>
<m-cube id="line-vertical-4" height="22" z="1" x="10.5" y="11" color="black"></m-cube>
<!-- interactive cubes -->
<!-- first row -->
<m-label id="cell-1" width="6" height="6" x="-7" y="18" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<m-label id="cell-2" width="6" height="6" x="0" y="18" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<m-label id="cell-3" width="6" height="6" x="7" y="18" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<!-- second row -->
<m-label id="cell-4" width="6" height="6" x="-7" y="11" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<m-label id="cell-5" width="6" height="6" x="0" y="11" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<m-label id="cell-6" width="6" height="6" x="7" y="11" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<!-- third row -->
<m-label id="cell-7" width="6" height="6" x="-7" y="4" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<m-label id="cell-8" width="6" height="6" x="0" y="4" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
<m-label id="cell-9" width="6" height="6" x="7" y="4" z="1" font-size="450" color="#ffffff" alignment="center"></m-label>
</m-group>
<script>
let isGameOver = false;
// Create tic-tac-toe board status
let board = [
["", "", ""],
["", "", ""],
["", "", ""],
];
const label = document.querySelector("#winner");
// Track current player
let currentPlayer = "X";
const setMove = (selectedCell) => {
selectedCell.setAttribute("content", currentPlayer);
}
// Function to update board status
function updateBoard(x, y, player) {
board[y][x] = player;
}
// Function to check for a win
function checkForWin() {
const winConditions = [
[
[0, 0],
[1, 0],
[2, 0]
], // rows
[
[0, 1],
[1, 1],
[2, 1]
],
[
[0, 2],
[1, 2],
[2, 2]
],
[
[0, 0],
[0, 1],
[0, 2]
], // columns
[
[1, 0],
[1, 1],
[1, 2]
],
[
[2, 0],
[2, 1],
[2, 2]
],
[
[0, 0],
[1, 1],
[2, 2]
], // diagonals
[
[0, 2],
[1, 1],
[2, 0]
],
];
return winConditions.some(condition =>
condition.every(([x, y]) => board[y][x] === currentPlayer)
);
}
function resetBoard() {
isGameOver = false;
board = [
["", "", ""],
["", "", ""],
["", "", ""],
];
const boardNode = document.getElementById("board");
const labels = boardNode.querySelectorAll("m-label");
labels.forEach((child) => {
child.setAttribute("content", "");
});
}
// Add click event listeners to cubes
for (let y = 0; y < 3; y++) {
for (let x = 0; x < 3; x++) {
const cell = document.getElementById(`cell-${y * 3 + x + 1}`);
cell.addEventListener("click", () => {
if (isGameOver) return;
if (board[y][x] === "") {
// Update board status
updateBoard(x, y, currentPlayer);
setMove(cell)
// Visualize move
cell.textContent = currentPlayer;
// Check for win
if (checkForWin()) {
isGameOver = true;
label.setAttribute("content", `${currentPlayer} wins!
Click to restart!`);
label.addEventListener("click", () => {
resetBoard();
});
return;
}
// Check for tie
if (board.every(row => row.every(cell => cell !== ""))) {
isGameOver = true;
label.setAttribute("content", "It's a tie!\nClick to restart!");
label.addEventListener("click", () => {
resetBoard();
});
return;
}
// Switch players
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
});
}
}
</script>
<m-light type="point" x="10" y="10" z="10"></m-light>
MML Project -> https://mmleditor.com/projects/solar-purple-rodent-rJro1o
Last updated