Skip to content

Commit f95e88b

Browse files
regalhotpocketsamuelgoto
regalhotpocket
authored and
samuelgoto
committed
new ch5 wip (#163)
1 parent 350c0da commit f95e88b

21 files changed

+2505
-638
lines changed

‎5-Adversarial-Search/alphaBeta.js‎

Lines changed: 80 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,85 @@
1-
// Code for Alpha Beta Pruning
2-
function ALPHA_BETA_SEARCH(state) {
3-
var largest_value = MAX_VALUE(state, 0, Number.MAX_SAFE_INTEGER);
4-
var action_list = actions(state);
5-
for (var action = 0; action < action_list.length; i++) {
6-
if (largest_value == utillity(RESULT(state, action_list[action]))) {
7-
return action_list[action];
1+
function alphabeta() {
2+
let cur = abstates
3+
let scale = 600
4+
let div = document.getElementById("alphabetaCanvas")
5+
let canvas = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
6+
canvas.setAttribute('viewBox', '0 0 ' + scale + ' ' + scale*0.30 + ' ')
7+
div.appendChild(canvas)
8+
let tree = new Tree(new Board([0,0,-1,1,0,0,1,-1,1], -1), 5)
9+
equip_graphics(tree, 0, scale, 12, 5, canvas)
10+
11+
function setup(tree, depth) {
12+
let color = 'hsl(0,0%,50%)'
13+
for (let i = 0; i < 9; i++) {
14+
tree.graphic.cross_marks[i].setAttribute('stroke', color)
15+
tree.graphic.circle_marks[i].setAttribute('stroke', color)
16+
}
17+
tree.graphic.rect.setAttribute('stroke', color)
18+
tree.graphic.l1.setAttribute('stroke', color)
19+
tree.graphic.l2.setAttribute('stroke', color)
20+
tree.graphic.l3.setAttribute('stroke', color)
21+
tree.graphic.l4.setAttribute('stroke', color)
22+
if (depth == 0)
23+
return
24+
for (let i = 0; i < tree.children.length; i++) {
25+
setup(tree.children[i], depth-1)
26+
tree.branches[i].setAttribute('stroke', color)
827
}
928
}
10-
}
11-
function MAX_VALUE(state, alpha, beta) {
12-
if (terminal(state))
13-
return utillity(state);
14-
var largest_value = 0;
15-
var action_list = actions(state);
16-
for (var action = 0; action < action_list.length; action++) {
17-
largest_value = Math.max(largest_value, MIN_VALUE(RESULT(state, action_list[action]), alpha, beta));
18-
if (largest_value >= beta)
19-
return largest_value;
20-
alpha = Math.max(alpha, smallest_value);
29+
setup(tree, 100)
30+
function reset(tree, depth, opacity) {
31+
tree.graphic.group.setAttribute('opacity', opacity)
32+
tree.graphic.message.setAttribute('class', 'board_status')
33+
if (depth == 0)
34+
return
35+
for (let i = 0; i < tree.children.length; i++) {
36+
reset(tree.children[i], depth-1, opacity)
37+
tree.branches[i].setAttribute('opacity', opacity)
38+
}
2139
}
22-
return largest_value;
23-
}
24-
function MIN_VALUE(state, alpha, beta) {
25-
if (terminal(state))
26-
return utillity(state);
27-
var smallest_value = Number.MAX_SAFE_INTEGER;
28-
var action_list = actions(state);
29-
for (var action = 0; action < action_list.length; action++) {
30-
smallest_value = Math.min(smallest_value, MAX_VALUE(RESULT(state, action_list[action]), alpha, beta));
31-
if (smallest_value <= alpha)
32-
return smallest_value;
33-
beta = Math.min(beta, smallest_value);
40+
41+
function apply_state(state) {
42+
reset(tree, 100, 0.2)
43+
for (let i = 0; i < state.length; i++) {
44+
let s = tree.search(state[i][0])
45+
s.graphic.group.setAttribute('opacity', 1)
46+
if (s.pbranch != undefined)
47+
s.pbranch.setAttribute('opacity', 1)
48+
switch(state[i][1]) {
49+
case null:
50+
break
51+
case 0:
52+
s.graphic.message.innerHTML = "X Won"
53+
s.graphic.message.setAttribute('class', 'cross_status board_status_active')
54+
break
55+
case 1:
56+
s.graphic.message.innerHTML = "Draw"
57+
s.graphic.message.setAttribute('class', 'draw_status board_status_active')
58+
break
59+
case 2:
60+
s.graphic.message.innerHTML = "O Won"
61+
s.graphic.message.setAttribute('class', 'circle_status board_status_active')
62+
break
63+
}
64+
65+
}
66+
}
67+
68+
let range = document.getElementById("alphabetaRange")
69+
70+
range.addEventListener("input", ()=> { apply_state(cur[parseInt(range.value)])}, false)
71+
range.max = abstates.length-1
72+
let select = document.getElementById("alphabetaSelect")
73+
select.onchange = ()=> {
74+
switch(select.value) {
75+
case '1': cur = abstates; break
76+
case '2': cur = abstatesR; break
77+
case '3': cur = states; break
78+
}
79+
range.max = cur.length-1
80+
range.value = 0
81+
apply_state(cur[0])
3482
}
35-
return smallest_value;
83+
84+
apply_state(abstates[0])
3685
}

‎5-Adversarial-Search/banner.js‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
function sleep(ms) {
2+
return new Promise(resolve => setTimeout(resolve, ms))
3+
}
4+
5+
function banner() {
6+
let fps = 17
7+
let canvas = document.getElementById("banner")
8+
let w = 5
9+
let cw = 300
10+
let ch = 90
11+
let nc = 'hsl(0, 0%, 30%)'
12+
let bc = 'hsl(0, 0%, 20%)'
13+
let tc = 'hsl(0, 0%, 30%)'
14+
function makeNode(cx, cy, id) {
15+
let g = document.createElementNS("http://www.w3.org/2000/svg", 'g')
16+
canvas.appendChild(g)
17+
g.setAttribute('class', 'node')
18+
19+
let b = document.createElementNS("http://www.w3.org/2000/svg", 'rect')
20+
g.appendChild(b)
21+
22+
b.setAttribute('x', cx-w/2)
23+
b.setAttribute('y', cy-w/2)
24+
b.setAttribute('width', w)
25+
b.setAttribute('height', w)
26+
27+
let node = {}
28+
node.element = g
29+
node.x = cx
30+
node.y = cy
31+
node.children = []
32+
node.parent = undefined
33+
node.active = false
34+
node.responces = 0
35+
node.propagate = async ()=>{
36+
return new Promise(async resolve => {
37+
if (node.active == false) {
38+
node.active = true
39+
g.setAttribute('class', '')
40+
let result = []
41+
for(let i = 0; i < node.children.length; i++) {
42+
result.push(node.children[i]())
43+
}
44+
await Promise.all(result)
45+
}
46+
else {
47+
while(node.active == true){
48+
await sleep(500)
49+
}
50+
}
51+
g.setAttribute('class', 'node')
52+
resolve()
53+
})
54+
}
55+
b.onmouseover = node.propagate
56+
return node
57+
}
58+
function makeBranch(from, to) {
59+
if (to.parent != undefined)
60+
throw to + " already has a parent";
61+
let x1 = from.x
62+
let y1 = from.y
63+
let x2 = to.x
64+
let y2 = to.y
65+
let mag = Math.sqrt(Math.pow((x2-x1), 2) + Math.pow((y2-y1), 2))
66+
let xn = (x2-x1)/mag
67+
let yn = (y2-y1)/mag
68+
let line = document.createElementNS("http://www.w3.org/2000/svg", 'line')
69+
line.setAttribute('x1', x1+xn*w/2)
70+
line.setAttribute('y1', y1+yn*w/2)
71+
line.setAttribute('x2', x2-xn*w/2)
72+
line.setAttribute('y2', y2-yn*w/2)
73+
line.setAttribute('stroke', bc)
74+
line.setAttribute('stroke-width', '0.1')
75+
76+
let circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle')
77+
78+
circle.setAttribute('cx', x1)
79+
circle.setAttribute('cy', y1)
80+
circle.setAttribute('r', '0')
81+
circle.setAttribute('stroke', tc)
82+
circle.setAttribute('stroke-width', '1')
83+
circle.setAttribute('fill', tc)
84+
85+
canvas.appendChild(line)
86+
canvas.appendChild(circle)
87+
88+
async function propagate() {
89+
return new Promise(async resolve => {
90+
circle.setAttribute('r', '1')
91+
let curx = x1
92+
let cury = y1
93+
94+
while(Math.sqrt(Math.pow((x2-curx), 2) + Math.pow((y2-cury), 2)) > 1) {
95+
curx += xn*1
96+
cury += yn*1
97+
circle.setAttribute('cx', curx)
98+
circle.setAttribute('cy', cury)
99+
await sleep(fps)
100+
}
101+
102+
if (to.children.length != 0) {
103+
circle.setAttribute('r', '0')
104+
await to.propagate()
105+
circle.setAttribute('r', '1')
106+
107+
}
108+
while(Math.sqrt(Math.pow((x1-curx), 2) + Math.pow((y1-cury), 2)) > 1) {
109+
curx -= xn*1
110+
cury -= yn*1
111+
circle.setAttribute('cx', curx)
112+
circle.setAttribute('cy', cury)
113+
await sleep(fps)
114+
}
115+
circle.setAttribute('r', '0')
116+
from.active = false
117+
resolve()
118+
})
119+
}
120+
from.children.push(propagate)
121+
}
122+
function makeTree(lx, ux, y, inc, d, b, c) {
123+
if (0 == d)
124+
return undefined;
125+
126+
127+
let parent = makeNode((ux - lx)/2 + lx, y)
128+
for(let i = 0; i < b; i++) {
129+
130+
let child = makeTree((ux - lx)/b*(i+1)+lx, (ux - lx)/b*i+lx, y - inc, inc*1.3, d-1, (c == true ? 2 : b-1), (c == false && b == 3 ? true : false))
131+
if (child != undefined) {
132+
makeBranch(parent, child)
133+
}
134+
}
135+
136+
return parent
137+
}
138+
makeTree(0, cw, ch-w, 10, 6, 4, false)
139+
140+
function makeText() {
141+
let textele = document.createElementNS('http://www.w3.org/2000/svg','text')
142+
let textnode = document.createTextNode("Adversarial Search")
143+
textele.setAttribute('x', '150')
144+
textele.setAttribute('y', '50')
145+
textele.setAttribute('alignment-baseline', 'middle')
146+
textele.setAttribute('text-anchor', 'middle')
147+
textele.setAttribute('id', 'htext')
148+
textele.appendChild(textnode)
149+
canvas.appendChild(textele)
150+
}
151+
152+
makeText()
153+
let state = true
154+
let brk = 1.5
155+
function resize(){
156+
if(state) {
157+
if (window.innerWidth / window.innerHeight < brk) {
158+
state = false
159+
canvas.setAttribute("viewBox", "100 15 100 75")
160+
canvas.removeChild(document.getElementById("htext"));
161+
makeText()
162+
}
163+
}
164+
else {
165+
if (window.innerWidth / window.innerHeight >= brk) {
166+
state = true
167+
canvas.setAttribute("viewBox", "0 0 300 90")
168+
}
169+
}
170+
171+
}
172+
window.addEventListener("resize", resize)
173+
resize()
174+
175+
}

‎5-Adversarial-Search/bigtree.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
function bigtree() {
2+
let scale = 600
3+
let div = document.getElementById("bigtreeCanvas")
4+
let canvas = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
5+
canvas.setAttribute('viewBox', '0 0 ' + scale + ' ' + scale*0.30 + ' ')
6+
div.appendChild(canvas)
7+
let tree = new Tree(new Board([0,0,-1,1,0,0,1,-1,1], -1), 5)
8+
equip_graphics(tree, 0, scale, 12, 5, canvas)
9+
10+
function setup(tree, depth) {
11+
let color = 'hsl(0,0%,50%)'
12+
for (let i = 0; i < 9; i++) {
13+
tree.graphic.cross_marks[i].setAttribute('stroke', color)
14+
tree.graphic.circle_marks[i].setAttribute('stroke', color)
15+
}
16+
tree.graphic.rect.setAttribute('stroke', color)
17+
tree.graphic.l1.setAttribute('stroke', color)
18+
tree.graphic.l2.setAttribute('stroke', color)
19+
tree.graphic.l3.setAttribute('stroke', color)
20+
tree.graphic.l4.setAttribute('stroke', color)
21+
if (depth == 0)
22+
return
23+
for (let i = 0; i < tree.children.length; i++) {
24+
setup(tree.children[i], depth-1)
25+
tree.branches[i].setAttribute('stroke', color)
26+
}
27+
}
28+
setup(tree, 100)
29+
function reset(tree, depth, opacity) {
30+
tree.graphic.group.setAttribute('opacity', opacity)
31+
tree.graphic.message.setAttribute('class', 'board_status')
32+
if (depth == 0)
33+
return
34+
for (let i = 0; i < tree.children.length; i++) {
35+
reset(tree.children[i], depth-1, opacity)
36+
tree.branches[i].setAttribute('opacity', opacity)
37+
}
38+
}
39+
40+
function apply_state(state) {
41+
reset(tree, 100, 0.2)
42+
for (let i = 0; i < state.length; i++) {
43+
let s = tree.search(state[i][0])
44+
s.graphic.group.setAttribute('opacity', 1)
45+
if (s.pbranch != undefined)
46+
s.pbranch.setAttribute('opacity', 1)
47+
switch(state[i][1]) {
48+
case null:
49+
s.graphic.message.innerHTML = (s.board.turn == -1 ? "X Turn" : "O Turn")
50+
s.graphic.message.setAttribute('class', 'undecided_status board_status_active')
51+
break
52+
case 0:
53+
s.graphic.message.innerHTML = "X Won"
54+
s.graphic.message.setAttribute('class', 'cross_status board_status_active')
55+
break
56+
case 1:
57+
s.graphic.message.innerHTML = "Draw"
58+
s.graphic.message.setAttribute('class', 'draw_status board_status_active')
59+
break
60+
case 2:
61+
s.graphic.message.innerHTML = "O Won"
62+
s.graphic.message.setAttribute('class', 'circle_status board_status_active')
63+
break
64+
case 4:
65+
s.graphic.group.setAttribute('opacity', '0.0')
66+
s.pbranch.setAttribute('opacity', '0.0')
67+
break
68+
}
69+
70+
}
71+
}
72+
73+
let range = document.getElementById("bigtreeRange")
74+
range.max = states.length-1
75+
range.addEventListener("input", ()=> { apply_state(states[parseInt(range.value)])}, false)
76+
77+
apply_state(states[0])
78+
}

0 commit comments

Comments
 (0)