added help page (closes #15)
This commit is contained in:
parent
e34e7e07bd
commit
a87b4679f4
5 changed files with 109 additions and 0 deletions
64
public/help.html
Normal file
64
public/help.html
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Snek - Help</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="favicon" href="favicon.ico">
|
||||||
|
<link rel="stylesheet" href="css/snek.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="help">
|
||||||
|
<article>
|
||||||
|
<h2>Controls</h2>
|
||||||
|
<p>
|
||||||
|
On keyboard, the game is played with the arrow keys.<br>
|
||||||
|
You can use the <code>f</code> key to go fullscreen.<br>
|
||||||
|
You can also use the <code>r</code> key to quickly restart a game.<br>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
On mobile or with a touchscreen, the game can be played in 3 modes.<br>
|
||||||
|
In crosspad mode, the screen is divided into 4 regions, and each one corresponds to a direction.<br>
|
||||||
|
In joystick mode, the point where you press your finger is the center of a virtual joystick, and moving it will trigger the directions.<br>
|
||||||
|
In swipe mode, you just swipe to move.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Game modes</h2>
|
||||||
|
<section>
|
||||||
|
<h3>Speedrun mode</h3>
|
||||||
|
<p>
|
||||||
|
In speedrun mode, the goal is to collect all the fruits as fast as possible.<br>
|
||||||
|
Attempting to go through the edge of the playfield will kill you.<br>
|
||||||
|
Each level introduces a new mechanic.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h3>Arcade</h3>
|
||||||
|
<p>
|
||||||
|
Arcade mode is mostly like the classics.<br>
|
||||||
|
In arcade mode, you can go through the edge of the playfield and come out on the other side.<br>
|
||||||
|
Super fruits and decaying fruits may also appear. They are worth <em>10</em> and <em>5</em> points respectively.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h3>Timed</h3>
|
||||||
|
<p>
|
||||||
|
Timed mode is a bare-bones mode with a looping playfield.<br>
|
||||||
|
A timed game only lasts for 30 seconds, and the goal is to get as high a score as possible.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Tiles</h2>
|
||||||
|
<ul>
|
||||||
|
<li><em>Walls</em> kill you if you touch them</li>
|
||||||
|
<li><em>Fruits</em> give you one point and make you grow. In arcade gamemodes, they also make the game go faster</li>
|
||||||
|
<li><em>Holes</em> kill you if the entire snake is over a hole, or the head and 3 subsequent tiles are over a hole</li>
|
||||||
|
<li><em>Fire</em> kills you if you touch it</li>
|
||||||
|
<li><em>Super fruits</em> give you 10 points, and sometimes spawn in arcade mode</li>
|
||||||
|
<li><em>Decaying fruits</em> give you 5 points and sometimes spawn in arcade mode, but they also decay after 2 seconds and disappear</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -162,6 +162,22 @@
|
||||||
location.hash='menu';
|
location.hash='menu';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// show help page
|
||||||
|
help=async () => {
|
||||||
|
stopGame();
|
||||||
|
let iframe=document.createElement('iframe');
|
||||||
|
iframe.src='help.html';
|
||||||
|
iframe.style.width='100%';
|
||||||
|
iframe.style.height='100%';
|
||||||
|
await new Popup(
|
||||||
|
"Help",
|
||||||
|
[iframe],
|
||||||
|
{ok: "OK"},
|
||||||
|
true
|
||||||
|
).display();
|
||||||
|
location.hash='menu';
|
||||||
|
};
|
||||||
|
|
||||||
// display the win popup
|
// display the win popup
|
||||||
handleWin=async snek => {
|
handleWin=async snek => {
|
||||||
// hide the HUD
|
// hide the HUD
|
||||||
|
|
|
||||||
16
src/less/help.less
Normal file
16
src/less/help.less
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
.help {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin-bottom: 2ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-bottom: 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-left: 2ex;
|
||||||
|
font-size: 1.6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -48,6 +48,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
margin: .5rem;
|
margin: .5rem;
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,10 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
margin-bottom: .1em;
|
margin-bottom: .1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p + p {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: inherit;
|
text-decoration: inherit;
|
||||||
display: contents;
|
display: contents;
|
||||||
|
|
@ -40,6 +44,11 @@ em {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: @accentbg;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
header, footer {
|
header, footer {
|
||||||
background: @accentbg;
|
background: @accentbg;
|
||||||
|
|
||||||
|
|
@ -131,3 +140,6 @@ p {
|
||||||
|
|
||||||
// setup the hud
|
// setup the hud
|
||||||
@import 'hud';
|
@import 'hud';
|
||||||
|
|
||||||
|
// setup the help file
|
||||||
|
@import 'help';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue