Collision detection + npc movement

.gitignore

@@ -0,0 +1,2 @@
+.vs/
+.vscode/

index.html

@@ -21,6 +21,7 @@
     <script src="./js/Person.js"></script>
     <script src="./js/Sprite.js"></script>
     <script src="./js/OverworldMap.js"></script>
+    <script src="./js/OverworldEvent.js"></script>
     <script src="./js/init.js"></script>
 </body>
 </html>

js/GameObject.js

@@ -1,15 +1,58 @@
 class GameObject {
     constructor(config) {
+        this.id = null;
+        this.isMounted = false;
         this.x = config.x || 0;
         this.y = config.y || 0;
         this.direction = config.direction || "down";
         this.sprite = new Sprite({
             gameObject: this,
             src: config.src || "./images/hero.png",
         });
+
+        this.behaviorLoop = config.behaviorLoop || [];
+        this.behaviorLoopIndex = 0;
+    }
+
+    mount(map) {
+        console.log("Mounting");
+        this.isMounted = true;
+        map.addWall(this.x, this.y);
+
+        // if we have a behavior, kick it off after a short delay
+        setTimeout(() => {
+            this.doBehaviorEvent(map);
+        }, 10);
     }
 
     update() {
+    }
+
+    async doBehaviorEvent(map) {
+
+        // maybe the game object has no current behaviour or there's a global event (like a cutscene)
+        if(map.isCutscenePlaying || this.behaviorLoop.length === 0) {
+            return;
+        }
+
+
+        // setting up the event with the relevant info
+        let eventConfig = this.behaviorLoop[this.behaviorLoopIndex];
+        eventConfig.who = this.id;
+
+        // create an event instance out of our next event config
+        const eventHandler = new OverworldEvent({map, event: eventConfig});
+        await eventHandler.init(); // wait until the event gets revolved
+
+        // setting the next event to fire
+        this.behaviorLoopIndex += 1;
+        if(this.behaviorLoopIndex === this.behaviorLoop.length) {
+            this.behaviorLoopIndex = 0;
+        }
+
+        // fire the next behavior
+        this.doBehaviorEvent(map);
+
 
     }
 

js/Overworld.js

@@ -8,11 +8,23 @@ class Overworld {
 
     init() {
         this.map = new OverworldMap(window.OverworldMaps.DemoRoom);
+        this.map.mountObjects();
+
         this.directionInput = new DirectionInput();
         this.directionInput.init();
-
+        
         this.startGameLoop();
         // game loop fires at 60 fps
+
+
+        this.map.startCutscene([
+            {who: "hero", type: "walk", direction: "down"},
+            {who: "hero", type: "walk", direction: "down"},
+            {who: "npcA", type: "walk", direction: "left"},
+            {who: "npcA", type: "walk", direction: "left"},
+            {who: "npcA", type: "stand", direction: "up", time: 800},
+
+        ])
 
     }
 
@@ -27,7 +39,9 @@ class Overworld {
             // update all objects
             Object.values( this.map.gameObjects ).forEach( object => {
                 object.update({
-                    arrow: this.directionInput.direction
+                    arrow: this.directionInput.direction,
+                    map: this.map,
+
                 })
             })
 
@@ -36,7 +50,10 @@ class Overworld {
 
             this.map.drawLowerImage(this.context, cameraPerson);
 
-            Object.values( this.map.gameObjects ).forEach( object => {
+            // that sorting is done to render objects that are lower later, so that when someone walks under another person then they first person gets rendered on top
+            Object.values( this.map.gameObjects ).sort((a,b) => {
+                return a.y - b.y;
+            }).forEach( object => {
                 object.sprite.draw(this.context, cameraPerson);
             })
 
@@ -47,7 +64,7 @@ class Overworld {
                 step();
             });
         }
-        console.log(performance.now());
+        // console.log(performance.now());
         step();
     }
 }

js/OverworldEvent.js

@@ -0,0 +1,56 @@
+class OverworldEvent {
+    constructor({map, event}) {
+        this.map = map;
+        this.event = event;
+    }
+
+    init() {
+        return new Promise(resolve => {
+            this[this.event.type](resolve)
+        })
+    }
+
+    stand(resolve) {
+        const who = this.map.gameObjects[this.event.who];
+        who.startBehavior({
+            map: this.map
+        }, {
+            type: "stand",
+            direction: this.event.direction,
+            time: this.event.time
+        })
+
+        const completeHandler = (e) => {
+            if(e.detail.whoId === this.event.who) {
+                document.removeEventListener("PersonStandComplete", completeHandler);
+                resolve();
+            }
+        }
+        document.addEventListener("PersonStandComplete", completeHandler);
+
+
+
+
+    }
+
+    walk(resolve) {
+        const who = this.map.gameObjects[this.event.who];
+        who.startBehavior({
+            map: this.map
+        }, {
+            type: "walk",
+            direction: this.event.direction,
+            retry: true // if true, then the game object retries its movement after an interrupt (get an npc to start walking again after collision with the player)
+        })
+
+        // Set up a handler to complete when the correct person is done walking.
+        // Then resolve the event
+        const completeHandler = (e) => {
+            if(e.detail.whoId === this.event.who) {
+                document.removeEventListener("PersonWalkingComplete", completeHandler);
+                resolve();
+            }
+        }
+        document.addEventListener("PersonWalkingComplete", completeHandler);
+    }
+}

js/OverworldMap.js

@@ -8,6 +8,9 @@ class OverworldMap {
 
         this.lowerImage.src = config.lowerSrc; // floor
         this.upperImage.src = config.upperSrc; // what is rendered above the floor (above the player) like tree tops
+
+        this.isCutscenePlaying = true;
+
     }
 
     drawLowerImage(context, cameraPerson) {
@@ -18,6 +21,52 @@ class OverworldMap {
         context.drawImage(this.upperImage, utils.withGrid(10.5) - cameraPerson.x, utils.withGrid(6) - cameraPerson.y);
     }
 
+    isSpaceTaken(currentX, currentY, direction) {
+        const {x,y} = utils.nextPosition(currentX, currentY, direction);
+        return this.walls[`${x},${y}`] || false;
+    }
+
+    mountObjects() {
+        Object.keys(this.gameObjects).forEach( key => {
+            let object = this.gameObjects[key];
+            object.id = key;
+
+            // TODO: determine if this object should be mounted or not
+            object.mount(this);
+        })
+    }
+
+    async startCutscene(events) {
+        this.isCutscenePlaying = true;
+
+        // start a loop of async events
+        // await each event
+        for(let i = 0; i < events.length; i++) {
+            const eventHandler = new OverworldEvent({
+                event: events[i],
+                map: this,
+            })
+            await eventHandler.init();
+        }
+
+        this.isCutscenePlaying = false;
+    }
+
+    addWall(x,y) {
+        this.walls[`${x},${y}`] = true;
+    }
+
+    removeWall(x,y) {
+        delete this.walls[`${x},${y}`];
+    }
+
+    moveWall(wasX, wasY, direction) {
+        this.removeWall(wasX, wasY);
+        const {x,y} = utils.nextPosition(wasX,wasY,direction);
+        this.addWall(x,y);
+    }
+
+
 }
 
 window.OverworldMaps = {
@@ -32,19 +81,37 @@ window.OverworldMaps = {
                 y: utils.withGrid(6)
             }),
 
-            npc1: new Person({
+            npcA: new Person({
                 x: utils.withGrid(7),
                 y: utils.withGrid(9),
-                src: "./images/npc1.png"
+                src: "./images/npc1.png",
+                behaviorLoop: [
+                    {type: "stand", direction: "left", time: 800},
+                    {type: "stand", direction: "up", time: 800},
+                    {type: "stand", direction: "right", time: 1200},
+                    {type: "stand", direction: "up", time: 300}
+
+                ]
             }),
 
-            // walls: {
-            //     [utils.asGridCoord(7,6)]: true,
-            //     [utils.asGridCoord(8,6)]: true,
-            //     [utils.asGridCoord(7,7)]: true,
-            //     [utils.asGridCoord(8,7)]: true,
-
-            // }
+            npcB: new Person({
+                x: utils.withGrid(3),
+                y: utils.withGrid(7),
+                src: "./images/npc2.png",
+                behaviorLoop: [
+                    {type: "walk", direction: "left"},
+                    {type: "stand", direction: "left", time: 800},
+                    {type: "walk", direction: "up"},
+                    {type: "walk", direction: "right"},
+                    {type: "walk", direction: "down"}
+                ]
+            }),
+        },
+        walls: {
+            [utils.asGridCoord(7,6)]: true,
+            [utils.asGridCoord(8,6)]: true,
+            [utils.asGridCoord(7,7)]: true,
+            [utils.asGridCoord(8,7)]: true,   
         }
     },
 
@@ -57,20 +124,17 @@ window.OverworldMaps = {
                 y: 5,
             }),
 
-            npc1: new GameObject({
+            npcA: new GameObject({
                 x: 9,
                 y: 6,
                 src: "./images/npc1.png"
             }),
 
-            npc2: new GameObject({
+            npcB: new GameObject({
                 x: 10,
                 y: 8,
                 src: "./images/npc2.png"
             })
         }
     },
-
 }
-
-