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
|
console.log('Hello from app.js');
fetch('svg/x.svg')
.then(response => response.text())
.then(fileContents => {
console.log(fileContents);
})
.catch(error => console.error('Error reading the file:', error));
const turns = {true: 'X', false: 'O'};
const getXBoard = function() {
return this.bitBoard.slice(0, 9);
};
const getOBoard = function() {
return this.bitBoard.slice(9, 18);
};
const checkVictory = function() {
let checkSum = 0;
let victory = false;
let checkRow = [];
this.rows.forEach(row => {
checkRow = this.xBoard.filter((_, index) => row.includes(index));
checkSum = checkRow.reduce((acc, value) => acc + value, 0);
if (checkSum == 3) {
victory = true;
this.victoryRow = row;
};
checkRow = this.oBoard.filter((_, index) => row.includes(index));
checkSum = checkRow.reduce((acc, value) => acc + value, 0);
if (checkSum == 3) {
victory = true;
this.victoryRow = row;
};
});
if (victory) {
this.victor = this.turn;
this.colorVictoryRow();
};
return(victory);
};
const colorVictoryRow = function () {
this.victoryRow.forEach(squareIndex => {
this.squares[squareIndex].style.color = 'var(--background-color)';
this.squares[squareIndex].style.backgroundColor = 'var(--foreground-color)';
});
};
const squareClick = function() {
if ((this.innerText == '') && !(this.board.victory)) {
//Mark board
this.innerText = this.board.turn;
//Update bitBoard
let position = 9 * (this.board.turn==turns[false]);
position += this.position;
this.board.bitBoard[position] = 1;
//check victory
if (this.board.victory) {
console.log(`${this.board.victor} wins!!!`);
};
//Switch player turn
this.board.turn = turns[this.board.turn==turns[false]]
};
};
const initBoard = function(board) {
board.squares = board.getElementsByClassName('square');
board.squares = Array.from(board.squares);
board.squares.forEach(square => {
square.addEventListener('click', squareClick);
square.board = board;
square.position = parseInt(square.id.match(/\d+/)[0], 10)-1;
});
board.turn = turns[true];
board.bitBoard = Array(18).fill(0);
Object.defineProperty(board, 'victory', {get: checkVictory});
Object.defineProperty(board, 'xBoard', {get: getXBoard});
Object.defineProperty(board, 'oBoard', {get: getOBoard});
board.rows = [
//rows
[0, 1, 2], [3, 4, 5], [6, 7, 8],
//columns
[0, 3, 6], [1, 4, 7], [2, 5, 8],
//diagonals
[0, 4, 8], [2, 4, 6]
];
board.colorVictoryRow = colorVictoryRow;
};
const board = document.getElementById('board');
initBoard(board);
|
