-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
90 lines (85 loc) · 4.56 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Four in a Line</title>
<style type="text/CSS">
html, body {
margin:0px;
}
#board {
background-color:#0000FF;
margin:15px auto;
padding:0px;
width:700px;
height:600px;
overflow:auto;
border-radius:15px;
border-width:5px;
border-color:white;
border-style:solid;
}
.cell {
float:left;
width:80px;
height:80px;
margin:10px;
padding:0px;
border-radius:50%;
}
#pos {
position:absolute;
left:0px;
top:0px;
width:200px;
padding:20px;
margin:0px auto;
text-align:center;
font-size:20px;
}
#pos label {
display:block;
margin-top:20px;
font-size:19px;
}
#pos label input {
transform:scale(1.2);
}
#message {
display:inline;
font-family:sans-serif;
font-size:25px;
margin-top:10px;
}
@media screen and (max-width: 1100px) {
#pos {
position:static;
padding:0px;
width:100%;
}
button {
font-size:35px;
}
#message {
font-size:40px;
}
}
</style>
<script type="text/JavaScript">
function g(){this.a=[[],[],[],[],[],[],[]]}g.prototype.play=function(a,d){var c=this.a[a];if(6<=c.length)return!1;c.push(d);return!0};function k(a,d){var c=a.a[d];if(!(0<c.length))throw Error().stack;c.pop()}function l(a){for(var d=document.getElementById("board"),c=0;7>c;c++)for(var b=a.a[c],e=0;6>e;e++){var f=d.childNodes[c+7*(5-e)].style;if(b.length>e){var h=b[e];if(1!=h&&0!=h)throw Error().stack;h=h?"yellow":"red"}else h="black";f.backgroundColor=h}}
var m=new function(){var a=0,d=null,c=0,b=0,e=0,f=0;this.g=function(b){3==b?this.check():b==d?a+=1:(this.check(),d=b,a=1)};this.check=function(){4<=a?0==d?e+=1:1==d&&(f+=1):3==a&&(0==d?c+=1:1==d&&(b+=1));a=0};this.reset=function(){a=0;d=null;f=e=b=c=0};this.b=function(b,a,c){this.g(b[a][c])};this.result=function(){return{h:c,i:b,c:e,f:f}}};
function n(a){m.reset();for(var d=0;6>d;d++){for(var c=0;7>c;c++)m.b(a.a,c,d);m.check()}for(c=0;7>c;c++){var b=a.a[c].length;for(d=0;d<b;d++)m.b(a.a,c,d);m.check()}for(d=3;0<=d;d--){for(b=0;b<6-d;b++)m.b(a.a,b,d+b);m.check()}for(c=1;4>c;c++){for(b=0;b<7-c;b++)m.b(a.a,c+b,b);m.check()}for(d=3;0<=d;d--){for(b=0;b<6-d;b++)m.b(a.a,6-b,d+b);m.check()}for(c=5;2<=c;c--){for(b=0;b<c+1;b++)m.b(a.a,c-b,b);m.check()}return m.result()}g.prototype.evaluate=function(){var a=n(this);return 1E3*(a.c-a.f)+a.h-a.i};
function p(a){a=n(a);return 1<=a.c?"red":1<=a.f?"yellow":!1}function q(a,d,c){if(0==c||p(a)){var b=a.evaluate();return b}if(0==d){for(var e=null,f=0;7>f;f++)if(b=a.play(f,d)){b=q(a,Number(!d),c-1);if(null==e||b>e)e=b;k(a,f)}return e}e=null;for(f=0;7>f;f++)if(b=a.play(f,d)){b=q(a,Number(!d),c-1);if(null==e||b<e)e=b;k(a,f)}return e}function r(a){for(var d=null,c=null,b=0;7>b;b++)if(a.play(b,0)){var e=q(a,Number(!0),6);if(null==c||e>c)c=e,d=b;k(a,b)}a.play(d,0)}
function t(a){return Object.freeze({x:a.x-(document.body.clientWidth-700)/2,y:a.y-15})}
function u(a){function d(){var d=p(b);return d?(l(b),c.textContent="The game finished! Congratulations "+("yellow"==d?"user.":"computer."),a.style.borderColor=d,f=!0):!1}var c=document.getElementById("message"),b=new g,e=!0,f=!1;return function(a){!f&&e&&(e=!1,a=t({x:a.clientX,y:a.clientY}),b.play(Math.floor(a.x/100),1)&&(c.innerHTML="Turn: computer",l(b),setTimeout(function(){d(c)||(l(b),r(b),c.innerHTML="Turn: user",d(c)||l(b));setTimeout(function(){e=!0},50)},50)))}}
window.onload=function(){for(var a=document.getElementById("board"),d=0;42>d;d++){var c=document.createElement("div");c.className="cell";c.style.backgroundColor="#000";a.appendChild(c)}a.addEventListener("click",u(a))};
</script>
</head>
<body>
<div id="board"></div>
<div id="pos">
<button onclick="location.reload()">Clear game</button>
<br /><br />
<div id="message">Turn: user</div>
</div>
</body>
</html>