add safe and fuse box objects

Author: ZeroDragon

engine/game.js

@@ -2,7 +2,7 @@
 
 const ctxObjects = document.getElementById('objects').getContext('2d')
 const ctxSight = document.getElementById('sight').getContext('2d')
-const [drawCollitions, noShadows] = [false, false]
+const [drawCollitions, noShadows] = [true, true]
 
 // eslint-disable-next-line no-unused-vars
 const game = {
@@ -95,29 +95,51 @@ const game = {
   },
   activateObject (x, y) {
     const ply = Player.getCurrent()
+    x = x + ply.position.col.x
+    y = y + ply.position.col.y
+
+    const left1 = x
+    const right1 = x + ply.bound.w
+    const top1 = y
+    const bottom1 = y + ply.bound.h
+
     const obj = this.objects.find(itm => {
-      return itm.col.x <= x &&
-        itm.col.x + itm.col.w >= x &&
-        itm.col.y <= y &&
-        itm.col.y + itm.col.h >= y
+      const left2 = itm.col.x
+      const right2 = itm.col.x + itm.col.w
+      const top2 = itm.col.y
+      const bottom2 = itm.col.y + itm.col.h
+      return left1 < right2 && right1 > left2 && top1 < bottom2 && bottom1 > top2
     })
 
     if (!obj) return false
+
+    if (obj.properties.restrictFrom?.includes(ply.movement)) return
+
     let direction = { x: 32, y: 0 }
     if (x < (ply.position.x + 8)) direction.x = -32
     if (y < (ply.position.y + 32)) direction = { x: 0, y: -48 }
     if (y > (ply.position.y + 32)) direction = { x: 0, y: 48 }
 
     ply.interactingWith = obj
-    if (obj.state === true && ['window', 'door'].includes(obj.type)) {
-      ply.move({ x: ply.position.x + direction.x, y: ply.position.y + direction.y }, true)
-      if (obj.type === 'door') obj.state = false
-      this.drawObject(obj)
-      return false
+
+    if (obj.state === true) {
+      if (['window', 'door'].includes(obj.type)) {
+        ply.move({ x: ply.position.x + direction.x, y: ply.position.y + direction.y }, true)
+      }
+
+      if (obj.properties.returnState) {
+        obj.state = false
+        this.drawObject(obj)
+        return false
+      }
     }
 
     obj.state = true
     this.drawObject(obj)
+    if (obj.properties.interactive) {
+      ply.stance = 'kneeled'
+      ply.draw()
+    }
     return false
   },
   toggleVisibility (obj) {

engine/player.js

@@ -4,8 +4,9 @@
 class Player {
   constructor (ctx, x, y, active = false) {
     this.position = {
-      x, y, flip: true, inside: false, col: { x: 8, y: 32 }
+      x, y, flip: true, inside: false, col: { x: 8, y: 32, w: 16, h: 16 }
     }
+    this.stance = 'standing'
     this.active = active
     this.ctx = ctx
     if (!Player.instances) Player.instances = []
@@ -23,7 +24,9 @@ class Player {
   setBound () {
     this.bound = {
       x: this.position.x + this.position.col.x,
-      y: this.position.y + this.position.col.y
+      y: this.position.y + this.position.col.y,
+      w: this.position.col.w,
+      h: this.position.col.h
     }
   }
 
@@ -62,6 +65,7 @@ class Player {
         (relative === 'down' && this.movement === 'up')
       ) {
         this.interactingWith.state = false
+        this.stance = 'standing'
         game.drawObject(this.interactingWith)
         delete this.interactingWith
         return
@@ -74,7 +78,8 @@ class Player {
     if (!jump) {
       const computed = game.computePosition(x, y + 16)
       if (computed.x < 1 || computed.x > 32 || computed.y < 2 || computed.y > 32) return
-      if (game.activateObject(x + this.position.col.x, y + this.position.col.y)) return
+      // if (game.activateObject(x + this.position.col.x, y + this.position.col.y)) return
+      if (game.activateObject(x, y)) return
       if (game.collitionMap[computed.collitionIndex] !== 0) return
     }
     this.position.x = x
@@ -88,17 +93,39 @@ class Player {
     this.position.inside = game.insideMap[collitionIndex] !== 0
     this.ctx.beginPath()
     this.ctx.clearRect(0, 0, 512, 512)
-    const [spriteX, spriteY] = {
+    let w = 32
+    let h = 48
+    let kneelOffset = { x: 0, y: 0 }
+    let [spriteX, spriteY] = {
       // flipped, inside
       'false,false': [64, 80],
       'true,false': [32, 80],
       'true,true': [32, 128],
       'false,true': [64, 128]
     }[[this.position.flip, this.position.inside].join(',')]
-    this.ctx.drawImage(tileset, spriteX, spriteY, 32, 48, this.position.x, this.position.y, 32, 48)
+    if (this.stance === 'kneeled') {
+      w = 32
+      h = 32
+      spriteX = 0
+      spriteY = 96
+      if (this.position.inside) spriteY = 144
+      kneelOffset = { x: 4, y: 8 }
+    }
+
+    this.ctx.drawImage(
+      tileset,
+      spriteX,
+      spriteY,
+      w,
+      h,
+      this.position.x + kneelOffset.x,
+      this.position.y + kneelOffset.y,
+      w,
+      h
+    )
     if (drawCollitions) {
       // draw collition on player
-      this.ctx.rect(this.bound.x, this.bound.y, 16, 16)
+      this.ctx.rect(this.bound.x, this.bound.y, this.bound.w, this.bound.h)
       this.ctx.strokeStyle = game.palette[1]
       this.ctx.stroke()
     }

engine/user.js

@@ -98,7 +98,8 @@ const setPalette = tileset => {
 }
 
 const preload = level => {
-  Player.create(ctxPlayer1, -8, 0, true)
+  Player.create(ctxPlayer1, 280, 160, true)
+  // Player.create(ctxPlayer1, -8, 0, true)
   Player.create(ctxPlayer2, -8, 32)
   fetch(`${level}/map.json`)
     .then(response => response.json())

levels/0001/0001.tiled-session

@@ -22,10 +22,10 @@
                 13
             ],
             "scale": 1.38974609375,
-            "selectedLayer": 8,
+            "selectedLayer": 5,
             "viewCenter": {
-                "x": 285.3039139905839,
-                "y": 232.4165554072096
+                "x": 254.72278827910904,
+                "y": 225.22099641627435
             }
         },
         "paleta.tsx": {