forked from irori/blokus
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblokus_m.html
98 lines (90 loc) · 3.97 KB
/
blokus_m.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
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320">
<meta name="description" content="Blokus Duo is a board game for two players. You can play against the computer in three levels of difficulty.">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="icon/blokus-120x120.png" type="image/png">
<link rel="icon" href="icon/blokus-120x120.png" type="image/png">
<link rel="stylesheet" href="css/blokus_m.css" type="text/css">
<link rel="stylesheet" href="css/navigation.css" type="text/css">
<title>Blokus Duo</title>
</head>
<body onload="init()">
<div id="handler">
<div id="handlerDownIcon"></div>
</div>
<div id="toolbar" class="closed">
<ul>
<li><button id="reloadButton"></button></li>
<li><button id="helpButton"></button></li>
</ul>
<ul>
<li><button id="closeButton"></button></li>
</ul>
</div>
<div id="board">
<div class="vgrid" style="left: 20px"></div>
<div class="vgrid" style="left: 40px"></div>
<div class="vgrid" style="left: 60px"></div>
<div class="vgrid" style="left: 80px"></div>
<div class="vgrid" style="left:100px"></div>
<div class="vgrid" style="left:120px"></div>
<div class="vgrid" style="left:140px"></div>
<div class="vgrid" style="left:160px"></div>
<div class="vgrid" style="left:180px"></div>
<div class="vgrid" style="left:200px"></div>
<div class="vgrid" style="left:220px"></div>
<div class="vgrid" style="left:240px"></div>
<div class="vgrid" style="left:260px"></div>
<div class="hgrid" style="top: 20px"></div>
<div class="hgrid" style="top: 40px"></div>
<div class="hgrid" style="top: 60px"></div>
<div class="hgrid" style="top: 80px"></div>
<div class="hgrid" style="top:100px"></div>
<div class="hgrid" style="top:120px"></div>
<div class="hgrid" style="top:140px"></div>
<div class="hgrid" style="top:160px"></div>
<div class="hgrid" style="top:180px"></div>
<div class="hgrid" style="top:200px"></div>
<div class="hgrid" style="top:220px"></div>
<div class="hgrid" style="top:240px"></div>
<div class="hgrid" style="top:260px"></div>
<div class="marker"
style="left: 82px; top: 82px; background-color:#a8f"></div>
<div class="marker"
style="left:182px; top:182px; background-color:#fb6"></div>
</div>
<div id="piece-area"></div>
<div id="pieces"></div>
<div id="message"></div>
<div id="start-game">
<p>
<input type="radio" name="level" id="level1" value="1" onclick="setLevel(1)" checked><label for="level1">Easy</label>
<input type="radio" name="level" id="level2" value="2" onclick="setLevel(2)"><label for="level2">Normal</label>
<input type="radio" name="level" id="level3" value="3" onclick="setLevel(3)"><label for="level3">Hard</label>
</p>
<p>
<button class="start-button" onclick="startButton(0)">Violet</button>
<button class="start-button" onclick="startButton(1)">Orange</button>
</p>
</div>
<div id="help" class="closed">
<h3>Goal of the game</h3>
<p>Put the maximum number of your squares on the board.</p>
<h3>Rules</h3>
<p>The first piece must cover the starting point (marked with a circle).
<p>Each new piece must touch at least one piece of the same color on the corners of any square. No two sides of the same color can touch. Different colors can touch in any way.
<p>The game ends when both players are blocked from placing any more pieces.
<div class="buttons">
<button id="closeHelp">OK</button>
</div>
</div>
<script type="text/javascript" src="js/piece.js"></script>
<script type="text/javascript" src="js/board.js"></script>
<script type="text/javascript" src="js/backend.js"></script>
<script type="text/javascript" src="js/blokus_m.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
</body>
</html>