Codinget/Snek
1
0
Fork 0
Code Issues 11 Pull requests Releases Activity

added help page (closes #15)

Browse source
This commit is contained in:
Nathan DECHER 2020-04-06 22:03:20 +02:00
parent e34e7e07bd
commit a87b4679f4
5 changed files with 109 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

64
public/help.html Normal file
View 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>

16
src/js/main.js
View file

@ -162,6 +162,22 @@
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
handleWin=async snek => {
// hide the HUD

16
src/less/help.less Normal file
View file

@ -0,0 +1,16 @@
.help {
display: block;
article {
margin-bottom: 2ex;
}
section {
margin-bottom: 1ex;
}
ul {
margin-left: 2ex;
font-size: 1.6em;
}
}

1
src/less/popup.less
View file

@ -48,6 +48,7 @@
flex-direction: column;
align-items: center;
overflow-y: auto;
flex: 1;
& > * {
margin: .5rem;

12
src/less/snek.less
View file

@ -31,6 +31,10 @@ h1, h2, h3, h4, h5, h6 {
margin-bottom: .1em;
}
p + p {
margin-top: 1em;
}
a {
text-decoration: inherit;
display: contents;
@ -40,6 +44,11 @@ em {
font-style: italic;
}
code {
background: @accentbg;
font-weight: bold;
}
header, footer {
background: @accentbg;
@ -131,3 +140,6 @@ p {
// setup the hud
@import 'hud';
// setup the help file
@import 'help';