-
Notifications
You must be signed in to change notification settings - Fork 1
/
game.html
136 lines (130 loc) · 5.15 KB
/
game.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "//matomo.neher.casa/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '5']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo Code -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8218RE7MWW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-8218RE7MWW');
</script>
<meta charset="UTF-8" />
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta id="viewport" name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NTFVXVKK');</script>
<!-- End Google Tag Manager -->
<meta name="application-name" content="PiggyPasser" />
<meta name="apple-mobile-web-app-title" content="PiggyPasser" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="assets/1024.png" />
<meta name="keywords"
content="keyword1, keyword2,nsw-993298pdwcv1b7rzsxinltjuxoi0b9rir67tddkxfpve0fib8h8fpa9csb64dv35xuhvx7e8ihzx4bog-y29cxikvishmnaj5yzq78x11mntbep-iqntxo9cqnqe2phw" />
<title>PiggyPasser - GamePage</title>
<link rel="stylesheet" href="game.css" />
</head>
<body style="padding: bottom 100px;">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NTFVXVKK" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="header">
<div id="home">
<img src="assets/back_arrow.png" style="max-height: 16px; max-width: 16px;" />
<a href="index.html">Home</a>
</div>
<div id="round-info">
<p id="round-num">Round 0</p>
<p id="round-score">0</p>
</div>
<div id="header" <div id="rules">
<button id="rules-btn" onclick="openRules()">Rules</button>
</div>
</div>
</div>
<div id="players">
</div>
</div>
<div id="pigs-container">
<button onclick="pigSelected(card1)" class="pig-btn" id="sider">
<img class="pig-img" src="assets/side.png" />
Sider
</button>
<button onclick="pigSelected(card2)" class="pig-btn" id="razorback">
<img class="pig-img" src="assets/razorback.png" />
Razorback
</button>
<button onclick="pigSelected(card3)" class="pig-btn" id="trotter">
<img class="pig-img" src="assets/trotter.png" />
Trotter
</button>
<button onclick="pigSelected(card4)" class="pig-btn" id="snouter">
<img class="pig-img" src="assets/snouter.png" />
Snouter
</button>
<button onclick="pigSelected(card5)" class="pig-btn" id="leaning">
<img class="pig-img" src="assets/leaning.png" />
Leaning Jowler
</button>
<button onclick="pigOutSelected(card6)" class="pig-btn" id="pigout">
<img class="pig-img" src="assets/pigout.png" />
Pigout
<button onclick="oinkerSelected(card7)" class="pig-btn-oinker" id="oinker">
<img class="pig-img" src="assets/oink.png" />
Oinker
</button>
</div>
<div id="footer">
<div id="main-btns-container">
<button onclick="confirmRoll()" class="main-btn" id="confirmRoll">
Done
</button>
<button id="bank" onclick="bank()" class="main-btn" disabled="true">Bank</button>
</div>
</div>
<div class="overlay" id="overlay" onclick="return false;"></div>
<div class="modal" id="modal">
<button class="modal-close" onclick="closeRules()">x</button>
<div class="modal-content">
<h2>How to play</h2>
<p>Roll both pigs together. Points are scored depending on how the pigs land. Tap the "PIGS" that you
rolled. Tap "CONFIRM".</p>
<p>Now you must decide whether to stop rolling and score, or keep rolling and try to add points to your
score.</p>
<p>If you choose to stop rolling tap "BANK" to bank your round points</p>
<p>You may continue to roll the pigs again and again on your turn. You may keep rolling until one of the
following occurs:</p>
<p> * You decide to stop rolling add score.</p>
<p> * You roll a "PIG OUT" which means you score 0 points for this turn.</p>
<p> * You roll a "OINKER" which means you lose <em>all</em> your points accumulated in the game so far.</p>
</div>
</div>
</body>
<script src="game.js"></script>
</html>