Committing a working game

images/R&D Room Assets/Font.txt

@@ -0,0 +1,2 @@
+Future Millennium
+https://www.dafont.com/futuremillennium.font

images/R&D Room Assets/license.txt

@@ -0,0 +1 @@
+https://craftpix.net/file-licenses/

js/GameObject.js

@@ -1,21 +1,18 @@
-class GameObject {
+class GameObject {  // all people
     constructor(config) {
-        this.id = null;
-        this.isMounted = false;
-        this.x = config.x || 0;
+        this.id = null;         // name passed in overworld map like 'hero', 'npcA', 'npcB'
+        this.isMounted = false; // turns true once the game object gets mounted
+        this.x = config.x || 0; // current x and y coordinates of the character
         this.y = config.y || 0;
-        this.direction = config.direction || "down";
+        this.direction = config.direction || "down"; // current direction of the character
         this.sprite = new Sprite({
             gameObject: this,
-            src: config.src || "./images/hero.png",
+            src: config.src || "./images/hero.png", // link to the character's spritesheet
         });
 
-        this.behaviorLoop = config.behaviorLoop || [];
-        this.behaviorLoopIndex = 0;
-
-
+        this.behaviorLoop = config.behaviorLoop || []; // used for the behavior of npcs. This is a list of objects with the behavior type, which is defined in OverworldMap.js
+        this.behaviorLoopIndex = 0; // keeps track of 
         this.talking = config.talking || [];
-
     }
 
     mount(map) {
@@ -24,6 +21,7 @@ class GameObject {
         map.addWall(this.x, this.y);
 
         // if we have a behavior, kick it off after a short delay
+        // applies to the behavior of npcs
         setTimeout(() => {
             this.doBehaviorEvent(map);
         }, 10);
@@ -32,15 +30,14 @@ class GameObject {
     update() {
     }
 
+    // mostly for npcs
     async doBehaviorEvent(map) {
-
         // maybe the game object has no current behaviour or there's a global event (like a cutscene)
         // also return; if the person is currently standing
         if(map.isCutscenePlaying || this.behaviorLoop.length === 0 || this.isStanding) {
             return;
         }
 
-
         // setting up the event with the relevant info
         let eventConfig = this.behaviorLoop[this.behaviorLoopIndex];
         eventConfig.who = this.id;
@@ -54,11 +51,7 @@ class GameObject {
         if(this.behaviorLoopIndex === this.behaviorLoop.length) {
             this.behaviorLoopIndex = 0;
         }
-
         // fire the next behavior
         this.doBehaviorEvent(map);
-
-
     }
-
-}
+}

js/OverworldEvent.js

@@ -55,7 +55,6 @@ class OverworldEvent {
     }
 
     textMessage(resolve) {
-
         if(this.event.faceHero) { // this.event.faceHero = id of the npc to face that will face the hero
             const obj = this.map.gameObjects[this.event.faceHero];
             obj.direction = utils.oppositeDirection(this.map.gameObjects['hero'].direction);
@@ -74,7 +73,7 @@ class OverworldEvent {
 
         sceneTransition.init(document.querySelector('.game-container'), () => {
             this.map.overworld.startMap(window.OverworldMaps[this.event.map]); // the value this.event.map is referencing {type: "changeMap", map: "Kitchen"}  in OverworldMap
-            resolve(); 
+            resolve();
 
             sceneTransition.fadeOut();
         });

js/OverworldMap.js

@@ -91,8 +91,6 @@ class OverworldMap {
         }
     }
 
-
-
     addWall(x,y) {
         this.walls[`${x},${y}`] = true;
     }
@@ -106,22 +104,32 @@ class OverworldMap {
         const {x,y} = utils.nextPosition(wasX,wasY,direction);
         this.addWall(x,y);
     }
-
-
 }
 
 window.OverworldMaps = {
     DemoRoom: {
-        // lowerSrc: "./images/DemoLower.png",
+        // lowerSrc: "./images/HarshGeniusMap1.png",
+        // lowerSrc: "./images/ourMap96.png",
         lowerSrc: "./images/DemoLower.png",
         upperSrc: "./images/DemoUpper.png",
         gameObjects: {
 
             hero: new Person({
                 isPlayerControlled: true,
+                // src: "./images/hero64.png",
                 x: utils.withGrid(5),
                 y: utils.withGrid(6)
             }),
+
+            // myDrone: new Person({
+            //     x: utils.withGrid(8),
+            //     y: utils.withGrid(8),
+            //     src: "./images/myDrone.png",
+            //     animations: { // these values are according to the drone's spritesheet
+            //         "spinning": [[0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],[0,7]]
+            //     },
+            //     currentAnimation: "spinning",
+            // }),
 
             npcA: new Person({
                 x: utils.withGrid(7),

js/Sprite.js

@@ -31,7 +31,8 @@ class Sprite {
             "walk-left":  [[1,3], [0,3], [3,3], [0,3]],
         }
 
-        this.currentAnimation = "idle-right"//config.currentAnimation || "idle-down";
+        // this.currentAnimation = "idle-right"  //config.currentAnimation || "idle-down";
+        this.currentAnimation = config.currentAnimation || "idle-right";
         this.currentAnimationFrame = 0;
 
         // how many game loop frames to show one cut from the sprite sheet
@@ -55,7 +56,6 @@ class Sprite {
         }
     }
 
-
     updateAnimationProgress() {
         // downtick current frame's progress
         if(this.animationFrameProgress > 0) {

styles/global.css

@@ -26,6 +26,9 @@ body {
     outline: 1px solid white;
 
     transform: scale(3) translateY(50%);
+    /* transform: scale(1.5) translateY(50%); */
+    /* transform: scale(1) translate(50%); */
+    /* transform:translateY(20%); */
 }
 
 .game-container canvas{