BELOW IS ALL YOU NEED TO USE THIS CODE
<!DOCTYPE html>
<html lang="en">
<head><center> <a href="index.html" style="color: rgb(0,255,0)"><font color="46ff33">HOME</font></a></center>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIC-TAC-TOE</title>
<style>
body {
background-image: url('tttbackground.png'); /* Replace with actual path */
background-size: cover;
text-align: center;
color: red;
margin: 0;
padding: 0;
}
#frame {
width: 445px;
height: 465px;
border: 5px solid red; /* Frame color */
position: relative;
margin: 20px auto;
background-image: url('tttbackground.png'); /* Use the same background */
background-size: cover;
}
#board {
display: grid;
grid-template-columns: repeat(3, 113px);
grid-template-rows: repeat(3, 113px);
gap: 5px;
position: absolute;
top: 50px; /* Positioning inside the frame */
left: 50px; /* Positioning inside the frame */
}
.cell {
width: 113px;
height: 113px;
background-color: rgba(255, 255, 255, 0.5);
position: relative;
cursor: pointer;
}
.playerO {
background-image: url('o.png'); /* Replace with actual path */
background-size: cover;
background-repeat: no-repeat;
}
.playerX {
background-image: url('x.png'); /* Replace with actual path */
background-size: cover;
background-repeat: no-repeat;
}
.line {
position: absolute;
width: 445px;
height: 5px;
background-color: red;
display: none;
z-index: 10;
}
button {
margin: 5px;
padding: 10px;
background-color: red;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>TIC-TAC-TOE</h1>
<div id="frame">
<div id="board">
<div class="cell" data-cell="0"></div>
<div class="cell" data-cell="1"></div>
<div class="cell" data-cell="2"></div>
<div class="cell" data-cell="3"></div>
<div class="cell" data-cell="4"></div>
<div class="cell" data-cell="5"></div>
<div class="cell" data-cell="6"></div>
<div class="cell" data-cell="7"></div>
<div class="cell" data-cell="8"></div>
</div>
</div>
<div>
<button onclick="makeMove('O')">Player O</button>
<button onclick="makeMove('X')">Player X</button>
<button onclick="resetGame()">Reset Game</button>
</div>
<div id="result"></div>
<script>
let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'O';
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
document.querySelectorAll('.cell').forEach(cell => {
cell.addEventListener('click', () => {
if (!cell.classList.contains('playerO') && !cell.classList.contains('playerX')) {
cell.classList.add(currentPlayer === 'O' ? 'playerO' : 'playerX');
board[cell.dataset.cell] = currentPlayer;
checkWinner();
currentPlayer = currentPlayer === 'O' ? 'X' : 'O';
}
});
});
function makeMove(player) {
currentPlayer = player;
}
function checkWinner() {
for (const combination of winningCombinations) {
const [a, b, c] = combination;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
displayWinner(board[a], combination);
return;
}
}
if (!board.includes('')) {
document.getElementById('result').innerText = "It's a draw!";
}
}
function displayWinner(winner, combination) {
const resultText = `${winner} wins!`;
document.getElementById('result').innerText = resultText;
const line = document.createElement('div');
line.classList.add('line');
line.style.display = 'block';
const [a, b, c] = combination;
const startX = (a % 3) * 118 + 50; // Adjust position within the frame
const startY = Math.floor(a / 3) * 118 + 100; // Vertical adjustment within the frame
line.style.left = `${startX}px`;
line.style.top = `${startY}px`;
document.getElementById('frame').appendChild(line);
}
function resetGame() {
board = ['', '', '', '', '', '', '', '', ''];
currentPlayer = 'O';
document.querySelectorAll('.cell').forEach(cell => {
cell.classList.remove('playerO', 'playerX');
});
document.getElementById('result').innerText = '';
const lines = document.querySelectorAll('.line');
lines.forEach(line => line.remove());
}
</script>
<img src="HAXOR-IS-LIVE 2.png" alt="Centered Image">
</body>
</html>
<html lang="en">
<head><center> <a href="index.html" style="color: rgb(0,255,0)"><font color="46ff33">HOME</font></a></center>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIC-TAC-TOE</title>
<style>
body {
background-image: url('tttbackground.png'); /* Replace with actual path */
background-size: cover;
text-align: center;
color: red;
margin: 0;
padding: 0;
}
#frame {
width: 445px;
height: 465px;
border: 5px solid red; /* Frame color */
position: relative;
margin: 20px auto;
background-image: url('tttbackground.png'); /* Use the same background */
background-size: cover;
}
#board {
display: grid;
grid-template-columns: repeat(3, 113px);
grid-template-rows: repeat(3, 113px);
gap: 5px;
position: absolute;
top: 50px; /* Positioning inside the frame */
left: 50px; /* Positioning inside the frame */
}
.cell {
width: 113px;
height: 113px;
background-color: rgba(255, 255, 255, 0.5);
position: relative;
cursor: pointer;
}
.playerO {
background-image: url('o.png'); /* Replace with actual path */
background-size: cover;
background-repeat: no-repeat;
}
.playerX {
background-image: url('x.png'); /* Replace with actual path */
background-size: cover;
background-repeat: no-repeat;
}
.line {
position: absolute;
width: 445px;
height: 5px;
background-color: red;
display: none;
z-index: 10;
}
button {
margin: 5px;
padding: 10px;
background-color: red;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>TIC-TAC-TOE</h1>
<div id="frame">
<div id="board">
<div class="cell" data-cell="0"></div>
<div class="cell" data-cell="1"></div>
<div class="cell" data-cell="2"></div>
<div class="cell" data-cell="3"></div>
<div class="cell" data-cell="4"></div>
<div class="cell" data-cell="5"></div>
<div class="cell" data-cell="6"></div>
<div class="cell" data-cell="7"></div>
<div class="cell" data-cell="8"></div>
</div>
</div>
<div>
<button onclick="makeMove('O')">Player O</button>
<button onclick="makeMove('X')">Player X</button>
<button onclick="resetGame()">Reset Game</button>
</div>
<div id="result"></div>
<script>
let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'O';
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
document.querySelectorAll('.cell').forEach(cell => {
cell.addEventListener('click', () => {
if (!cell.classList.contains('playerO') && !cell.classList.contains('playerX')) {
cell.classList.add(currentPlayer === 'O' ? 'playerO' : 'playerX');
board[cell.dataset.cell] = currentPlayer;
checkWinner();
currentPlayer = currentPlayer === 'O' ? 'X' : 'O';
}
});
});
function makeMove(player) {
currentPlayer = player;
}
function checkWinner() {
for (const combination of winningCombinations) {
const [a, b, c] = combination;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
displayWinner(board[a], combination);
return;
}
}
if (!board.includes('')) {
document.getElementById('result').innerText = "It's a draw!";
}
}
function displayWinner(winner, combination) {
const resultText = `${winner} wins!`;
document.getElementById('result').innerText = resultText;
const line = document.createElement('div');
line.classList.add('line');
line.style.display = 'block';
const [a, b, c] = combination;
const startX = (a % 3) * 118 + 50; // Adjust position within the frame
const startY = Math.floor(a / 3) * 118 + 100; // Vertical adjustment within the frame
line.style.left = `${startX}px`;
line.style.top = `${startY}px`;
document.getElementById('frame').appendChild(line);
}
function resetGame() {
board = ['', '', '', '', '', '', '', '', ''];
currentPlayer = 'O';
document.querySelectorAll('.cell').forEach(cell => {
cell.classList.remove('playerO', 'playerX');
});
document.getElementById('result').innerText = '';
const lines = document.querySelectorAll('.line');
lines.forEach(line => line.remove());
}
</script>
<img src="HAXOR-IS-LIVE 2.png" alt="Centered Image">
</body>
</html>