traditional

assets/script.js

@@ -50,6 +50,7 @@ class Map {
 
     this.totalWin = g.level + 1 == levels.length;
     this.finalPointsGiven = false;
+    this.traditional = false;
   }
 
   generateMapArray() {
@@ -85,7 +86,11 @@ class Map {
   getKeystroke() {
     var self = this;
     _listener = function (event) {
-    if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(event.code) > -1) {
+      if (
+        ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(
+          event.code,
+        ) > -1
+      ) {
         event.preventDefault();
       }
       var dontLoop = false;
@@ -155,6 +160,9 @@ class Map {
     let map = "";
     for (let i = 0; i < this.mapArray.length; i++) {
       for (let j = 0; j < this.mapArray[i].length; j++) {
+        if (this.traditional) {
+          map += this.mapArray[i][j];
+        } else {
           if (this.mapArray[i][j] === "#") {
             map += '<img src="assets/img/sprites/wall.png">';
           } else if (this.mapArray[i][j] === " ") {
@@ -173,6 +181,7 @@ class Map {
             map += '<img src="assets/img/sprites/grill.png">';
           }
         }
+      }
       map += "<br>";
     }
 

index.html

@@ -104,7 +104,12 @@
       <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>
+      <a href="#" onclick="toggleDisplay('dpad')">toggle D-Pad</a><br />
+      <a
+        href="#"
+        onclick="if (g.mapInstance.traditional) {g.mapInstance.traditional = false} else {g.mapInstance.traditional = true}; g.mapInstance.display()"
+        >toggle Graphics</a
+      >
     </div>
     <center>
       <pre style="margin-top: 30px">