-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (102 loc) · 3.43 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
<!doctype html>
<html lang="en">
<head>
<title>Black Hole</title>
<meta charset="utf-8">
<link rel="apple-touch-icon" href="./images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
<link rel="manifest" href="./images/site.webmanifest">
<link href="grid.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<!--// Black hole, index.js
// All code owned by TechnicProblem, © TechnicProblem 2020-2024, All Rights Reserved
// Contact me for usage of code, [email protected]
// 2020-12-14, 2023-12-08
-->
</head>
<body>
<h2>Black hole - v2</h2>
<main class="container">
<main class="hexagon-container">
<div class="hexagon" id="hex1"></div>
<div class="hexagon" id="hex2"></div>
<div class="hexagon" id="hex3"></div>
<div class="hexagon" id="hex4"></div>
<div class="hexagon" id="hex5"></div>
<div class="hexagon" id="hex6"></div>
<div class="hexagon" id="hex7"></div>
<div class="hexagon" id="hex8"></div>
<div class="hexagon" id="hex9"></div>
<div class="hexagon" id="hex10"></div>
<div class="hexagon" id="hex11"></div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon" id="hex12"></div>
<div class="hexagon" id="hex13"></div>
<div class="hexagon" id="hex14"></div>
<div class="hexagon" id="hex15"></div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon" id="hex16"></div>
<div class="hexagon" id="hex17"></div>
<div class="hexagon" id="hex18"></div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon" id="hex19"></div>
<div class="hexagon" id="hex20"></div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon hide">
<p class="hide">test</p>
</div>
<div class="hexagon" id="hex21"></div>
</main>
<aside>
<article class="instructions gui">
<div class="table gui">
<h3>How to play</h3>
</div>
<p>Each player takes turns placing a number in increasing order from 1 to 10. At the end there will be one hexagon left, which becomes the black hole. The black hole sucks in all adjacent hexagons. After that, the numbers are counted and the player with the highest sum wins!</p>
</article>
<section class="scoretable alt">
<h3>Score</h3>
<p>Red: <span id="redresults">0</span></p>
<p>Blue: <span id="blueresults">0</span></p>
<p>Winner: <span id="winnerdisplay"></span></p>
</section>
</aside>
</main>
<script src="index.js"></script>
<div class="footerdiv">
<footer>
<p>Programmed by <a target="_blank" href="https://technicproblem.github.io">TechnicProblem</a><br> Original game by Walter Joris<br> Seen on <a target="_blank" href="https://www.youtube.com/watch?v=zMLE7a3faI4">Game On</a>, by Tom Scott<br> Parts of hexagon grid by <a href="https://codepen.io/ericornelissen/pen/vWbWKv" target="_blank">Eric Cornelissen</a>
</footer>
</div>
</body>
</html>