Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

some features #2

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

some features #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6eb8953
Update index.html
TiyisoWolfiez Jun 3, 2024
65a7d4e
Update index.html
TiyisoWolfiez Jun 3, 2024
f56018b
Update script.js
TiyisoWolfiez Jun 3, 2024
0c6446c
Update script.js
TiyisoWolfiez Jun 3, 2024
6e9e0be
Update script.js
TiyisoWolfiez Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ <h1>Tic Tac Toe</h1>
<select id="mode">
<option value="pvp">Player vs Player</option>
<option value="pva">Player vs AI</option>
<option value="avp">AI vs Player</option>
</select>
</div>
<div id="board" class="board"></div>
Expand All @@ -23,6 +24,7 @@ <h1>Tic Tac Toe</h1>
<div id="score">
<div class="player-score" id="playerXScore">Player X: 0</div>
<div class="player-score" id="playerOScore">Player O: 0</div>
<div class="player-score" id="drawScore">Draws: 0</div>
</div>
</div>
<div id="modal" class="modal">
Expand Down
23 changes: 19 additions & 4 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
const statusElement = document.getElementById('status');
const playerXScoreElement = document.getElementById('playerXScore');
const playerOScoreElement = document.getElementById('playerOScore');
const drawScoreElement = document.getElementById('drawScore');
const modalElement = document.getElementById('modal');
const modalMessageElement = document.getElementById('modal-message');
const playAgainButton = document.getElementById('play-again');
Expand All @@ -15,6 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
let playerMode = modeSelector.value; // Default: Player vs Player
let playerXScore = 0;
let playerOScore = 0;
let drawScore = 0;

const winPatterns = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
Expand Down Expand Up @@ -48,15 +50,16 @@ document.addEventListener('DOMContentLoaded', () => {
} else {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
updateTurn();
if (playerMode === 'pva' && currentPlayer === 'O') {
if ((playerMode === 'pva' && currentPlayer === 'O') ||
(playerMode === 'avp' && currentPlayer === 'O')) {
makeAIMove();
}
}
}
};

const updateTurn = () => {
turnElement.textContent = `Turn: Player ${currentPlayer}`;
turnElement.textContent = `Turn: ${currentPlayer === 'X' ? 'Player' : 'AI'}`;
};

const checkWinner = () => {
Expand Down Expand Up @@ -84,6 +87,9 @@ document.addEventListener('DOMContentLoaded', () => {
if (message.includes('Wins')) {
currentPlayer === 'X' ? playerXScore++ : playerOScore++;
updateScore();
} else {
drawScore++;
updateScore();
}

showModal(message);
Expand All @@ -92,6 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
const updateScore = () => {
playerXScoreElement.textContent = `Player X: ${playerXScore}`;
playerOScoreElement.textContent = `Player O: ${playerOScore}`;
drawScoreElement.textContent = `Draws: ${drawScore}`;
};

const showModal = (message) => {
Expand Down Expand Up @@ -211,7 +218,9 @@ document.addEventListener('DOMContentLoaded', () => {
playerOScore = 0;
updateScore();
}

if (playerMode === 'avp' && currentPlayer === 'O') {
makeAIMove();
}
resetGame();
});

Expand All @@ -222,11 +231,17 @@ document.addEventListener('DOMContentLoaded', () => {

const resetGame = () => {
board = ['', '', '', '', '', '', '', '', ''];
currentPlayer = 'X';
gameActive = true;
statusElement.textContent = '';
renderBoard();

currentPlayer = playerMode === 'avp' ? 'O' : 'X';
updateTurn();

if (playerMode === 'avp' && currentPlayer === 'O') {
makeAIMove();
}

if (playerMode === 'pva' && currentPlayer === 'O') {
makeAIMove();
}
Expand Down