-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
157 lines (149 loc) · 6.83 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<title>KUROMA</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="theme-color" content="#2c292d" />
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:900&subset=japanese" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="kuroma.css" rel="stylesheet">
<link rel="icon" type="image/png" href="favicontr.png" sizes="32x32">
<script src="anime.js"></script>
<script src="helpers.js"></script>
<script src="ai.js"></script>
<script src="view.js"></script>
<script src="kuroma.js"></script>
</head>
<body class="unselectable" onload="initMazeHTML();">
<div class="header headerA">黒馬</div>
<div class="header headerB" id="game">黒馬</div>
<div class="header headerC">黒馬</div>
<div class="title titleA">KUROMA</div>
<div class="title titleB">KUROMA</div>
<div class="panelMainMenu">
<div class="newGame hoverable" onClick="initMaze();">New Game</div>
<div class="gameModes">
<div>
<span style="float:left" id="zen" class="aiCategory active">ZEN_</span>
<span style="float:right" id="vs" class="aiCategory">_VS</span>
</div>
<div>
<span style="float:left" id="zenself" class="aiButton active" onclick="setVSSelf()">1 Player</span>
<span style="float:right" id="vsother" class="aiButton" onclick="setVSOther()">2 Player</span>
</div>
<div>
<span style="float:left" id="zenmaster" class="aiButton" onclick="setVSAI('zenmaster')">AI:Master</span>
<span style="float:right" id="vsronin" class="aiButton" onclick="setVSAI('vsronin')">Ronin:AI</span>
</div>
<div>
<span style="float:left" id="zenmonk" class="aiButton" onclick="setVSAI('zenmonk')">AI:Monk</span>
<span style="float:right" id="vssamurai" class="aiButton" onclick="setVSAI('vssamurai')">Samurai:AI</span>
</div>
<div>
<span style="float:left" id="zendrunk" class="aiButton" onclick="setVSAI('zendrunk')">AI:Drunk</span>
<span style="float:right" id="vsninja" class="aiButton" onclick="setVSAI('vsninja')">Ninja:AI</span>
</div>
</div>
<div class="gameOptions">
<div>
<div style="float:left" id="helpButton" class="hoverable menuButton material-icons" onClick="clickHelp()">help_outline</div>
<div class="hoverable menuButton material-icons" onclick="view.enterFullscreen()">fullscreen</div>
<div style="float:right" class="hoverable warning menuButton material-icons" onClick="clickReset()">settings_backup_restore</div>
</div>
</div>
</div>
<div class="panelGame">
<div class="wrapper" id="maze">
<!-- <div class="box" id="xx" onClick="playerClick(xx)"></div> -->
</div>
<div class="help" id="help" style="display: none" onClick="clickHelp()">
<p>KUROMA_ Jump over the board like a chess horse. Do not jump twice to the same square.</p>
<p>ZEN_ Try to jump as much as possible. Please play with AI to guide you and challenge you. </p>
<p>VS_ Force a position where the opponent can not jump.
Play against other people and AI. Each AI has its own strategy that is not ranked by difficulty level.</p>
<p>To reset score, click <span class="material-icons">settings_backup_restore</span></p>
<p>To display full screen, click <span class="material-icons">fullscreen</span></p>
</div>
</div>
<div class="panelStats">
<div class="stats" id="zenstats">
<div id="zenGameBanner">
<span style="float:left">>>></span>
<span style="float:center" id="zenScoreGame"></span>
<span style="float:right"><<<</span>
</div>
<div>
<span style="float:left" class="YOUstat">Score_</span>
<span style="float:right" class="YOUstat" id="scoreZEN"></span>
</div>
<div>
<span style="float:left">Games_</span>
<span style="float:right" id="gamesZEN"></span>
</div>
<div>
<span style="float:left">Max_</span>
<span style="float:right" id="maxZEN"></span>
</div>
<div>
<span style="float:left">Grade_</span>
<span style="float:right" id="gradeZEN"></span>
</div>
</div>
<div class="stats" id="computerstats" style="display: none">
<div id="computerGameBanner">
<span style="float:left">>>></span>
<span style="float:center" id="computerScoreGame"></span>
<span style="float:right"><<<</span>
</div>
<div>
<span style="float:left" class="YOUstat">YOU_ </span>
<span style="float:left" class="YOUstat" id="scoreYOUcomputer"></span>
<span style="float:right" class="CPUstat"> _CPU</span>
<span style="float:right" class="CPUstat" id="scoreCPUcomputer"></span>
</div>
<div>
<span style="float:left" id="winsYOUcomputer"></span>
<span style="float:center">_Wins_</span>
<span style="float:right" id="winsCPUcomputer"></span>
</div>
<div>
<span style="float:left" id="maxYOUcomputer"></span>
<span style="float:center">_Max_</span>
<span style="float:right" id="maxCPUcomputer"></span>
</div>
<div>
<span style="float:left">Grade_</span>
<span style="float:right" id="gradeVS"></span>
</div>
</div>
<div class="stats" id="otherstats" style="display: none">
<div id="otherGameBanner">
<span style="float:left">>>></span>
<span style="float:center" id="otherScoreGame"></span>
<span style="float:right"><<<</span>
</div>
<div>
<span style="float:left" class="YOUstat">YOU_ </span>
<span style="float:left" class="YOUstat" id="scoreYOUother"></span>
<span style="float:right" class="OTHERstat"> _YOU</span>
<span style="float:right" class="OTHERstat" id="scoreOTHERother"></span>
</div>
<div>
<span style="float:left" id="winsYOUother"></span>
<span style="float:center">_Wins_</span>
<span style="float:right" id="winsOTHERother"></span>
</div>
<div>
<span style="float:left" id="maxYOUother"></span>
<span style="float:center">_Max_</span>
<span style="float:right" id="maxOTHERother"></span>
</div>
<div>
<span style="float:left">Total_</span>
<span style="float:right" id="totalother"></span>
</div>
</div>
</div>
</body>
</html>