[ { "path": "README.md", "content": "tic-tac-toc game\r\n" }, { "path": "index.html", "content": "\r\n\r\n\r\n \r\n \r\n Tic Tac Toe\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n

X: 0

\r\n

O: 0

\r\n

Draws: 0

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