diff --git a/assets/script.js b/assets/script.js
index 4c1c192..8795570 100644
--- a/assets/script.js
+++ b/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,22 +160,26 @@ 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.mapArray[i][j] === "#") {
-          map += '<img src="assets/img/sprites/wall.png">';
-        } else if (this.mapArray[i][j] === " ") {
-          map += '<img src="assets/img/sprites/floor.png">';
-        } else if (this.mapArray[i][j] === "0") {
-          map += '<img src="assets/img/sprites/coal.png">';
-        } else if (this.mapArray[i][j] === "*") {
-          map += '<img src="assets/img/sprites/fire_coal.png">';
-        } else if (this.mapArray[i][j] === "@") {
-          if (!grillChar) {
-            map += `<img src="assets/img/sprites/char${this.playerDir}.png">`;
-          } else {
-            map += `<img src="assets/img/sprites/grill-char${this.playerDir}.png">`;
+        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] === " ") {
+            map += '<img src="assets/img/sprites/floor.png">';
+          } else if (this.mapArray[i][j] === "0") {
+            map += '<img src="assets/img/sprites/coal.png">';
+          } else if (this.mapArray[i][j] === "*") {
+            map += '<img src="assets/img/sprites/fire_coal.png">';
+          } else if (this.mapArray[i][j] === "@") {
+            if (!grillChar) {
+              map += `<img src="assets/img/sprites/char${this.playerDir}.png">`;
+            } else {
+              map += `<img src="assets/img/sprites/grill-char${this.playerDir}.png">`;
+            }
+          } else if (this.mapArray[i][j] === ".") {
+            map += '<img src="assets/img/sprites/grill.png">';
           }
-        } else if (this.mapArray[i][j] === ".") {
-          map += '<img src="assets/img/sprites/grill.png">';
         }
       }
       map += "<br>";
diff --git a/index.html b/index.html
index db71092..ebdae4c 100644
--- a/index.html
+++ b/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">