-
Notifications
You must be signed in to change notification settings - Fork 0
/
tictactoe.js
113 lines (99 loc) · 2.97 KB
/
tictactoe.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
const board = document.getElementsByTagName("table")[0];
const num_rows = 50;
const num_cells = 50;
const mark = {
"circle": document.getElementById("circle").content.firstElementChild,
"cross": document.getElementById("cross").content.firstElementChild
}
//object containing all moves
const moves = {
"last": {},
"all": []
}
//current sign
let sign = "circle";
window.addEventListener("load", () => {
drawBoard(board)
setTimeout(
()=> {
window.scrollTo(document.body.scrollWidth/2 - window.innerWidth/2, document.body.scrollHeight/2 - window.innerHeight/2)},
5)
})
function drawBoard(board) {
board.onclick = (e) => { make_move(e) };
for(let r=0; r <= num_rows; r++) {
let row = board.insertRow(r);
for(let c=0; c <= num_cells; c++) {
row.insertCell(c);
}
}
}
function make_move(click) {
let clickedCell = click.target.closest("td");
if (!clickedCell.dataset.sign) {
let currentSign = sign
if(sign=="circle") sign="cross"; else sign="circle";
clickedCell.dataset.sign = currentSign
clickedCell.appendChild(mark[currentSign].cloneNode(true))
curRow=clickedCell.parentNode.rowIndex;
curCol=clickedCell.cellIndex;
let five = checkFive(curRow, curCol, currentSign)
if(five.win) Win(currentSign, five.array);
}
supChannel.send({
type: 'broadcast',
event: 'move',
payload: { org: 'supabase' },
})
};
function checkFive(cRow, cCol, sign) {
let checkFive = {
"noInRow": 0,
"fiveArray": [],
set: (n) => {
checkFive.noInRow +=1;
checkFive.fiveArray.push(n)
},
clear: () => {
checkFive.noInRow = 0;
checkFive.fiveArray = []
}
}
const hFirst = Math.max(0,cCol-4);
const hLast = Math.min(num_cells, cCol+4);
const vFirst = Math.max(0,cRow-4);
const vLast = Math.min(num_rows, cRow+4);
// case 1: horizontal
for(let n=hFirst; n<=hLast; n+=1) {
if(board.rows[cRow].cells[n].dataset.sign==sign) checkFive.set([cRow,n])
else checkFive.clear()
if (checkFive.noInRow==5) return {"win": true, "array": checkFive.fiveArray};
};
// case 2: vertical
for(let n=vFirst; n<=vLast; n+=1) {
if(board.rows[n].cells[cCol].dataset.sign==sign) checkFive.set([n,cCol])
else checkFive.clear()
if (checkFive.noInRow==5) return {"win": true, "array": checkFive.fiveArray};
};
// case 3: diagonal left
for(let n=hFirst, m=vFirst; n<=hLast && m<=vLast; n+=1, m+=1) {
if(board.rows[m].cells[n].dataset.sign==sign) checkFive.set([m,n])
else checkFive.clear()
if (checkFive.noInRow==5) return {"win": true, "array": checkFive.fiveArray};
};
// case 4: diagonal right
for(let n=hLast, m=vFirst; n>=hFirst && m<=vLast; n-=1, m+=1) {
if(board.rows[m].cells[n].dataset.sign==sign) checkFive.set([m,n])
else checkFive.clear()
if (checkFive.noInRow==5) return {"win": true, "array": checkFive.fiveArray};
};
return {"win": false}
}
function Win(sign, array) {
array.forEach(cell => {
board.rows[cell[0]].cells[cell[1]].style.backgroundColor = "rgba(255,0,0,0.3)"
})
setTimeout(() => {
alert(`${sign} wins!!!`);
}, 300);
}