[go: up one dir, main page]
Scribd
Upload
19 views4 pages

Test Anas

Uploaded by

abdelkaderlaabidi7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views4 pages

Test Anas

Uploaded by

abdelkaderlaabidi7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe Game</title>
<style>
body {
font-family: Arial, sans-serif;
display: xo
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.scoreboard {
font-size: 18px;
margin-bottom: 10px;
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
position: relative;
}
.cell {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer;
user-select: none;
}
.cell.X {
color: #007BFF;
}
.cell.O {
color: #FF5733;
}
.cell:hover {
background-color: #f0f0f0;
}
.message {
font-size: 18px;
margin-bottom: 10px;
}
.winning-line {
position: absolute;
background-color: #28a745;
pointer-events: none;
transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="scoreboard">
<div>Player X Score: <span id="scoreX">0</span></div>
<div>Player O Score: <span id="scoreO">0</span></div>
</div>
<div class="message" id="message">Player X's Turn</div>
<div class="game-board">
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="winning-line" id="winningLine"></div>
</div>
<button onclick="resetGame()">Reset Game</button>

<script>
const cells = document.querySelectorAll('[data-cell]');
const message = document.getElementById('message');
const scoreXElement = document.getElementById('scoreX');
const scoreOElement = document.getElementById('scoreO');
const winningLine = document.getElementById('winningLine');
let currentPlayer = 'X';
let gameBoard = Array(9).fill(null);
let isGameActive = true;
let scores = { X: 0, O: 0 };

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]
];

function handleClick(event) {
const cell = event.target;
const index = Array.from(cells).indexOf(cell);

if (gameBoard[index] || !isGameActive) return;

gameBoard[index] = currentPlayer;
cell.textContent = currentPlayer;
cell.classList.add(currentPlayer);

const winCombination = checkWin();


if (winCombination) {
message.textContent = `Player ${currentPlayer} Wins!`;
scores[currentPlayer]++;
updateScore();
drawWinningLine(winCombination);
isGameActive = false;
return;
}

if (gameBoard.every(cell => cell)) {


message.textContent = 'It\'s a Draw!';
isGameActive = false;
return;
}

currentPlayer = currentPlayer === 'X' ? 'O' : 'X';


message.textContent = `Player ${currentPlayer}'s Turn`;
}

function checkWin() {
return winningCombinations.find(combination => {
const [a, b, c] = combination;
return gameBoard[a] && gameBoard[a] === gameBoard[b] &&
gameBoard[a] === gameBoard[c] ? combination : null;
}) || null;
}

function drawWinningLine(combination) {
if (!combination) return;

const [a, b, c] = combination;


const cellsArray = Array.from(cells);
const start = getCellPosition(cellsArray[a]);
const end = getCellPosition(cellsArray[c]);

const [startX, startY] = start;


const [endX, endY] = end;

const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY -


startY, 2));
const angle = Math.atan2(endY - startY, endX - startX) * (180 /
Math.PI);

winningLine.style.width = `${length}px`;
winningLine.style.height = '5px';
winningLine.style.transform = `rotate(${angle}deg)`;
winningLine.style.left = `${startX}px`;
winningLine.style.top = `${startY}px`;
}

function getCellPosition(cell) {
const rect = cell.getBoundingClientRect();
const boardRect = document.querySelector('.game-
board').getBoundingClientRect();
return [rect.left - boardRect.left + rect.width / 2, rect.top -
boardRect.top + rect.height / 2];
}

function updateScore() {
scoreXElement.textContent = scores.X;
scoreOElement.textContent = scores.O;
}

function resetGame() {
gameBoard = Array(9).fill(null);
isGameActive = true;
currentPlayer = 'X';
message.textContent = `Player ${currentPlayer}'s Turn`;
cells.forEach(cell => {
cell.textContent = '';
cell.classList.remove('X', 'O');
});
winningLine.style.width = '0';
}

cells.forEach(cell => cell.addEventListener('click', handleClick));


</script>
</body>
</html>

You might also like