forked from floatinghotpot/gomoku
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gomoku.html
executable file
·105 lines (96 loc) · 11.3 KB
/
gomoku.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/icon.png" />
<link rel="icon" type="image/png" href="images/icon.png" />
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="images/splash_iPad_portrait.png" />
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="images/splash_iPad_landscape.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset='utf-8'>
<title>Gomoku</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="style/style.css" />
<script id="aiworker" type="javascript/worker">
function mapPoint(t,e){this.r=t,this.c=e,this.set=!1,this.score=0,this.valid=!1,this.info=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]}function bufToString(){return String.fromCharCode.apply(null,boardBufArr)}self.addEventListener("message",function(t){switch(t.data.type){case"ini":ai.ini(t.data.mode,t.data.color);break;case"watch":ai.watch(t.data.r,t.data.c,t.data.color);break;case"compute":ai.move();break;case"show_me":postMessage(ai.map)}}),mc=0,ai={},ai.sum=0,ai.setNum=0,ai.scoreMap=[],ai.scorequeue=[],ai.map=[];for(var i=0;15>i;i++){for(var tmp=[],j=0;15>j;j++){var a=new mapPoint(i,j);tmp.push(a),ai.scorequeue.push(a)}ai.map.push(tmp)}boardBuf=new ArrayBuffer(255),boardBufArr=new Uint8Array(boardBuf),ai.ini=function(t,e){switch(this.color=e,this.otc="black"==e?"white":"black",t){case"test":this.move=function(){postMessage({type:"decision",r:this.scorequeue[0].r,c:this.scorequeue[0].c})};case"novice":this.depth=3,this.totry=[30,30];break;case"medium":this.depth=5,this.totry=[12,8];break;case"expert":this.depth=7,this.totry=[10,10];break;default:postMessage({type:"ini_error",reason:t+" not supported"})}postMessage({type:"ini_complete"})},ai.watch=function(t,e,a){this.updateMap(t,e,a),"remove"==a?this.setNum--:this.setNum++,this.scorequeue.sort(this.sortMove),postMessage({type:"watch_complete"})},ai.updateMap=function(t,e,a){var o,i=!1;return a==this.color?o=1:a==this.otc?o=0:(i=!0,o=this.map[t][e].set-1),this._updateMap(t,e,o,i)},ai.moves=[[-1,-1],[-1,0],[0,-1],[-1,1]],ai.coe=[-2,1],ai.scores=[0,1,10,2e3,4e3,1e11],ai._updateMap=function(t,e,a,o){var i,n,r,s,c,h,u,l,m,f=this.moves,p=this.coe,d=this.scores,g=4,v=0;if(o)for(boardBufArr[15*t+e]=0,this.map[t][e].set=!1;g--;)for(i=t,n=e,r=5;r--&&i>=0&&n>=0&&15>n;)if(c=i-4*f[g][0],h=n-4*f[g][1],c>=15||0>h||h>=15)i+=f[g][0],n+=f[g][1];else{u=this.map[i][n].info[g];var w=0;if(u[a]--,u[2]>0){for(s=5,c=i,h=n,l=d[u[2]],v-=l*u[3];s--;)this.map[c][h].score-=l,c-=f[g][0],h-=f[g][1];u[2]--,u[a]>0&&(w=1)}else u[1-a]>0&&!u[a]&&(w=-1);if(1===w)for(s=5,l=d[u[2]],c=i,h=n,v+=l*u[3];s--;)this.map[c][h].score+=l,c-=f[g][0],h-=f[g][1];else if(-1===w)for(u[2]=u[1-a],s=5,l=d[u[2]],u[3]=p[1-a],c=i,h=n,v+=l*u[3];s--;)this.map[c][h].score+=l,c-=f[g][0],h-=f[g][1];i+=f[g][0],n+=f[g][1]}else for(boardBufArr[15*t+e]=a+2,this.map[t][e].set=a+1;g--;)for(i=t,n=e,r=5;r--&&i>=0&&n>=0&&15>n;)if(c=i-4*f[g][0],h=n-4*f[g][1],c>=15||0>h||h>=15)i+=f[g][0],n+=f[g][1];else{if(u=this.map[i][n].info[g],u[2]>0)for(s=5,c=i,h=n,l=d[u[2]],v-=l*u[3];s--;)this.map[c][h].score-=l,c-=f[g][0],h-=f[g][1];if(u[a]++,u[1-a]>0)u[2]=0;else for(u[2]=u[a],m=p[a],u[3]=m,l=d[u[2]],s=5,c=i,h=n,v+=l*u[3];s--;)this.map[c][h].score+=l,c-=f[g][0],h-=f[g][1];i+=f[g][0],n+=f[g][1]}this.sum+=v},ai.simulate=function(t,e,a){this.setNum++,this._updateMap(t,e,a,!1)},ai.desimulate=function(t,e,a){this._updateMap(t,e,a,!0),this.setNum--},ai.sortMove=function(t,e){return t.set?1:e.set?-1:t.score<e.score?1:-1},ai.cache={},ai.nega=function(t,e,a,o,i){var n=(this.map[t][e].info,4),r=a%2;this.simulate(t,e,r);var s=bufToString();if(this.cache[s])return this.cache[s];if(Math.abs(this.sum)>=1e7)return-1/0;if(225===this.setNum)return 0;if(0===a)return this.sum;this.scorequeue.sort(this.sortMove);for(var c,n=this.totry[r],h=[],u=i;n--;)c=this.scorequeue[n],c.set||(h.push(c.c),h.push(c.r));a-=1,n=h.length-1,t=h[n],e=h[--n];var l=-this.nega(t,e,a,-u,-o);if(this.desimulate(t,e,a%2),l>o&&(s=bufToString(),this.cache[s]=l,o=l),o>=i)return s=bufToString(),this.cache[s]=i,o;for(u=o+1;n--;){if(t=h[n],e=h[--n],l=-this.nega(t,e,a,-u,-o),this.desimulate(t,e,a%2),l>o&&i>l&&(l=-this.nega(t,e,a,-i,-o),this.desimulate(t,e,a%2)),l>o&&(o=l),o>=i)return o;u=o+1}return o},ai.move=function(){ai.cache={},postMessage({type:"starting"});for(var t,e=-1/0,a=1/0,o=[this.scorequeue[0].r,this.scorequeue[0].c],i=20,n=[],r=this.depth;i--;)t=this.scorequeue[i],t.score.set||(n.push(t.c),n.push(t.r));i=n.length-1;var s,c,h=a;s=n[i],c=n[--i];var u=-this.nega(s,c,r,-h,-e);for(this.desimulate(s,c,r%2),u>e&&(e=u,o=[s,c]),h=e+1;i--;)s=n[i],c=n[--i],u=-this.nega(s,c,r,-h,-e),this.desimulate(s,c,r%2),u>e&&a>u&&(u=-this.nega(s,c,r,-a,-e),this.desimulate(s,c,r%2)),u>e&&(e=u,o=[s,c]),h=e+1;postMessage({type:"decision",r:o[0],c:o[1]})};
</script>
<script src="js/j42r.js"></script>
<script src="js/I18N/en.js"></script>
<script src="js/I18N/zh.js"></script>
<script src="js/I18N/ja.js"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body ontouchstart="">
<div class="fullscreen-wrapper" id="happy-outer"> <img src="images/happy.png" class="happy-face screen-center" /> </div>
<div class="fullscreen-wrapper" id="sad-outer"> <img src="images/sad.png" class="sad-face screen-center" /> </div>
<div id="game-won" data-theme="e" data-role="dialog">
<div data-role="header"> <h4 class="I18N">gamewon.win</h4> </div>
<div data-role="content">
<div id="win-content" class="I18N">gamewon.again</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a href="#game-page" data-rel="dialog" data-role="button"><span class="I18N">newgame.back</span></a> </div>
<div class="ui-block-b"><a href="#new-game" data-rel="dialog" data-role="button"><span class="I18N">gamewon.startnew</span></a> </div>
</fieldset>
</div>
</div>
<div id="new-game" data-theme="e" data-role="dialog">
<div data-role="header"> <h4 class="I18N">game.gomoku</h4> </div>
<div data-role="content" style="background:url(style/woodfloor.jpg)">
<fieldset data-role="controlgroup" data-theme="e" id="mode-select"> <table border=0 width="100%"><tr><td width="50%" align="center"><h2 class="I18N">newgame.with</h1></td><td align="right">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="vshuman" /> <label for="radio-choice-1" id="msg-human" class="I18N">newgame.human</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="vscomputer" /> <label for="radio-choice-2" class="I18N">newgame.computer</label></td></tr></table>
</fieldset>
<fieldset data-role="controlgroup" data-theme="e" id="color-select" class="vs-computer"> <table border=0 width="100%"><tr><td width="50%" align="center"><h2 class="I18N">newgame.color</h2></td><td align="right">
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="black" data-theme="a" /> <label for="radio-choice-2" class="I18N">newgame.black</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="white" data-theme="c" /> <label for="radio-choice-1" class="I18N">newgame.white</label></td></tr></table>
</fieldset>
<fieldset data-role="controlgroup" data-theme="e" id="level-select" class="vs-computer"> <table border=0 width="100%"><tr><td width="50%" align="center"><h2 class="I18N">newgame.level</h2></td><td align="right">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="novice" /> <label for="radio-choice-1" class="I18N">newgame.novice</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="medium" /> <label for="radio-choice-2" class="I18N">newgame.medium</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="expert" /> <label for="radio-choice-3" class="I18N">newgame.expert</label></td></tr></table>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" class="back-to-game I18N" data-theme="c">newgame.back</button></div>
<div class="ui-block-b"><button type="submit" id="start-game" data-theme="b" class="I18N">newgame.start</button></div>
</fieldset>
</div>
</div>
<div data-role="dialog" data-theme="e" id="help-page">
<div data-role="header"> <h4 class="I18N">game.gomoku</h4> </div>
<div data-role="content" class="thin-content">
<p><img src="images/icon.png" width="96" style="float:right;"><span class="I18N">help.design</span><br/><span class="I18N">help.development</span><br/></p>
<p class="I18N">help.enjoy</p>
<p><span class="I18N">help.ad</span><span class="I18N">help.welcome</span></p>
<p><span class="I18N">help.website</span><br/>
<span class="I18N">help.email</span><br/>
<span class="I18N">help.twitter</span>
</p>
</div>
</div>
<div data-role="page" data-theme="w" id="game-page" class="no-background">
<div data-role="content" class="center no-padding">
<div id="game-region">
<header class="game-ult I18N">game.gomoku</header>
<div id="main-but-group" class="game-ult">
<a href="#new-game" data-rel="dialog" data-role="button" data-icon="grid" onclick="AUD.move();"><span class="I18N">game.new</span></a>
<a href="#" id="undo-button" data-icon="back" data-role="button" onclick="AUD.move();"><span class="I18N">game.undo</span></a>
</div>
<div id="game-info" class="game-ult ui-bar"> <span class="go black"></span> <span class="cont I18N">game.yourturn</span> </div>
<div id="other-but-group" class="game-ult">
<a href="#help-page" id="help-button" data-icon="star" data-role="button" onclick="AUD.move();"><span class="I18N">game.about</span></a>
</div>
<div class="go-board" data-enhance="false"> </div>
<table class="board" data-enhance="false"> <tbody> </tbody>
</table>
</div>
</div>
</div>
<audio id="aud_move" src="audio/move.mp3" type="audio/mp3"></audio>
<audio id="aud_happy" src="audio/happy.mp3" type="audio/mp3"></audio>
<audio id="aud_sad" src="audio/sad.mp3" type="audio/mp3"></audio>
</body>
</html>