================================================
FILE: script.js
================================================
var gameBoard = [[null, null, null], [null, null, null], [null, null, null]];
var currentPlayer = "X";
var xScore = 0;
var oScore = 0;
var drawScore = 0;
var gameOver = false;
function placeSymbol(row, col) {
if (gameOver || gameBoard[row][col] != null) {
return;
}
gameBoard[row][col] = currentPlayer;
document.getElementById(row + "-" + col).innerHTML = currentPlayer;
checkForWin();
checkForDraw();
switchPlayer();
}
function checkForWin() {
for (var i = 0; i < 3; i++) {
if (gameBoard[i][0] == currentPlayer && gameBoard[i][1] == currentPlayer && gameBoard[i][2] == currentPlayer) {
gameOver = true;
updateScore();
return;
}
if (gameBoard[0][i] == currentPlayer && gameBoard[1][i] == currentPlayer && gameBoard[2][i] == currentPlayer) {
gameOver = true;
updateScore();
return;
}
}
if (gameBoard[0][0] == currentPlayer && gameBoard[1][1] == currentPlayer && gameBoard[2][2] == currentPlayer) {
gameOver = true;
updateScore();
return;
}
if (gameBoard[0][2] == currentPlayer && gameBoard[1][1] == currentPlayer && gameBoard[2][0] == currentPlayer) {
gameOver = true;
updateScore();
return;
}
}
function checkForDraw() {
var emptySpots = 0;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
if (gameBoard[i][j] == null) {
emptySpots++;
}
}
}
if (emptySpots == 0 && !gameOver) {
gameOver = true;
drawScore++;
document.getElementById("draw-score").innerHTML = drawScore;
}
}
function switchPlayer() {
if (currentPlayer == "X") {
currentPlayer = "O";
} else {
currentPlayer = "X";
}
}
function updateScore() {
if (currentPlayer == "X") {
xScore++;
document.getElementById("x-score").innerHTML = xScore;
} else {
oScore++;
document.getElementById("o-score").innerHTML = oScore;
}
}
function resetGame() {
gameBoard = [[null, null, null], [null, null, null], [null, null, null]];
currentPlayer = "X";
gameOver = false;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
document.getElementById(i + "-" + j).innerHTML = "";
}
}
}
function resetScoreboard() {
xScore = 0;
oScore = 0;
drawScore = 0;
document.getElementById("x-score").innerHTML = xScore;
document.getElementById("o-score").innerHTML = oScore;
document.getElementById("draw-score").innerHTML = drawScore;
}
================================================
FILE: style.css
================================================
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f2f2f2;
}
table {
border-collapse: collapse;
width: 350px;
height: 350px;
background-color: #fff;
box-shadow: 0px 0px 10px #aaa;
animation: zoomIn 0.5s ease-in-out;
}
td {
border: 1px solid #ccc;
width: 116px;
height: 116px;
text-align: center;
vertical-align: middle;
font-size: 50px;
font-weight: bold;
color: #aaa;
transition: all 0.3s ease-in-out;
}
td:hover {
background-color: #f5f5f5;
cursor: pointer;
}
td.x {
color: #f44336;
}
td.o {
color: #2196f3;
}
/* Animations */
@keyframes zoomIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes slideIn {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
.button:hover {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Container for the scoreboard and buttons */
.scoreboard-container {
position: absolute;
top: 20px;
right: 20px;
width: 300px;
background-color: rgba(255, 255, 255, 0.8); /* Light background color with transparency */
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #aaa;
z-index: 999;
}
/* Scoreboard */
.scoreboard {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.scoreboard .player {
font-size: 18px;
font-weight: bold;
}
.scoreboard .score {
font-size: 16px;
}
/* Buttons */
.scoreboard-container .button {
padding: 10px 20px;
background-color: #4CAF50; /* Green */
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
border: none;
margin-right: 10px;
transition: all 0.3s ease-in-out;
}
.scoreboard-container .button:hover {
background-color: #3e8e41;
cursor: pointer;
}