add oxygen meter

docs/roadmap.md

@@ -2,12 +2,15 @@
 
 - [ ] Test Map
 - [ ] Vehicles
-- [ ] Swimming (inkl. Oxygen-Meter)
-  - [ ] ordentlichs HUD bauen
+- [ ] Swimming 
+- [x] Oxygen-Meter
+- [ ] ordentliches HUD bauen
+   - [ ] Elemente müssen variable und optional sein.
 - [ ] Global Progress Object
 - [ ] Menus & Textboxes
 - [ ] Save & Load
 - [ ] Mobile Controls
+- [ ] Collision Boxes (nicht identisch mit der Sprite-Größe)
 - [ ] Spores
 - [ ] Webhosting
 - [ ] Boss Battles
@@ -41,6 +44,8 @@ GlobalProgress {
   "currentHitpoints": 3,
   "maxHitpoints": 5,
   "collectedCrystals": 26,
+  "oxygen": 70,
+  "maxOxygen": 70,
   "ammo": {
    "blaster": 10,
    "rocketLauncher": 5,

js/update.js

@@ -185,6 +185,7 @@ function addAmmo(p) {
   }
 }
 
+// * Check if Player is Swimming or Diving
 function checkLiquids() {
   var n, max, l
   for (n = 0, max = liquids.length; n < max; n++) {
@@ -197,6 +198,38 @@ function checkLiquids() {
     } else {
       player.swimming = false
     }
+    if (
+      overlap(
+        player.x,
+        player.y - player.height,
+        TILE,
+        TILE,
+        l.x,
+        l.y,
+        l.width,
+        l.height
+      )
+    ) {
+      player.diving = true
+      reduceOxygen(4)
+    } else {
+      player.diving = false
+      replenishOxygen(16)
+    }
+  }
+}
+
+// * Reduce & Replenish Oxygen Functions
+function reduceOxygen(rate) {
+  if (player.diving && globalObject.oxygen >= 0) {
+    globalObject.oxygen -= rate / 100
+  } else if (player.vul) {
+    reduceHitpoints(player, 1, 2000)
+  }
+}
+function replenishOxygen(rate) {
+  if (globalObject.oxygen <= globalObject.maxOxygen) {
+    globalObject.oxygen += rate / 100
   }
 }
 
@@ -252,7 +285,9 @@ function killMonster(monster) {
 }
 
 // * Take Damage Function
-function reduceHitpoints(entity, damage) {
+function reduceHitpoints(entity, damage, timeout) {
+  const milliceconds = timeout || 1500
+
   if (
     entity.player ? globalObject.hitpoints > 1 : entity.currentHitpoints > 1
   ) {
@@ -265,7 +300,7 @@ function reduceHitpoints(entity, damage) {
     setTimeout(() => {
       entity.vul = true
       entity.hurt = false
-    }, 1500)
+    }, milliceconds)
   } else killEntity(entity)
 }
 
@@ -285,6 +320,7 @@ function killPlayer(player) {
   player.y = player.start.y
   player.dx = player.dy = 0
   globalObject.hitpoints = player.maxHitpoints
+  globalObject.oxygen = globalObject.maxOxygen
   globalObject.lifes--
   console.log('log globalObject: ', globalObject.lifes)
 }

js/utils.js

@@ -83,12 +83,16 @@ function toggleDevInfos() {
   }
 }
 
+// * HUD Renderfunktion
 function renderHudSprites() {
   const hudObject = {
-    player_hitpoints: player.currentHitpoints,
-    player_collected: player.collected,
+    player_hitpoints: globalObject.hitpoints,
+    player_collected: globalObject.collected,
     player_lifes: globalObject.lifes,
     player_ammo: globalObject.ammo,
+    player_swimming: player.swimming,
+    player_diving: player.diving,
+    player_oxygen: Math.trunc(globalObject.oxygen),
   }
 
   function hitpoints() {
@@ -98,8 +102,16 @@ function renderHudSprites() {
     ctx.font = '12px C64 TrueType'
 
     ctx.fillStyle = 'white'
-    ctx.fillText(`lifes: ${hudObject.player_lifes}`, 50, 50)
+    // Hitpoints
+    ctx.fillText(`HP: ${hudObject.player_hitpoints}`, 20, 40)
+    // Extralifes
+    ctx.fillText(`lifes: ${hudObject.player_lifes}`, 20, 20)
+    // Ammo
     ctx.fillText(`ammo: ${hudObject.player_ammo}`, 200, 50)
+
+    // Oxygen
+    ctx.fillText(`O2: ${hudObject.player_oxygen}`, 200, 20)
+
     ctx.restore()
   }
   hitpoints()

js/variables.js

@@ -11,6 +11,20 @@ let globalObject = {
   killed: null,
   ammo: 10,
   maxAmmo: 10,
+  oxygen: 70,
+  upgrades: {
+    jumpboots: false,
+    oxygenTank1: false,
+    oxygenTank2: false,
+  },
+  get maxOxygen() {
+    if (this.upgrades.oxygenTank2) {
+      return 240
+    }
+    if (this.upgrades.oxygenTank1) {
+      return 120
+    } else return 60
+  },
 }
 
 // * Import tiles and level map //
@@ -330,6 +344,7 @@ let globalPlayer = {
   interact: false,
   shooting: false,
   swimming: false,
+  diving: false,
   sprites: {
     idle: {
       tiles: [5],