-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
163 lines (144 loc) · 4.78 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
// Use module || factory.
// Each piece of functionality should fit game, player or gameboard objects.
// Gameboard module. store gameboard as array
const Gameboard = (() => {
let gameboard = ['', '', '', '', '', '', '', '', ''];
// JS function that renders game conents array to webpage.
const render = () => {
let boardHTML = "";
gameboard.forEach((square, index) => {
boardHTML += `<div class="square" id="${index}">${square}</div>`
})
document.querySelector('#gameboard').innerHTML = boardHTML;
const squares = document.querySelectorAll('.square')
squares.forEach((square) => {
square.addEventListener('click', Game.handleClick);
})
}
const update = (index, value) => {
gameboard[index] = value;
render();
};
const getGameboard = () => gameboard;
return {
render,
update,
getGameboard,
}
})();
// Display module that congrats the winning player!
const displayModule = (() => {
const renderMessage = (message) => {
document.querySelector('#message').innerHTML = message;
}
return {
renderMessage,
}
})();
// Player factory function
const Player = (name, mark) => {
return { name, mark };
};
// Game module
const Game = (() => {
let players = [];
let currentPlayerindex;
let gameOver;
// functions that lets player add marks to squares on board then tie it to the DOM.
const start = () => {
players = [
Player(document.querySelector('#player1').value, 'X'),
Player(document.querySelector('#player2').value, 'O')
]
currentPlayerindex = 0;
gameOver = false;
Gameboard.render();
const startGame = document.querySelector('.show')
startGame.classList.remove('show');
const squares = document.querySelectorAll('.square')
squares.forEach((square) => {
square.addEventListener('click', handleClick);
})
};
// include a button to start/restart the game
const startButton = document.querySelector('#start-button');
startButton.addEventListener('click', () => {
Game.start();
});
const restartButton = document.querySelector('#restart');
restartButton.addEventListener('click', () => {
Game.restart();
});
const handleClick = (e) => {
// logic that stops players from playing same squares twice
if (gameOver)
return;
let index = (e.target.id);
if (Gameboard.getGameboard()[index] !=='')
return;
Gameboard.update(index, players[currentPlayerindex].mark);
const endGame = document.querySelector('#winningMessage')
// check when game over! should check 3-in-a-row and tie
if (checkForWin(Gameboard.getGameboard(), players[currentPlayerindex].mark)) {
gameOver = true;
displayModule.renderMessage(`Congrats ${players[currentPlayerindex].name}, you Win!`)
endGame.classList.add('show');
} else if (checkForTie(Gameboard.getGameboard())) {
gameOver = true;
displayModule.renderMessage(`It's a tie`);
endGame.classList.add('show');
}
currentPlayerindex = currentPlayerindex === 0 ? 1 : 0;
};
const checkForWin = (board, mark) => {
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // horizontal
[0, 3, 6], [1, 4, 7], [2, 5, 8], // vertical
[0, 4, 8], [2, 4, 6] // diagonal
];
return winningCombinations.some(combination => combination.every(index => board[index] === mark));
};
const checkForTie = (board) => {
return board.every(square => square !== '')
};
const restart = () => {
for (let i = 0; i < 9; i++) {
Gameboard.update(i,'');
const endGame = document.querySelector('#winningMessage');
endGame.classList.remove('show');
}
Gameboard.render();
gameOver = false;
currentPlayerindex = 0;
document.querySelector('#message').innerHTML = '';
}
return {
start,
handleClick,
restart,
checkForWin,
checkForTie,
}
})();
// dark / light mode
// const toggle = document.getElementById('toggle-dark');
// const body = document.querySelector('body');
// toggle.addEventListener('click', function() {
// this.classList.toggle('bi-brightness-high-fill');
// if (this.classList.toggle('bi-moon')) {
// body.style.background = 'var(--background-light)';
// body.style.color = '#000';
// body.style.transition = '0.1s';
// } else {
// body.style.background = 'var(--background-dark';
// body.style.color = 'white';
// body.style.transition = '0.1s';
// }
// });
/**
* create an AI so that a player can play against the computer!
* Start by just getting the computer to make a random legal move.
* Once you’ve gotten that, work on making the computer smart.
* It is possible to create an unbeatable AI using the minimax algorithm
* (read about it here, some googling will help you out with this one)
*/