Add instructions to the game start screen

HarryPeach · Apr 15, 2022 · 002f727 · 002f727
1 parent 56bcb52
commit 002f727
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/html/index.css b/html/index.css
@@ -8,6 +8,7 @@ body {
   margin: 0;
   width: 100%;
   height: 100%;
+  font-family: sans-serif;
 }
 
 .icon {
@@ -88,4 +89,9 @@ body {
 
 #offline-resources {
   display: none;
+}
+
+#instructions {
+  position: absolute;
+  bottom: 0;
 }
diff --git a/html/index.html b/html/index.html
@@ -14,8 +14,14 @@
         <div id="main-content">
             <div class="icon icon-offline" alt=""></div>
         </div>
-        <div>
-            <!-- Content below! -->
+        <div id="instructions">
+            <h1>DinoRunNX</h1>
+            <p>
+                To <strong>start</strong> the game and to <strong>jump</strong>, press the &#128316; button.<br>
+                To <strong>duck</strong>, press the &#128317; button.<br>
+                To <strong>quit</strong>, press the &#127345; button.<br><br>
+                (This help will be hidden when you start the game)
+            </p>
         </div>
         <div id="offline-resources">
             <img id="offline-resources-2x" src="assets/default_200_percent/200-offline-sprite.png">

diff --git a/html/index.js b/html/index.js
@@ -361,7 +361,7 @@
             // Draw t-rex
             this.tRex = new Trex(this.canvas, this.spriteDef.TREX);
 
-            this.outerContainerEl.appendChild(this.containerEl);
+            this.outerContainerEl.insertBefore(this.containerEl, this.outerContainerEl.firstChild);
 
             if (IS_MOBILE) {
                 this.createTouchController();
@@ -658,6 +658,7 @@
                 if (!this.crashed && (Runner.keycodes.JUMP[e.keyCode] ||
                     e.type == Runner.events.TOUCHSTART)) {
                     if (!this.playing) {
+                        document.getElementById('instructions').style.display = "none";
                         this.loadSounds();
                         this.playing = true;
                         this.update();
@@ -942,7 +943,7 @@
             opt_classname : Runner.classes.CANVAS;
         canvas.width = width;
         canvas.height = height;
-        container.appendChild(canvas);
+        container.append(canvas);
 
         return canvas;
     }