-
Notifications
You must be signed in to change notification settings - Fork 217
/
game.js
129 lines (121 loc) · 4.56 KB
/
game.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
function game(){
let tree = new Tree(new Board([0,0,0,0,0,0,0,0,0], 1), 100)
let clickable = true
let cross_marks = []
let circle_marks = []
let scale = 100
let bc1 = 'hsl(0,0%,20%)'
let width = 2
let div = document.getElementById("gameCanvas")
let canvas = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
canvas.setAttribute('style', 'width: 40%; float: right; margin: 0% 5% 5% 5%;')
div.appendChild(canvas)
canvas.setAttribute('viewBox', '0 0 ' + scale + ' ' + scale + ' ')
let textele = document.createElementNS('http://www.w3.org/2000/svg','text')
let textnode = document.createTextNode("Make a move!")
textele.setAttribute('x', '50%')
textele.setAttribute('y', '50%')
textele.setAttribute('alignment-baseline', 'middle')
textele.setAttribute('text-anchor', 'middle')
textele.setAttribute('id', 'wintext')
function draw_line(x1, y1, x2, y2) {
let l1 = document.createElementNS("http://www.w3.org/2000/svg", 'line')
canvas.appendChild(l1)
l1.setAttribute('x1', x1)
l1.setAttribute('y1', y1)
l1.setAttribute('x2', x2)
l1.setAttribute('y2', y2)
l1.setAttribute('stroke', bc1)
l1.setAttribute('stroke-width', width)
l1.setAttribute('stroke-linecap' , 'round')
}
async function reset() {
return new Promise(async (resolve) => {
textnode.nodeValue = (tree.board.gameState == 2 ? "X Wins" : "Draw")
await sleep(2000)
tree = new Tree(new Board([0,0,0,0,0,0,0,0,0], 1), 100)
for(let i = 0; i < 9; i++) {
cross_marks[i].setAttribute('class','')
circle_marks[i].setAttribute('class','')
}
textnode.nodeValue = ""
clickable = true
resolve('reset');
})
}
for(let i = 0; i < 9; i++) {
let button = document.createElementNS("http://www.w3.org/2000/svg", 'rect')
canvas.appendChild(button)
button.setAttribute('x', i%3*scale/3)
button.setAttribute('y', Math.floor(i/3)*scale/3)
button.setAttribute('width', scale/3)
button.setAttribute('height', scale/3)
button.setAttribute('stroke', 'none')
button.setAttribute('fill', 'hsl(60,5%,95%)')
button.setAttribute('style', 'cursor:pointer;')
let circle = document.createElementNS("http://www.w3.org/2000/svg", 'path')
canvas.appendChild(circle)
let r = scale/8
let place = "M " + (i%3*scale/3 + scale/6) + ", " + ((Math.floor(i/3)*scale/3) + (scale/6)) + " m " + (-1*r) + ", 0 a "+r+", "+r+" 0 1, 0 "+ ( 2 * r) + ", 0 a "+r+", "+r+" 0 1,0 " + ( -2 * r) + ",0"
circle.setAttribute('d', place)
circle.setAttribute('fill', 'none')
circle.setAttribute('stroke', 'hsl(120, 50%, 50%)')
circle.setAttribute('style', 'stroke-dasharray: 1000; stroke-dashoffset: 1000; pointer-events: none;')
circle.setAttribute('stroke-width', width)
circle_marks.push(circle)
let cross = document.createElementNS("http://www.w3.org/2000/svg", 'path')
canvas.appendChild(cross)
let off = 14
place = "M " + (i%3*scale/3 + scale/off) + ", " + (Math.floor(i/3)*scale/3 + scale/off) +" L " + ((i%3*scale/3) + scale/3 - scale/off) + ", " + (Math.floor(i/3)*scale/3 + scale/3 - scale/off)+" M " + (i%3*scale/3 + scale/3 - scale/off)+ " " + (Math.floor(i/3)*scale/3 + scale/off) +" L " + (i%3*scale/3 + scale/off) + " " + (Math.floor(i/3)*scale/3 + scale/3 - scale/off)
cross.setAttribute('d', place)
cross.setAttribute('stroke', 'hsl(0, 50%, 50%)')
cross.setAttribute('style', 'stroke-dasharray: 1000; stroke-dashoffset: 1000; pointer-events: none;')
cross.setAttribute('stroke-width', width)
cross_marks.push(cross)
button.onclick = async ()=> {
if (tree.board.tiles[i] != 0 || clickable == false) {
return;
}
clickable = false;
textnode.nodeValue = "";
let count = 0;
for(let j = 0; j < i; j++) {
if (tree.board.tiles[j] == 0) {
count++;
}
}
circle.setAttribute('class','gameapp')
tree = tree.children[count];
//console.log(tree.board.gameState)
if(tree.board.gameState != 0) {
await reset()
return
}
let move = tree.best();
let location = 0
count = -1;
for(let j = 0; j < 9; j++) {
if (tree.board.tiles[j] == 0)
count++;
if(count == move) {
location = j;
break
}
}
await sleep(1000)
cross_marks[location].setAttribute('class','gameapp')
tree = tree.children[move];
//console.log(tree.board.gameState);
if(tree.board.gameState != 0) {
await reset()
}
clickable = true
}
}
draw_line(scale/3, width/2, scale/3, scale-width/2)
draw_line(scale/3*2, width/2, scale/3*2, scale-width/2)
draw_line(width/2, scale/3, scale-width/2, scale/3)
draw_line(width/2, scale/3*2, scale-width/2, scale/3*2)
textele.appendChild(textnode)
canvas.appendChild(textele)
}