assets/script.js

@@ -90,24 +90,28 @@ class Map {
       }
       var dontLoop = false;
       if (event.key === "h" || event.key === "a" || event.key === "ArrowLeft") {
+        self.playerDir = "l";
         self.move("left");
       } else if (
         event.key === "j" ||
         event.key === "s" ||
         event.key === "ArrowDown"
       ) {
+        self.playerDir = "f";
         self.move("down");
       } else if (
         event.key === "k" ||
         event.key === "w" ||
         event.key === "ArrowUp"
       ) {
+        self.playerDir = "b";
         self.move("up");
       } else if (
         event.key === "l" ||
         event.key === "d" ||
         event.key === "ArrowRight"
       ) {
+        self.playerDir = "r";
         self.move("right");
       } else if (event.key === "r") {
         dontLoop = true;
@@ -185,15 +189,6 @@ class Map {
   }
 
   move(direction) {
-    if (direction === "left") {
-      this.playerDir = "l";
-    } else if (direction === "right") {
-      this.playerDir = "r";
-    } else if (direction === "down") {
-      this.playerDir = "f";
-    } else {
-      this.playerDir = "b";
-    }
     g.levelMoves[this.level] += 1;
     g.totalMoves += 1;
 

index.html

@@ -20,26 +20,6 @@
         width: 100%;
       }
 
-      .opts {
-        position: absolute;
-        top: 10;
-        right: 10;
-        font-size: 15px;
-      }
-
-      .opts-menu {
-        text-align: right;
-        padding: 5px;
-        position: absolute;
-        top: 40;
-        right: 10;
-        font-size: 15px;
-        width: auto;
-        height: auto;
-        background-color: ghostwhite;
-        display: none;
-      }
-
       #map {
         white-space: pre;
       }
@@ -49,11 +29,6 @@
         width: 50px;
       }
 
-      #dpad {
-        margin-top: 20px;
-        display: none;
-      }
-
       #stats {
         font-size: 20px;
         margin-bottom: 8px;
@@ -64,12 +39,6 @@
         margin-bottom: -19px;
       }
 
-      @media (max-width: 481px) {
-        pre {
-          font-size: 17px;
-        }
-      }
-
       a {
         color: black;
         text-decoration: none;
@@ -95,14 +64,9 @@
         text-decoration: none;
       }
     </style>
-    <div class="opts">
+
-      <a href="#" onclick="toggleDisplay('opts-menu')">settings</a>
-    </div>
-    <div class="opts-menu" id="opts-menu">
-      <a href="#" onclick="toggleDisplay('dpad')">toggle D-Pad</a>
-    </div>
     <center>
-      <pre style="margin-top: 30px">
+      <pre>
 █▀ █▀█ █▄▀ █▀█ █▄▄ ▄▀█ █▄░█ █▄█ ▄▀█
 ▄█ █▄█ █░█ █▄█ █▄█ █▀█ █░▀█ ░█░ █▀█
       </pre>
@@ -111,43 +75,6 @@
     <div class="container">
       <div id="map"></div>
     </div>
-    <div class="container">
-      <img id="dpad" src="assets/img/sprites/dpad.png" usemap="#dpadmap" />
-      <map name="dpadmap">
-        <!-- up -->
-        <area
-          shape="rect"
-          coords="50,1,130,50"
-          alt="Computer"
-          href="#"
-          onclick="g.mapInstance.move('up'); g.mapInstance.loop()"
-        />
-        <!-- down -->
-        <area
-          shape="rect"
-          coords="50,125,130,190"
-          alt="Computer"
-          href="#"
-          onclick="g.mapInstance.move('down'); g.mapInstance.loop()"
-        />
-        <!-- left -->
-        <area
-          shape="rect"
-          coords="1,55,58,120"
-          alt="Computer"
-          href="#"
-          onclick="g.mapInstance.move('left'); g.mapInstance.loop()"
-        />
-        <!-- right -->
-        <area
-          shape="rect"
-          coords="130,55,180,120"
-          alt="Computer"
-          href="#"
-          onclick="g.mapInstance.move('right'); g.mapInstance.loop()"
-        />
-      </map>
-    </div>
     <div class="container" style="margin-top: 20px; margin-bottom: 80px">
       <a href="#" onclick="g.reset()" style="margin-right: 50px">[r]eset</a>
       <a
@@ -170,6 +97,14 @@
         <li>Arrow Keys</li>
         <li>VIM keys [hjkl]</li>
       </ul>
+      <h4>TODO:</h4>
+      <ul>
+        <li>Mobile Support</li>
+        <li>Create a cool song and SFX</li>
+        <li>Points system</li>
+        <li>Steam animation when you beat a level</li>
+        <li>Add more level sets (worlds)</li>
+      </ul>
       <h4>Credits:</h4>
       <ul>
         <li>
@@ -189,30 +124,7 @@
           <a href="https://git.domdit.com/dominic/sokobanya">here</a>
         </li>
       </ul>
-      <h4>UPDATES:</h4>
-      <li>
-        (09/07/25) v1.1: released mobile support via toggleable Dpad, see settings at top right of page!
-      </li>
-      <h4>TODO:</h4>
-      <ul>
-        <li><s>Mobile Support</s></li>
-        <li>Selectable levels upon completion</li>
-        <li>Create a cool song and SFX</li>
-        <li>Points system</li>
-        <li>Steam animation when you beat a level</li>
-        <li>Add more level sets (worlds)</li>
-      </ul>
     </div>
     <script src="assets/script.js"></script>
-    <script>
-      function toggleDisplay(elemId) {
-        let elem = document.getElementById(elemId);
-        if (elem.style.display === "none" || elem.style.display === "") {
-          elem.style.display = "block";
-        } else {
-          elem.style.display = "none";
-        }
-      }
-    </script>
   </body>
 </html>