pause graphics upgrade

2020-01-20 14:22:55 -08:00
parent 27373d22e6
commit 2c287368a1
9 changed files with 180 additions and 73 deletions
--- a/index.html
+++ b/index.html
@@ -79,6 +79,12 @@
 ******************************************************************************* -->
 	<div id="choose-grid"></div>
 	<div id="build-grid"></div>
+	<div style="position: absolute; top:0;left:0;">
+		<div id="pause-grid-left" class="pause-grid"></div>
+	</div>
+	<div style="position: absolute; top:0;right:0;">
+		<div id="pause-grid-right" class="pause-grid"></div>
+	</div>
 	<svg class="SVG-button" id="build-button" width="110" height="40">
 		<title>Select 5 power ups and see how far you can progress.</title>
 		<g stroke='none' fill='#333' stroke-width="2" font-size="28px" font-family="Arial, sans-serif">
--- a/js/bullets.js
+++ b/js/bullets.js
@@ -72,13 +72,13 @@ const b = {
      b.mods[i].count = 0
    }
  },
-  acidModSetCheck() {
-    if (mech.health > 0.9) {
+  modOnHealthChange() {
+    if (b.isModAcidDmg && mech.health > 0.9) {
      game.playerDmgColor = "rgba(0,80,80,0.9)"
-      b.isModAcidDmg = true;
+      b.modAcidDmg = 1.4
    } else {
      game.playerDmgColor = "rgba(0,0,0,0.7)"
-      b.isModAcidDmg = false;
+      b.modAcidDmg = 0
    }
  },
  mods: [{
@@ -96,8 +96,8 @@ const b = {
      maxCount: 1,
      count: 0,
      effect() {
-        b.modAcidDmg = 0.9
-        b.acidModSetCheck();
+        b.isModAcidDmg = true;
+        b.modOnHealthChange();
      }
    },
    {
@@ -320,7 +320,7 @@ const b = {
      maxCount: 1,
      count: 0,
      effect: () => {
-        b.isModMassEnergy = true // used in mech.usePowerUp
+        b.isModMassEnergy = true // used in mech.grabPowerUp
        mech.fieldMeter = mech.fieldEnergyMax
      }
    },
--- a/js/engine.js
+++ b/js/engine.js
@@ -175,7 +175,7 @@ function collisionChecks(event) {
          //mob + bullet collisions
          if (obj.classType === "bullet" && obj.speed > obj.minDmgSpeed) {
            // const dmg = b.dmgScale * (obj.dmg + 0.15 * obj.mass * Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity)));
-            let dmg = b.dmgScale * (obj.dmg + b.modAcidDmg * b.isModAcidDmg + 0.15 * obj.mass * Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity)))
+            let dmg = b.dmgScale * (obj.dmg + b.modAcidDmg + 0.15 * obj.mass * Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity)))
            if (b.isModCrit && !mob[k].seePlayer.recall && !mob[k].shield) dmg *= 5
            mob[k].foundPlayer();
            mob[k].damage(dmg);
@@ -193,7 +193,7 @@ function collisionChecks(event) {
          if (obj.classType === "body" && obj.speed > 5) {
            const v = Vector.magnitude(Vector.sub(mob[k].velocity, obj.velocity));
            if (v > 8) {
-              let dmg = b.dmgScale * (b.modAcidDmg * b.isModAcidDmg + v * Math.sqrt(obj.mass) * 0.07);
+              let dmg = b.dmgScale * (b.modAcidDmg + v * Math.sqrt(obj.mass) * 0.07);
              mob[k].damage(dmg);
              if (mob[k].distanceToPlayer2() < 1000000) mob[k].foundPlayer();
              game.drawList.push({
--- a/js/game.js
+++ b/js/game.js
@@ -45,13 +45,13 @@ const game = {
    game.draw.cons();
    game.draw.body();
    mobs.loop();
+    mobs.healthBar();
    mech.draw();
    mech.hold();
    level.drawFills();
    game.draw.drawMapPath();
    b.fire();
    b.bulletActions();
-    mobs.healthBar();
    game.drawCircle();
    ctx.restore();
    game.drawCursor();
@@ -272,19 +272,19 @@ const game = {

    if (keys[80] && !game.isChoosing) { //p  for pause
      if (game.paused) {
+        build.unPauseGrid()
        game.paused = false;
+        level.levelAnnounce();
+        document.body.style.cursor = "none";
        requestAnimationFrame(cycle);
      } else {
        game.paused = true;
        game.replaceTextLog = true;
-        game.makeTextLog("<h1>PAUSED</h1>", 1);
-        // let text = "<h1>PAUSED</h1><br><div style='font-size: 85%;'>"
-        // //output current mod, field, and gun info when paused
-        // if (mech.fieldMode !== 0) text += "<br><p><strong style='font-size:130%;'>" + mech.fieldUpgrades[mech.fieldMode].name + "</strong><br>" + mech.fieldUpgrades[mech.fieldMode].description + "</p>"
-        // if (b.mod !== null) text += "<br><p><strong style='font-size:130%;'>" + b.mods[b.mod].name + "</strong><br>" + b.mods[b.mod].description + "</p>"
-        // if (b.activeGun !== null) text += "<br><p><strong style='font-size:130%;'>" + b.guns[b.activeGun].name + "</strong><br>" + b.guns[b.activeGun].description + "</p>"
-        // text += "</div>"
-        // game.makeTextLog(text, 1);
+        // game.makeTextLog("<h1>PAUSED</h1>", 1);
+        //display grid
+        // document.title = "PAUSED: press P to resume";
+        build.pauseGrid()
+        document.body.style.cursor = "auto";
      }
    }

@@ -486,6 +486,9 @@ const game = {
    document.getElementById("choose-grid").style.display = "none"
    document.getElementById("info").style.display = "inline";
    document.getElementById("build-button").style.display = "inline"
+    document.getElementById("build-grid").style.display = "none"
+    document.getElementById("pause-grid-left").style.display = "none"
+    document.getElementById("pause-grid-right").style.display = "none"
    isShowingBuilds = false
    document.getElementById("splash").style.display = "inline";
    document.getElementById("dmg").style.display = "none";
--- a/js/index.js
+++ b/js/index.js
@@ -2,6 +2,9 @@
 /* TODO:  *******************************************
 *****************************************************

+missiles don't explode reliably enough
+  they can bounce, which is cool, but they should still explode right after a bounce
+
 mod: do something when at full health
  extra damage  (seems too simple)
  power up drop rate?  (hard to see directly)
@@ -191,9 +194,9 @@ const build = {
  makeGrid() {
    let text = `
 <div style="display: flex; justify-content: space-around; align-items: center;">
-    <svg class="SVG-button" onclick="build.startBuildRun()" width="105" height="55">
+    <svg class="SVG-button" onclick="build.startBuildRun()" width="115" height="55">
      <g stroke='none' fill='#333' stroke-width="2" font-size="40px" font-family="Ariel, sans-serif">
-        <text x="13" y="40">start</text>
+        <text x="18" y="40">start</text>
      </g>
    </svg>
    <svg class="SVG-button" onclick="build.reset()" width="70" height="35">
@@ -202,7 +205,7 @@ const build = {
      </g>
    </svg>
  </div>
-  <div class="build-grid-module" style="text-align:center; font-size: 1.00em; line-height: 175%;background-color:#c4ccd8;">
+  <div style="align-items: center; text-align:center; font-size: 1.00em; line-height: 220%;background-color:#c4ccd8;">
  <div id="starting-level"></div>
  <label for="difficulty-select" title="effects: number of mobs, damage done by mobs, damage done to mobs, mob speed, heal effects">difficulty:</label>
  <select name="difficulty-select" id="difficulty-select-custom">
@@ -244,6 +247,42 @@ const build = {
    build.calculateCustomDifficulty()
    document.getElementById("difficulty-select-custom").value = localSettings.difficultyMode
  },
+  pauseGrid() {
+    // let text = `<div class="pause-grid-module" style="border:0px;background:none;"></div>`
+    let text = `<div class="pause-grid-module"><span style="font-size:1.5em;font-weight: 600;">PAUSED</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Press P to unpause</div>`;
+    let countGuns = 0
+    let countMods = 0
+    for (let i = 0, len = b.guns.length; i < len; i++) {
+      if (b.guns[i].have) {
+        text += `<div class="pause-grid-module"><div class="grid-title"><div class="circle-grid gun"></div> &nbsp; ${b.guns[i].name}</div> ${b.guns[i].description}</div>`
+        countGuns++
+      }
+    }
+    let el = document.getElementById("pause-grid-left")
+    el.style.display = "grid"
+    el.innerHTML = text
+
+    text = "";
+    text += `<div class="pause-grid-module"><div class="grid-title"><div class="circle-grid field"></div> &nbsp; ${mech.fieldUpgrades[mech.fieldMode].name}</div> ${mech.fieldUpgrades[mech.fieldMode].description}</div>`
+    for (let i = 0, len = b.mods.length; i < len; i++) {
+      if (b.mods[i].count > 0) {
+        text += `<div class="pause-grid-module"><div class="grid-title"><div class="circle-grid mod"></div> &nbsp; ${b.mods[i].name}</div> ${b.mods[i].description}</div>`
+        countMods++
+      }
+    }
+    el = document.getElementById("pause-grid-right")
+    el.style.display = "grid"
+    el.innerHTML = text
+    if (countMods > 5 || countGuns > 6) {
+      document.body.style.overflowY = "scroll";
+      document.body.style.overflowX = "hidden";
+    }
+  },
+  unPauseGrid() {
+    document.body.style.overflow = "hidden"
+    document.getElementById("pause-grid-left").style.display = "none"
+    document.getElementById("pause-grid-right").style.display = "none"
+  },
  calculateCustomDifficulty() {
    let difficulty = build.list.length * game.difficultyMode
    if (game.difficultyMode === 0) difficulty = build.list.length * 1 - 6
@@ -380,7 +419,7 @@ document.body.addEventListener("mousedown", (e) => {
 const keys = [];
 document.body.addEventListener("keydown", (e) => {
  keys[e.keyCode] = true;
-  game.keyPress();
+  if (mech.alive) game.keyPress();
 });

 document.body.addEventListener("keyup", (e) => {
@@ -388,11 +427,13 @@ document.body.addEventListener("keyup", (e) => {
 });

 document.body.addEventListener("wheel", (e) => {
+  if (!game.paused) {
    if (e.deltaY > 0) {
      game.nextGun();
    } else {
      game.previousGun();
    }
+  }
 }, {
  passive: true
 });
--- a/js/level.js
+++ b/js/level.js
@@ -14,12 +14,12 @@ const level = {
  start() {
    if (level.levelsCleared === 0) {
      level.difficultyIncrease(10)
-      b.giveGuns(0)
+      // b.giveGuns(0)
      // mech.setField(3)
      b.giveMod(1);

-      // level.intro(); //starting level
-      level.testingMap();
+      level.intro(); //starting level
+      // level.testingMap();
      // level.bosses();
      // level.skyscrapers();
      // level.aerie();
--- a/js/player.js
+++ b/js/player.js
@@ -293,7 +293,7 @@ const mech = {
    //smoothly move leg height towards height goal
    mech.yOff = mech.yOff * 0.85 + mech.yOffGoal * 0.15;
  },
-  alive: true,
+  alive: false,
  death() {
    if (b.isModImmortal) { //if player has the immortality buff, spawn on the same level with randomized stats
      spawn.setSpawnList(); //new mob types
@@ -437,7 +437,7 @@ const mech = {
  addHealth(heal) {
    mech.health += heal * game.healScale;
    if (mech.health > mech.maxHealth) mech.health = mech.maxHealth;
-    b.acidModSetCheck();
+    b.modOnHealthChange();
    mech.displayHealth();
  },
  defaultFPSCycle: 0, //tracks when to return to normal fps
@@ -454,7 +454,7 @@ const mech = {
      mech.death();
      return;
    }
-    b.acidModSetCheck();
+    b.modOnHealthChange();
    mech.displayHealth();
    document.getElementById("dmg").style.transition = "opacity 0s";
    document.getElementById("dmg").style.opacity = 0.1 + Math.min(0.6, dmg * 4);
@@ -520,15 +520,6 @@ const mech = {
    //prevents damage happening too quick
  },
  buttonCD: 0, //cool down for player buttons
-  usePowerUp(i) {
-    powerUp[i].effect();
-    Matter.World.remove(engine.world, powerUp[i]);
-    powerUp.splice(i, 1);
-    if (b.isModMassEnergy) {
-      mech.fieldMeter = mech.fieldEnergyMax;
-      mech.addHealth(0.05);
-    }
-  },
  drawLeg(stroke) {
    // if (game.mouseInGame.x > mech.pos.x) {
    if (mech.angle > -Math.PI / 2 && mech.angle < Math.PI / 2) {
@@ -874,16 +865,18 @@ const mech = {
      const dyP = mech.pos.y - powerUp[i].position.y;
      const dist2 = dxP * dxP + dyP * dyP;
      // float towards player  if looking at and in range  or  if very close to player
-      if (dist2 < grabPowerUpRange2 && mech.lookingAt(powerUp[i]) || dist2 < 16000) {
-        if (dist2 < 5000) { //use power up if it is close enough
-          Matter.Body.setVelocity(player, { //player knock back, after grabbing power up
-            x: player.velocity.x + ((powerUp[i].velocity.x * powerUp[i].mass) / player.mass) * 0.3,
-            y: player.velocity.y + ((powerUp[i].velocity.y * powerUp[i].mass) / player.mass) * 0.3
+      if (dist2 < grabPowerUpRange2 && (mech.lookingAt(powerUp[i]) || dist2 < 16000)) {
+        // mech.fieldMeter -= mech.fieldRegen * 0.5;
+        if (mech.health === mech.maxHealth && powerUp[i].name === "heal" && dist2 < 16000) {
+          mech.fieldCDcycle = mech.cycle + 30;
+          //push away
+          Matter.Body.setVelocity(powerUp[i], {
+            x: powerUp[i].velocity.x * 0,
+            y: powerUp[i].velocity.y * 0
          });
-          mech.usePowerUp(i);
-          return;
-        }
-        mech.fieldMeter -= mech.fieldRegen * 0.5;
+          powerUp[i].force.x -= 0.0005 * dxP * powerUp[i].mass;
+          powerUp[i].force.y -= 0.0005 * dyP * powerUp[i].mass;
+        } else {
          powerUp[i].force.x += 7 * (dxP / dist2) * powerUp[i].mass;
          powerUp[i].force.y += 7 * (dyP / dist2) * powerUp[i].mass - powerUp[i].mass * game.g; //negate gravity
          //extra friction
@@ -891,6 +884,21 @@ const mech = {
            x: powerUp[i].velocity.x * 0.11,
            y: powerUp[i].velocity.y * 0.11
          });
+          if (dist2 < 5000) { //use power up if it is close enough
+            if (b.isModMassEnergy) {
+              mech.fieldMeter = mech.fieldEnergyMax;
+              mech.addHealth(0.05);
+            }
+            Matter.Body.setVelocity(player, { //player knock back, after grabbing power up
+              x: player.velocity.x + ((powerUp[i].velocity.x * powerUp[i].mass) / player.mass) * 0.3,
+              y: player.velocity.y + ((powerUp[i].velocity.y * powerUp[i].mass) / player.mass) * 0.3
+            });
+            powerUp[i].effect();
+            Matter.World.remove(engine.world, powerUp[i]);
+            powerUp.splice(i, 1);
+            return; //because the array order is messed up after splice
+          }
+        }
      }
    }
  },
--- a/js/powerups.js
+++ b/js/powerups.js
@@ -74,11 +74,6 @@ const powerUps = {
            if (target.ammo === Infinity) target = b.guns[b.inventory[Math.floor(Math.random() * (b.inventory.length))]]
          }
        }
-      } else {
-        // target = b.guns[Math.floor(Math.random() * b.guns.length)];         //if you don't have any guns just add ammo to a random gun you don't have yet
-        mech.fieldMeter = mech.fieldEnergyMax;
-        if (!game.lastLogTime) game.makeTextLog("<span style='font-size:115%;'><span class='color-f'>+energy</span></span>", 300);
-      }
        if (target.ammo === Infinity) {
          mech.fieldMeter = mech.fieldEnergyMax;
          if (!game.lastLogTime) game.makeTextLog("<span style='font-size:115%;'><span class='color-f'>+energy</span></span>", 300);
@@ -89,6 +84,11 @@ const powerUps = {
          game.updateGunHUD();
          game.makeTextLog("<div class='circle gun'></div> &nbsp; <span style='font-size:110%;'>+" + ammo + " ammo for " + target.name + "</span>", 300);
        }
+      } else {
+        // target = b.guns[Math.floor(Math.random() * b.guns.length)];         //if you don't have any guns just add ammo to a random gun you don't have yet
+        mech.fieldMeter = mech.fieldEnergyMax;
+        if (!game.lastLogTime) game.makeTextLog("<span style='font-size:115%;'><span class='color-f'>+energy</span></span>", 300);
+      }
    }
  },
  field: {
--- a/style.css
+++ b/style.css
@@ -21,6 +21,11 @@ select {
  top: "-15px"; */
 }

+a {
+  text-decoration: none;
+  color: #08c;
+}
+
 #splash {
  user-select: none;
  position: absolute;
@@ -119,16 +124,55 @@ summary {
  color: #aaa;
 }

+.pause-grid {
+  padding: 1px;
+  margin: 0px;
+
+  display: none;
+  grid-template-columns: 316px;
+  /* grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); */
+  grid-auto-rows: minmax(auto, auto);
+  grid-gap: 0px;
+  align-content: space-between;
+
+  z-index: 10;
+  font-size: 1.3em;
+}
+
+#pause-grid-right {
+  justify-content: end;
+  position: relative;
+}
+
+#pause-grid-left {
+  justify-content: start;
+  position: relative;
+}
+
+.pause-grid-module {
+  margin: -1px;
+  padding: 10px;
+  line-height: 170%;
+  /* border-radius: 6px; */
+  border: 2px #000 solid;
+  background-color: #fff;
+  font-size: 0.65em;
+}
+
 #build-grid {
-  padding: 16px;
+  /* align-content: space-between; */
+  padding: 1px;
+  /* padding: 16px; */
  margin: 0px;
  border: 0px;
  background-color: #c4ccd8;

  display: none;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
+  grid-auto-flow: row;
  grid-auto-rows: minmax(auto, auto);
-  grid-gap: 16px;
+  grid-gap: 0px;
+  /* grid-gap: 16px; */

  position: relative;
  bottom: 0px;
@@ -137,10 +181,14 @@ summary {
 }

 .build-grid-module {
+  margin: -1px;
  padding: 10px;
  line-height: 170%;
-  border-radius: 6px;
-  background: #fff;
+  /* border-radius: 6px; */
+  border: 2px #000 solid;
+  background-color: #fff;
+
+  line-height: 170%;
  font-size: 0.65em;
 }

@@ -156,8 +204,8 @@ summary {

 #info {
  position: absolute;
-  bottom: 0px;
-  left: 1px;
+  bottom: 3px;
+  left: 3px;
  z-index: 12;
  font-size: 1.5em;
 }
@@ -165,7 +213,8 @@ summary {
 #details-div {
  padding: 10px;
  border-radius: 8px;
-  background-color: #ddd;
+  border: 2px #333 solid;
+  background-color: #eee;
 }

 #dmg {