Fixed character offset and dynamic wall generation

js/KeyPressListener.js

@@ -32,4 +32,4 @@ class KeyPressListener {
         document.removeEventListener("keydown", this.keydownFunction);
         document.removeEventListener("keyup", this.keyupFunction);
     }
-}
+}

js/Overworld.js

@@ -2,16 +2,21 @@ class Overworld {
     constructor(config) {
         this.element = config.element;
         this.canvas = this.element.querySelector(".game-canvas");
-        this.canvas.height = window.innerHeight;
-        this.canvas.width = window.innerWidth;
+        // this.canvas.height = window.innerHeight;        
+        // this.canvas.width = window.innerWidth;
+
+        // this.canvas.height = 1000; // TODO: Change this!
+        // this.canvas.width = 1500;
+
+        console.log(this.canvas.height, this.canvas.width);
+
         this.context = this.canvas.getContext("2d");
         this.map = null;
     }
 
     init() {
         this.startMap(window.OverworldMaps.DemoRoom);
 
-
         this.bindActionInput();
         this.bindHeroPositionCheck();
 

js/OverworldMap.js

@@ -20,7 +20,7 @@ class OverworldMap {
 
     drawLowerImage(context, cameraPerson) {
         // context.drawImage(this.lowerImage, utils.withGrid(10.5) - cameraPerson.x, utils.withGrid(6) - cameraPerson.y);
-        context.drawImage(this.lowerImage, utils.withGrid(10.5) - cameraPerson.x, utils.withGrid(6) - cameraPerson.y);
+        context.drawImage(this.lowerImage, utils.withGrid(10.15) - cameraPerson.x, utils.withGrid(6.5) - cameraPerson.y); // fixing offset
     }
 
     drawUpperImage(context, cameraPerson) {
@@ -109,16 +109,16 @@ class OverworldMap {
 
 window.OverworldMaps = {
     DemoRoom: {
-        lowerSrc: "./images/official_assets/our_map_official.svg", // current best map is= 
+        lowerSrc: "./images/official_assets/ourMap32.png", // current best map is= 
         // lowerSrc: "./images/ourMap16.png",
         // lowerSrc: "./images/DemoLower.png",
         upperSrc: "./images/DemoUpper.png",
         gameObjects: {
             hero: new Person({
                 isPlayerControlled: true,
                 src: "./images/brownGuy1.png",
-                x: utils.withGrid(20),
-                y: utils.withGrid(20)
+                x: utils.withGrid(30),
+                y: utils.withGrid(45)
             }),
 
             // myDrone: new Person({

js/Person.js

@@ -7,10 +7,10 @@ class Person extends GameObject {
         this.isPlayerControlled = config.isPlayerControlled || false;
 
         this.directionUpdate = { // to alter speed, changed 1 to 2 here and (*)
-            "up": ["y", -1],
-            "down": ["y", 1],
-            "left": ["x", -1],
-            "right": ["x", 1]
+            "up": ["y", -2],
+            "down": ["y", 2],
+            "left": ["x", -2],
+            "right": ["x", 2]
         }
     }
 

js/utils.js

@@ -1,6 +1,7 @@
 const utils = {
     withGrid(n) {
         return n * 16;
+        // return n*16;
     },
 
     asGridCoord(x, y) {
@@ -10,7 +11,7 @@ const utils = {
     nextPosition(initialX, initialY, direction) {
         let x = initialX;
         let y = initialY;
-        const size = 16;
+        const size = 32;
         if(direction == "left") {
             x -= size;
         } else if(direction == "right") {

styles/global.css

@@ -18,16 +18,20 @@ body {
     overflow: hidden;
 }
 
-.game-container{    
+.game-container{
     position: relative;
-    /* width: 352px; */
-    /* height: 198px; */
-    margin: 0 auto;
+    width: 352px;
+    height: 198px;
+    /* height: 550px; */
+    /* height: 100vh; */
+    /* width: 100vw; */
+    /* margin: 0 auto; */
+    margin: 0;
     outline: 1px solid white;
 
-    /* transform: scale(3) translateY(50%); */
-    transform: scale(1.5) translateY(0%);
-    /* transform: scale(1) translate(50%); */
+    transform: scale(3) translateY(50%);
+    transform: scale(1.50) translateY(50%) translateX(90%);
+    /* transform: scale(1) translateY(30%) translateX(50%); */
     /* transform:translateY(20%); */
 }