diff --git a/public/help.html b/public/help.html new file mode 100644 index 0000000..17ce4d9 --- /dev/null +++ b/public/help.html @@ -0,0 +1,64 @@ + + + + Snek - Help + + + + + +
+
+

Controls

+

+ On keyboard, the game is played with the arrow keys.
+ You can use the f key to go fullscreen.
+ You can also use the r key to quickly restart a game.
+

+

+ On mobile or with a touchscreen, the game can be played in 3 modes.
+ In crosspad mode, the screen is divided into 4 regions, and each one corresponds to a direction.
+ In joystick mode, the point where you press your finger is the center of a virtual joystick, and moving it will trigger the directions.
+ In swipe mode, you just swipe to move. +

+
+
+

Game modes

+
+

Speedrun mode

+

+ In speedrun mode, the goal is to collect all the fruits as fast as possible.
+ Attempting to go through the edge of the playfield will kill you.
+ Each level introduces a new mechanic. +

+
+
+

Arcade

+

+ Arcade mode is mostly like the classics.
+ In arcade mode, you can go through the edge of the playfield and come out on the other side.
+ Super fruits and decaying fruits may also appear. They are worth 10 and 5 points respectively. +

+
+
+

Timed

+

+ Timed mode is a bare-bones mode with a looping playfield.
+ A timed game only lasts for 30 seconds, and the goal is to get as high a score as possible. +

+
+
+
+

Tiles

+ +
+
+ + diff --git a/src/js/main.js b/src/js/main.js index 5c392c1..c78f70f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -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 diff --git a/src/less/help.less b/src/less/help.less new file mode 100644 index 0000000..2237cb5 --- /dev/null +++ b/src/less/help.less @@ -0,0 +1,16 @@ +.help { + display: block; + + article { + margin-bottom: 2ex; + } + + section { + margin-bottom: 1ex; + } + + ul { + margin-left: 2ex; + font-size: 1.6em; + } +} diff --git a/src/less/popup.less b/src/less/popup.less index 5eeb6da..e2ada25 100644 --- a/src/less/popup.less +++ b/src/less/popup.less @@ -48,6 +48,7 @@ flex-direction: column; align-items: center; overflow-y: auto; + flex: 1; & > * { margin: .5rem; diff --git a/src/less/snek.less b/src/less/snek.less index 826b9d6..fdbceef 100644 --- a/src/less/snek.less +++ b/src/less/snek.less @@ -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';