Beanz/old-school-chatbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "Chatbox-Website/Tic"

Browse Source
This commit is contained in:
Nathaniel Smith 2025-02-12 18:11:03 +00:00
parent 06ed954d6f
commit 2030bdda61
3 changed files with 156 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
Chatbox-Website/Tic/index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Tic Tac Toe</title>
</head>
<div class="game-container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="scoreboard">
<p style="color: white;">Player Score: <span class="player-score" style="color: white;">0</span></p>
<p style="color: white;">AI Score: <span class="ai-score" style="color: white;">0</span></p>
</div>
<div class="game-message"></div>
<script src="script.js"></script>
</body>
</html>

95
Chatbox-Website/Tic/script.js Normal file
View File

@ -0,0 +1,95 @@
const cells = document.querySelectorAll('.cell');
let currentPlayer = 'X';
let gameActive = true;
let playerScore = 0;
let aiScore = 0;
function checkWinner() {
const winningCombos = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
for (const combo of winningCombos) {
const [a, b, c] = combo;
if (cells[a].innerText && cells[a].innerText === cells[b].innerText && cells[a].innerText === cells[c].innerText) {
cells[a].classList.add('winner');
cells[b].classList.add('winner');
cells[c].classList.add('winner');
gameActive = false;
return true;
}
}
return false;
}
function checkTie() {
return Array.from(cells).every(cell => cell.innerText);
}
function handleClick(cellIndex) {
if (!gameActive || cells[cellIndex].innerText) {
return;
}
cells[cellIndex].innerText = currentPlayer;
cells[cellIndex].classList.add(currentPlayer);
if (checkWinner()) {
if (currentPlayer === 'X') {
playerScore++;
} else {
aiScore++;
}
updateScore();
alert(currentPlayer + ' wins!');
setTimeout(resetGame, 1000);
return;
}
if (checkTie()) {
alert("It's a tie!");
setTimeout(resetGame, 1000);
return;
}
if (currentPlayer === 'X') {
currentPlayer = 'O';
makeAiMove();
} else {
currentPlayer = 'X';
}
}
function updateScore() {
document.querySelector('.player-score').textContent = playerScore;
document.querySelector('.ai-score').textContent = aiScore;
}
function makeAiMove() {
const emptyCells = Array.from(cells).filter(cell => !cell.innerText);
if (emptyCells.length > 0) {
const randomIndex = Math.floor(Math.random() * emptyCells.length);
const randomCell = emptyCells[randomIndex];
setTimeout(() => handleClick(Array.from(cells).indexOf(randomCell)), 500);
}
}
function resetGame() {
currentPlayer = 'X';
gameActive = true;
cells.forEach(cell => {
cell.innerText = '';
cell.classList.remove('winner', 'X', 'O');
});
updateScore();
if (currentPlayer === 'O') {
makeAiMove();
}
}
updateScore();
cells.forEach(cell => cell.addEventListener('click', () => handleClick(Array.from(cells).indexOf(cell))));

34
Chatbox-Website/Tic/styles.css Normal file
View File

@ -0,0 +1,34 @@
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: black;
}
.game-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 2px;
background-color: #333;
}
.cell {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #fff;
background-color: #444;
cursor: pointer;
user-select: none;
}
.scoreboard {
margin-top: 20px;
text-align: center;
font-size: 18px;
}