Make events triggererd by interaction

rooms/sample.tmj

@@ -59,6 +59,33 @@
                  "width":64,
                  "x":128,
                  "y":256
+                }, 
+                {
+                 "height":64,
+                 "id":4,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"color",
+                         "type":"string",
+                         "value":"green"
+                        }, 
+                        {
+                         "name":"event",
+                         "type":"string",
+                         "value":"change_color"
+                        }, 
+                        {
+                         "name":"interactEvent",
+                         "type":"string",
+                         "value":"log_test"
+                        }],
+                 "rotation":0,
+                 "type":"",
+                 "visible":true,
+                 "width":64,
+                 "x":128,
+                 "y":384
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -98,7 +125,7 @@
          "y":0
         }],
  "nextlayerid":4,
- "nextobjectid":4,
+ "nextobjectid":5,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.11.2",

src/player.js

@@ -7,11 +7,12 @@ export default class Player extends Actor {
     this.x = x
     this.y = y
     this.width = 32
-    this.height = 64
+    this.height = 32
     this.xVel = 0
     this.yVel = 0
     this.color = "#56E"
     this.playerDirection = { x: 0, y: 1 }
+    this.interactHitbox = null
   }
 
   tick(dt) {
@@ -27,15 +28,30 @@ export default class Player extends Actor {
     this.y += this.yVel 
 
     if (!isZeroVector(dir)) this.playerDirection = dir
+
+    if (this.isInputPressed("interact")) this.createInteractHitbox()
+    else this.interactHitbox = null
+  }
+
+  createInteractHitbox() {
+    this.interactHitbox = {
+      width: this.width,
+      height: this.height,
+      x: this.x + (this.playerDirection.x * this.width / 2),
+      y: this.y + (this.playerDirection.y * this.height / 2),
+    }
+  }
+
+  isInputPressed(action) {
+    return this.game.input.isInputPressed.call(this.game.input, action)
   }
 
   inputDirection() {
-    const isInputPressed = this.game.input.isInputPressed.bind(this.game.input)
     const dir = { x: 0, y: 0 }
-    if (isInputPressed("up")) dir.y -= 1
+    if (this.isInputPressed("up")) dir.y -= 1
-    if (isInputPressed("down")) dir.y += 1
+    if (this.isInputPressed("down")) dir.y += 1
-    if (isInputPressed("left")) dir.x -= 1
+    if (this.isInputPressed("left")) dir.x -= 1
-    if (isInputPressed("right")) dir.x += 1
+    if (this.isInputPressed("right")) dir.x += 1
 
     if (Math.abs(dir.x, dir.y) == 2) {
       dir.x *= SQRT_OF_TWO
@@ -47,10 +63,11 @@ export default class Player extends Actor {
 
   draw(ctx) {
     this.color = `rgb(128 ${(this.playerDirection.x * 128) + 128} ${(this.playerDirection.y * 128) + 128}`
-    ctx.beginPath()
     ctx.fillStyle = this.color
-    ctx.rect(this.x, this.y, this.width, this.height)
+    ctx.fillRect(this.x, this.y, this.width, this.height)
-    ctx.fill()
+    if (this.interactHitbox) {
-    ctx.closePath()
+      ctx.fillStyle = "#FF000088"
+      ctx.fillRect(this.interactHitbox.x, this.interactHitbox.y, this.interactHitbox.width, this.interactHitbox.height)
+    }
   }
 }

src/room.js

@@ -18,6 +18,10 @@ export default class Room {
 	const eventName = object.properties.find(property => property.name == "event")?.value
 	if (eventName) game.triggerEvent(eventName, object)
       }
+      if (player.interactHitbox && doRectanglesOverlap(player.interactHitbox, object)) {
+	const eventName = object.properties.find(property => property.name == "interactEvent")?.value
+	if (eventName) game.triggerEvent(eventName, object)
+      }
     })
   }