forked from fossasia/labyrinth
-
Notifications
You must be signed in to change notification settings - Fork 0
/
howtoplay.html
104 lines (90 loc) · 5.1 KB
/
howtoplay.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
<!doctype html>
<html lang="en">
<head>
<title>How to play</title>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="description" content="Step-by-step guide to play Labyrinth game">
<meta name="author" content="Ploypiti P.">
<!-- Stylesheets added -->
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/backToTop.css">
<!-- favicon -->
<link rel="icon" type="image/png" href="images/logos/favicon.png" />
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/sweetalert2.min.js"></script>
<script type="text/javascript" src="js/translate.js"></script>
<script type="text/javascript" src="js/backToTop.js"></script>
</head>
<body>
<a onclick="javascript: document.location='index.html'" id="Close-Button">✖</a>
<!-- Header containing Labyrinth Logo. -->
<div class="whitespace">
<div class="centered">
<div class="header">
<img class="play-button" src="images/docs/play-button.png" alt="Play" />
<h1 class="site_title centered lang" data-href="how">HOW TO PLAY</h1>
<a href="https://github.com/fossasia/labyrinth">
<img class="brand-logo left" alt="logo" src="images/logos/inline_color.png">
</a>
<p class="site_description">Fossasia Labyrinth</p>
</div>
<br>
<!-- Langauge Section -->
<h3 class="lang" data-href="language">Select your language</h3>
<div>
<a class="translate" id="en">
<img class="translation-flag" src="icons/UnitedKingdom.png" alt="UK English" /> <span>EN</span>
</a>
<div>
</div>
<a class="translate" id="si">
<img class="translation-flag" src="icons/SriLanka.png" alt="Sinhala" /> <span>SL</span>
</a>
<div>
</div>
<a class="translate" id="pl">
<img class="translation-flag" src="icons/Poland.png" alt="Polish" /> <span>PL</span>
</a>
</div>
<hr>
<!-- How to play section. -->
<div class="content">
<h3 class="lang" data-href="start">Let's start</h3>
<p class="lang" data-href="how1">You'll see the base room with doors on it's walls. Notice the red and grey tile, there are 4 doors/openings on 4 walls.</p>
<img src="images/docs/how-to-play-1.jpg" class="how-to-play-image" alt="Step 1" />
<h2>2.</h2>
<p class="lang" data-href="how2">Press the upward arrow button for go to room above the current room (precisely, top left corner of your screen or north-west direction taking north towards the top of your screen)</p>
<img src="images/docs/how-to-play-2.jpg" class="how-to-play-image" alt="Step 2" />
<h2>3.</h2>
<p class="lang" data-href="how3">Now you can see a new block/room added. Also see that the color difference of the tiles. The bring red shows the current (red) active tile and the dark (black) tile shows the rest of tiles. Let's move a bit towards right now</p>
<p><code class="lang" data-href="code">press right arrow</code></p>
<img src="images/docs/how-to-play-3.jpg" class="how-to-play-image" alt="Step 3" />
<h2>4.</h2>
<p class="lang" data-href="how4">We can see the tiles to the right (top-right precisely). We can see the doors towards all sides/walls of the room/block. so let's move more in the game.</p>
<img src="images/docs/how-to-play-4.jpg" class="how-to-play-image" alt="Step 4" />
<h2>5.</h2>
<p class="lang" data-href="how5">We can see that there's no tile towards the top, so now we cannot move more in that direction. Let's go about making a complete grid. Do you see a way now too ? There is still an open door to explore!</p>
<img src="images/docs/how-to-play-5.jpg" class="how-to-play-image" alt="Step 5" />
<img src="images/docs/how-to-play-6.jpg" class="how-to-play-image" alt="Step 6" />
<h2 class="lang" data-href="done">All done!</h2>
<p class="lang" data-href="finish">Now it's your turn to explore, you can also contribute & create your own tiles.</p>
</div>
</div>
</div>
<!-- Footer containing Play button and flaticon legals. -->
<div>
<button class="play lang" onclick="javascript: document.location='index.html'" data-href="play">Play</button>
<div class="credits">
<div class="lang" data-href="icon">Icons by</div>
<a href="flaticon.com" class="lang" data-href="flaticon">flaticon.com</a>
</div>
</div>
<button onclick="topFunction()" id="scrollToTop" title="Back to top">↑ TOP ↑</button>
</body>
</html>