forked from github/game-off-2016
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (120 loc) · 6.38 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
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>server.hack()</title>
<link rel="stylesheet" type="text/css" href="assets/style.css"/>
<link rel="icon" href="assets/icon.png" sizes="256x256" type="image/png"/>
<!-- VENDOR SCRIPTS -->
<script src="vendor/jspdf.min.js"></script>
</head>
<body>
<section id="description">
<h1>server.hack()</h1>
<p>a single-page cyberpunk board game for 2-4 players</p>
<p>made for <a href="https://itch.io/jam/procjam" target="_blank">PROCJAM 2016</a> and <a href="https://github.com/github/game-off-2016" target="_blank">GitHub Game-off 2016</a></p>
<p>v0.4</p>
</section>
<section id="ui">
<dl id="status">
<dt>Gameset Status:</dt>
</dl>
<button id="btnRules" onclick="printRules();">Print Rules</button>
<button id="btnPng" onclick="printPng();" disabled>Print Gameset (PNG)</button>
<button id="btnPdf" onclick="printPdf();" disabled>Print Gameset (PDF)</button>
<button id="btnRefresh" onclick="window.location.reload();" disabled>Generate New Gameset</button>
</section>
<hr/>
<section id="rules">
<h1>How To Play</h1>
<h2>Objective</h2>
<p>Finish the game with the highest number of File points.</p>
<h2>Pieces</h2>
<ul>
<li>Character cards have a set of 1-3 implants/traits which affect their final score.</li>
<li>File cards have a point value (0-3) and one of three filetypes. Once drawn, a File remains face-up for the rest of the game.</li>
<li>Program cards have text which explains what they do.</li>
<li>The Gameboard has a Server (the center of the board) and four paths leading to the Server.</li>
<li>The Avatar tokens are cubes used to represent player position on the Gameboard.</li>
</ul>
<h2>Setup</h2>
<ol>
<li>Print a gameset.</li>
<li>Cut the gameset into individual pieces.</li>
<li>Shuffle Character cards and have each player choose one randomly. Look at your own, but keep these secret from other players until the end of the game.</li>
<li>Shuffle the File cards and place the deck facedown by the Gameboard.</li>
<li>Shuffle the Program cards and place the deck facedown by the Gameboard.</li>
<li>Place an avatar token for each player on the "start" positions on the Gameboard.</li>
<li>Decide who goes first.</li>
</ol>
<h2>Playing</h2>
<ul>
<li>Each player gets 2 actions per turn.
<li>
Actions:
<ul>
<li>Move your Avatar 1 space</li>
<li>Draw a Program card facedown</li>
<li>Use a Program card</li>
<li>If on the Server, draw a File faceup</li>
</ul>
</li>
<li>Once a player has used both of their actions, the next player starts their turn.</li>
<li>When Programs are used, place the cards in a separate pile. Once every Program card has been drawn, re-shuffle this pile and use it as the new Program deck.</li>
</ul>
<h2>Game Over</h2>
<ul>
<li>As soon as the last File is drawn, the game is over. Each player reveals their Character card, and points are tallied. You may not use any remaining Programs.
<li>A player's points are calculated as the sum of all the Files they hold, plus any bonuses/modifiers from their Character card.
</ul>
<h2>Ties</h2>
<ul>
<li>If two or more players are tied for first place, continue the game by drawing/playing Programs until the tie is broken.</li>
</ul>
<h2>Misc.</h2>
<ul>
<li>You can move forwards or backwards. For example: if a player uses the Program "target player moves up to 2 spaces", they could A) target themselves and move forwards, or B) target another player and move them backwards.</li>
<li>You can choose to do the same action twice on your turn. For example, you could draw two Program cards.</li>
<li>If multiple players need to draw cards at the same time (e.g. the Program "everyone draw 3 cards"), start with the player who used the Program and continue in turn order.</li>
</ul>
</section>
<hr/>
<section id="details">
<h1>Gameset Details</h1>
<p>A full gameset is fitted to a single letter-sized piece of paper, which needs to be cut into individual pieces.</p>
<table>
<tr>
<td><img src="example-gameset.png" alt="example gameset" title="example gameset" width="319" height="413"/></td>
<td>
<p>When finished cutting, you should have:</p>
<ul>
<li>4 Character cards</li>
<li>20 File cards</li>
<li>30 Program cards</li>
<li>1 Gameboard</li>
<li>4 Avatar tokens</li>
</ul>
</td>
</tr>
</table>
<p>The Avatar tokens on the corners of the Gameboard are simple papercrafts, and can be assembled like so:</p>
<img src="avatar-instructions.png" alt="instructions on how to assemble avatar tokens" title="instructions on how to assemble avatar tokens" width="500" height="200"/>
<p>If you prefer, you can cut out and use the center squares alone to save some setup time.</p>
<p>An example of an entire assembled gameset can be seen below:</p>
<p><img src="example-assembled-gameset.png" alt="example assembled gameset" title="example assembled gameset" width="500" height="200"/></p>
<hr/>
<h1>Resources Used</h1>
<ul>
<li><a href="https://github.com/MrRio/jsPDF" target="_blank">jsPDF</a></li>
<li><a href="photo credits.txt" target="_blank">Wikimedia Commons stock photos</a></li>
</ul>
<br/><br/><br/>
</section>
<section id="main">
<canvas id="canvas"></canvas>
<img id="img-preview" src=""/>
</section>
<!-- CLIENT SCRIPTS -->
<script src="client/words.js"></script>
<script src="client/index.js"></script>
</body>