-
Notifications
You must be signed in to change notification settings - Fork 32
/
index.html
executable file
·134 lines (118 loc) · 5.5 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
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
129
130
131
132
133
134
<!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">
<title>Gomoku</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="style/w.min.css" />
<link rel='stylesheet' href='style/style.css' type='text/css'/>
<script src='js/Player.js' type='text/javascript'></script>
<script src='js/Board.js' type='text/javascript'></script>
<script src='js/Game.js' type='text/javascript'></script>
<script src='js/layout.js' type='text/javascript'></script>
<script src='js/interface.js' type='text/javascript'></script>
<script src='js/storage.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 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'>Gomoku</header>
<div id='game-info' class='game-ult ui-bar ui-bar-e'>
<span class='go black'></span>
<span class='cont'>Your turn.</span>
</div>
<div id='main-but-group' class='game-ult'>
<a href='#new-game' data-rel='dialog' data-role='button' data-icon="grid">New Game</a>
<a href='#' id='undo-button' data-icon="back" data-role='button' >Undo</a>
</div>
<div id='other-but-group' class='game-ult'>
<a href='#help-page' id='help-button' data-icon="star" data-role='button'>About</a>
</div>
<div class='go-board' data-enhance=false>
</div>
<table class='board' data-enhance=false>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div id='game-won' data-theme='e' data-role='dialog'>
<div data-role='header'>
<h4>You Win!</h4>
</div>
<div data-role='content'>
<div id='win-content'>
You have won the game! Play again?
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button class='back-to-game' data-theme='c'>Back</button></div>
<div class="ui-block-b">
<a href='#new-game' data-rel='dialog' data-role='button' data-icon="grid">
Start A New Game
</a>
</div>
</fieldset>
</div>
</div>
<div id='new-game' data-theme='e' data-role='dialog' class='long-dialog'>
<div data-role='header'>
<h4>New Game</h4>
</div>
<div data-role='content'>
<fieldset data-role="controlgroup" data-theme='e' id='mode-select'>
<legend>Play with</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="vshuman"/>
<label for="radio-choice-1">Human</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="vscomputer" />
<label for="radio-choice-2">Computer</label>
</fieldset>
<fieldset data-role="controlgroup" data-theme='e' id='color-select' class='vs-computer'>
<legend>Your Color</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="black" data-theme='a' />
<label for="radio-choice-2">Black</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="white" data-theme='c' />
<label for="radio-choice-1">White</label>
</fieldset>
<fieldset data-role="controlgroup" data-theme='e' id='level-select' class='vs-computer'>
<legend>Level Of Difficulty</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="novice" />
<label for="radio-choice-1">Novice</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="medium" />
<label for="radio-choice-2">Medium</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="expert" />
<label for="radio-choice-3">Expert</label>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button class='back-to-game' data-theme='c'>Back</button></div>
<div class="ui-block-b"><button id='start-game' data-theme='b'>Start</button></div>
</fieldset>
</div>
</div>
<div data-role='dialog' data-theme='e' id='help-page'>
<div data-role='header'>
<h4>About</h4>
</div>
<div data-role='content' class='thin-content'>
<p>I am Yujian and I made this game for fun. You can check out <a href='http://yjyao.com'>my website</a> for my other lame projects, or find out more about me. You can also read a bit more about this game <a href="http://yjyao.com/2012/06/gomoku-in-html5.html">here</a>. Or, install this game in Chrome and/or post your comments <a href="https://chrome.google.com/webstore/detail/ngbpiahelilpgbnonpjfaoegaigopepa">here</a>.</p>
<p>Also, have fun beating/get beaten by my AI!</p>
</div>
</div>
</body>
</html>