-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (89 loc) · 2.88 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
<!DOCTYPE html>
<!-- NOTE: the string 'TODO' appears everywhere you need to fill in information. -->
<html>
<head>
<title>Seven Segments</title>
<!-- NOTE: this CSS sets up the ".figure" class to center images, and instructs images in ".figure"s to have space around them and to render crisp pixel edges when scaled [e.g. for retina displays]. -->
<style>
body {
background:#fff;
color:#000;
margin:0;
padding:0;
}
.figure {
text-align:center;
}
.figure > img {
margin: 0px 20px;
image-rendering: pixelated;
}
h1 {
margin:0;
padding: 5px 5px 0 5px;
background:#ddd;
}
#author {
margin:0;
padding: 0 10px 0 30px;
border-bottom: 3px solid #ccc;
background:#ddd;
}
h2 {
margin:1em 0;
padding: 5px 5px 5px 0;
background:#ddd;
border-bottom: 3px solid #ccc;
}
h1, #author, h2 {
background: linear-gradient(to right,
#dddddd 0%, #dddddd 75%,
#dce8d2 75%, #d2e8e1 80%,
#d2e8e1 80%, #d2e8e1 85%,
#d2e2e8 85%, #d2e2e8 90%,
#d7d2e8 90%, #d7d2e8 95%,
#e8d2e8 95%, #e8d2e8 100%);
}
p {
margin: 1em;
}
</style>
</head>
<body>
<h1>Seven Segment</h1>
<div id="author">by: I-Chen Jwo (ijwo)</div>
<p>Two players have to color the bars on the game board and try to connect the bars into numbers.
If the player successfully colored a full number, the player could get the score of that number.</p>
<!-- the <div> wrapping this image centers it on the page. -->
<!-- TODO: drawing showing the main view of the game during play -->
<div class="figure">
<img src="game.png" width="25%";/>
<img src="7seg.png" width="25%" />
</div>
<p>Two players have their own color (blue and red in this case) and they have to color the gray bar into their color.
If the colored bars could form a number, the player gets the exact score. For instance,
if the player successfully connected the gray bars into 6, the player could get 6 points.
<ul>
<li>The player could get the score only if the number is fully formed by the player's color.</li>
<li>The colored bar could not be colored again. </li>
<li>0 also counts.</li>
</ul>
</p>
<h2>Gameplay</h2>
<p>Use WASD to select the bar and hit enter to color the bar.</p>
<p>There are two modes for this game. The player with higher score wins.
<ul>
<li>Mode1: Only one player is allowed to color one bar at the same time. Two players take turns until the board couldn't be colored anymore.</li>
<li>Mode2: The players are allowed to move unlimited moves in one minute or until the board is full.
Also, Two players could play at the same time. </li>
</ul>
</p>
<p>Notice: The number seven is too easy to connect, therefore the form of 7 is changed to a more complex form like the picure below. </p>
<!-- TODO: illustrate your descriptions with more drawings -->
<div class="figure">
<img src="7.png" width="5%"; />
</div>
<h2>Assets</h2>
<p>Still finding the <a href="https://github.com/ixchow/amoeba-escape/blob/master/tiles.png">assets</a> for the game.</p>
</body>
</html>