Gisela and target point added.

js/Gisela.js

@@ -0,0 +1,10 @@
+import RetroAnimation from "./retro/RetroAnimation.js";
+import Movable from "./Movable.js";
+
+export default class Gisela extends Movable
+{
+    constructor() {
+        const SCALE = 2;
+        super(new RetroAnimation('graphics/gisela-right.png', 1, SCALE, 1));
+    }
+}

js/MrCroc.js

@@ -4,7 +4,7 @@ import RetroAnimation from "./retro/RetroAnimation.js";
 export default class MrCroc extends Movable
 {
     constructor() {
-        let SCALE = 2;
+        const SCALE = 2;
         super(new RetroAnimation('graphics/mr-croc-walk-right.png', 2, SCALE), 7);
         this.isJumping = false;
         this.addAnimation('WALK_RIGHT', new RetroAnimation('graphics/mr-croc-walk-right.png', 2, SCALE, 10));

js/module.js

@@ -1,8 +1,11 @@
+'use strict';
+
 import Key from "./Key.js";
 import MrCroc from "./MrCroc.js";
 import RetroArchitecture from "./retro/RetroArchitecture.js";
 import FileLoader from "./FileLoader.js";
 import Camera from "./Camera.js";
+import Gisela from "./Gisela.js";
 
 class ImageLoader
 {
@@ -78,7 +81,7 @@ function MainLoop(timestamp)
     }
 
     /* Movement left and right */
-    if (KeyLeft.isPressed()) {
+    if (!hasPlayerLeftArchitecture && KeyLeft.isPressed()) {
         let lastWallLeft = Math.min(
             architecture.getWallLeft(mrCroc.getPositionHeadLeft()),
             architecture.getWallLeft(mrCroc.getPositionFootLeft())
@@ -89,7 +92,7 @@ function MainLoop(timestamp)
         if (mrCroc.position.x <= lastWallLeft + mrCroc.getWidth() * 0.5) {
             mrCroc.position.x = lastWallLeft + mrCroc.getWidth() * 0.5 + 1;
         }
-    } else if (KeyRight.isPressed()) {
+    } else if (!hasPlayerLeftArchitecture && KeyRight.isPressed()) {
         let lastWallRight = Math.max(
             architecture.getWallRight(mrCroc.getPositionHeadRight()),
             architecture.getWallRight(mrCroc.getPositionFootRight())
@@ -102,8 +105,27 @@ function MainLoop(timestamp)
         }
     }
 
-    if (!architecture.isInsideArchitecture(mrCroc.position)) {
-        architecture.resetMovableToStartPosition(mrCroc);
+    if (!hasPlayerLeftArchitecture && !architecture.isInsideArchitecture(mrCroc.position)) {
+        hasPlayerLeftArchitecture = true;
+
+        setTimeout(
+            function () {
+                architecture.setMovableToStartPosition(mrCroc);
+                hasPlayerLeftArchitecture = false;
+            }, 2000
+        );
+    }
+
+    if (!gameFinished && architecture.isMovableInsideTargetPosition(mrCroc)) {
+        gameFinished = true;
+
+        setTimeout(
+            function () {
+                alert('Gisela: "Thanks for showing up, Mr. Croc, but I\'m not in danger."');
+                lastTimestamp = timestamp;
+                lastRendered = timestamp;
+            }, 1000
+        )
     }
 
     /* Drawing */
@@ -113,19 +135,7 @@ function MainLoop(timestamp)
         camera.centerCamera(mrCroc.position.x - mrCroc.getWidth() * 0.5, mrCroc.position.y - mrCroc.getHeight() * 0.5);
         architecture.draw(context, camera);
         mrCroc.draw(context, camera);
-
-        /*
-        context.fillRect(0, ceilingHeight, window.innerWidth, 1);
-        context.fillRect(0, groundHeight, window.innerWidth, 1);
-        context.fillStyle = 'black';
-        context.fillRect(lastWallRight, 0, 1, window.innerHeight);
-        context.fillStyle = 'red';
-        context.fillRect(lastWallLeft, 0, 1, window.innerHeight);
-        mrCroc.getPositionHeadRight().draw(context);
-        mrCroc.getPositionFootRight().draw(context);
-        mrCroc.getPositionHeadLeft().draw(context);
-        mrCroc.getPositionFootLeft().draw(context);
-        */
+        gisela.draw(context, camera);
 
         lastRendered = timestamp;
     }
@@ -147,8 +157,10 @@ const LEVEL = JSON.parse(levelJson.getContent());
 let lastRendered = undefined;
 let lastTimestamp = undefined;
 let context;
-let mrCroc, architecture;
+let mrCroc, gisela, architecture;
 let camera = new Camera();
+let gameFinished = false;
+let hasPlayerLeftArchitecture = false;
 
 let KeyLeft = new Key('ArrowLeft');
 let KeyRight = new Key('ArrowRight');
@@ -168,6 +180,10 @@ let imgArch = new Image();
 imgArch.src = 'graphics/tileset-landscape01.jpg';
 loader.addImage(imgArch);
 
+let imgGisela = new Image();
+imgGisela.src = 'graphics/gisela-right.png';
+loader.addImage(imgGisela);
+
 window.addEventListener(
     'imagesloaded',
     () => {
@@ -190,11 +206,10 @@ window.addEventListener(
         camera.borderBottom = architecture.rows * architecture.tileHeight;
 
         mrCroc = new MrCroc();
-        architecture.resetMovableToStartPosition(mrCroc);
-        /*
-        mrCroc.position.x = architecture.tileWidth * LEVEL.startX + architecture.tileWidth * 0.5;
-        mrCroc.position.y = architecture.tileHeight * LEVEL.startY;
-        */
+        architecture.setMovableToStartPosition(mrCroc);
+
+        gisela = new Gisela();
+        architecture.setMovableToTargetPosition(gisela);
 
         window.requestAnimationFrame(MainLoop);
     }

js/retro/RetroArchitecture.js

@@ -17,6 +17,8 @@ export default class RetroArchitecture
         this.tileHeight = this.tileset.getHeight();
         this.startX = 0;
         this.startY = 0;
+        this.targetX = 0;
+        this.targetY = 0;
 
         this.init();
     }
@@ -158,12 +160,33 @@ export default class RetroArchitecture
         return architectureRect.isContainingPoint(geometryPoint);
     }
 
-    resetMovableToStartPosition(movable)
+    setMovableToStartPosition(movable)
     {
         movable.position.x = this.tileWidth * this.startX + this.tileWidth * 0.5;
         movable.position.y = this.tileHeight * this.startY + this.tileHeight * 0.5;
     }
 
+    setMovableToTargetPosition(movable)
+    {
+            movable.position.x = this.tileWidth * this.targetX + this.tileWidth * 0.5;
+            movable.position.y = this.tileHeight * this.targetY + this.tileHeight;
+    }
+
+    isMovableInsideTargetPosition(movable)
+    {
+        let tileRect = new GeometryRect(
+            this.targetX * this.tileWidth,
+            this.targetY * this.tileHeight,
+            this.tileWidth,
+            this.tileHeight
+        );
+
+        return tileRect.isContainingPoint(movable.getPositionHeadLeft()) ||
+            tileRect.isContainingPoint(movable.getPositionHeadRight()) ||
+            tileRect.isContainingPoint(movable.getPositionFootLeft()) ||
+            tileRect.isContainingPoint(movable.getPositionFootRight());
+    }
+
     draw(context, camera = null)
     {
         let viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
@@ -205,6 +228,8 @@ export default class RetroArchitecture
 
         architecture.startX = data.startX;
         architecture.startY = data.startY;
+        architecture.targetX = data.targetX;
+        architecture.targetY = data.targetY;
 
         for (let y = 0; y < data.rows; y++) {
             for (let x = 0; x < data.columns; x++) {