*

1 files changed, 25 insertions, 0 deletions

diff --git a/js/canvas/game.js b/js/canvas/game.js
index ea05b7f..9cad0f9 100644
--- a/js/canvas/game.js
+++ b/js/canvas/game.js
@@ -22,6 +22,22 @@ const player = {
 const playerSprite = new Image();
 playerSprite.src = player.spriteUrl;
 
+
+const npc = {
+  x: 100, // starting x-position
+  y: 100, // starting y-position
+  width: 16, // width of the NPC
+  height: 16, // height of the NPC
+  color: 'pink' // color of the NPC
+};
+
+// Function to draw the NPC
+function drawNPC() {
+  ctx.fillStyle = npc.color;
+  ctx.fillRect(npc.x, npc.y, npc.width, npc.height);
+}
+
+
 // add keyboard input
 // FIXME: this input is blocking, allowing for only 1 key to be read at a time
 // this means that if you wanna do 2 things at 1 time you cannot.
@@ -79,11 +95,20 @@ function gameLoop() {
   if (player.y > canvas.height) {
     player.y = 1
   }
+  
+  // detect if the player is touching the NPC
+  if (player.x < npc.x + npc.width && player.x + player.width > npc.x && player.y < npc.y + npc.height && player.y + player.height > npc.y) {
+    // collision detected!
+    console.log('collision detected!');
+    // change the color of the NPC
+    npc.color = 'red';
+  }
 
   // draw
   // ctx.fillStyle = player.color;
   ctx.fillRect(player.x, player.y, player.width, player.height);  
   ctx.drawImage(playerSprite, player.x, player.y, player.width, player.height);
+  drawNPC();
 
   // next frame
   requestAnimationFrame(gameLoop);