123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<body style="background-color: black">
  <div class="combat">
    <div id="playerHealth"></div>
    <div id="playerMana"></div>
    <div class="combatOutput">
      <p class="text-center combatOutputText">
        <p>
    </div>
    <div id="enemyHealth"></div>
  </div>
  <div class="combatMenu">
    <button type="button" class="combatButton" id="useWeapon">Use weapon</button>
    <button type="button" class="combatButton" id="useFireball">Use fireball</button>
    <button type="button" class="combatButton" id="useIce">Use ice shard</button>
    <button type="button" class="combatButton" id="useManaPot">Use mana potion</button>
    <button type="button" class="combatButton" id="useHealthPot">Use Health Potion</button>
    <button type="button" class="combatButton" id="fightShardKeeper">Swap enemies</button>
    <div class="dropdown">
      <button class="dropdown-toggle" id="inventory" type="button" data-toggle="dropdown">Inventory
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">old sword</a></li>
        <li><a href="#">steel mace</a></li>
      </ul>
    </div>
    <button type="button" class="combatButton" id="backToGame">Back to game</button>

  </div>
</body>
            
          
!
            
              body {
  background-color: #000;
}

#console {
  display: none;
  width: 50%;
  margin: auto;
}

p {
  color: white;
}

#message_help {
  display: none;
}

pre {
  color: white;
}

.textBox {
  margin: auto;
  display: block;
}

.output {
  display: none;
  width: 50%;
  margin: auto;
}

/*Begin Combat */

.combat {
  border: 1px solid white;
  width: 50%;
  height: 300px;
  background: black;
  margin: auto;
  margin-top: 50px;
  overflow: auto;
}

.combatMenu {
  border: 1px solid white;
  width: 50%;
  height: 100px;
  background: black;
  margin: auto;
  margin-top: 50px;
}

#playerHealth {
  background: #932424;
  width: 10px;
  height: 200px;
  position: absolute;
  left: 410px;
}

#playerMana {
  background: #248092;
  width: 10px;
  height: 200px;
  position: absolute;
  left: 395px;
}

#enemyHealth {
  background: #932424;
  width: 10px;
  height: 200px;
  position: absolute;
  right: 410px;
  top: 50px;
}

#enemyMana {
  background: #248092;
  width: 10px;
  height: 200px;
  position: absolute;
  right: 395px;
  top: 50px;
}

/* Combat buttons */
.combatButton{
  margin-top: 5px;
  background: gray;
  border: none;
  display: inline-block;
  text-decoration: none;

}

#useWeapon{
  background: #932424;
  margin-left: 5px;
}

#useFireball {
  background: #248092;
}

#useIce {
  background: #248092;
}

#useManaPot {
  background: #248092;
}

#useHealthPot {
  background: #932424;
}

#inventory {
  background-color: black;
  color: white;
  position: relative;
  top: 30px;
}

ul lu {
  color: white;
}

#backToGame {
  float: right;
  margin-right: 5px;
  display: none;
}

            
          
!
            
              $(document).ready(function() {
  //sounds

  var witheredAttackSound = new Audio(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/613226/163440__under7dude__zombie-1.wav"
  );
  var witheredIntroSound = new Audio(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/613226/315847__gneube__zombie-growling.wav"
  );
  var shardKeeperIntroSound = new Audio(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/613226/4512__noisecollector__dragon8.wav"
  );
  var swordAttackSound = new Audio(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/613226/399904__mrthenoronha__shining-8-bit.wav"
  );
  var fireBallSounds = new Audio(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/613226/368511__josepharaoh99__8-bit-fireball.mp3"
  );
  var healthPotSound = new Audio(
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/613226/221488__lloydevans09__glug.wav"
  );
  //event listeners
  function attachListeners() {
    //  Event listeners
    document
      .getElementById("useWeapon")
      .addEventListener("click", useWeapon, false);
    document
      .getElementById("useFireball")
      .addEventListener("click", useFireball, false);
    document
      .getElementById("useHealthPot")
      .addEventListener("click", useHealthPot, false);
    document
      .getElementById("backToGame")
      .addEventListener("click", backToGame, false);
     document
      .getElementById("fightShardKeeper")
      .addEventListener("click", combatSelect, false);
  }

  attachListeners();

  //player and enemy objects
  var player = {
    health: 100,
    mana: 100,
    inventory: ["old sword", "steel mace", ["health potion", 2]],
    travelHistory: []
  };

  //weapons

  var oldSword = {
    name: "old sword",
    stats: 5,
    damageType: "slash"
  };

  var steelMace = {
    name: "Steel mace",
    stats: 20,
    damageType: "blunt"
  };

  //spells

  var fireBall = {
    stats: 20,
    damageType: "fire",
    manaCost: 25,
    owned: false,
    sound: fireBallSounds
  };

  //items
  var healthPot = {
    stats: 35,
    owned: 2,
    sound: healthPotSound
  };

  //enemies

  var withered = {
    name: "withered",
    greeting:
      "A withered shambles forward, barring its menacing teeth. It leaps forwards, attacking first.",
    health: 25,
    attackFirst: true,
    moveNum: 2,
    moves: [["bite", 5], ["slash", 8]],
    vulnerability: ["fire", 5],
    sounds: witheredAttackSound,
    introSound: witheredIntroSound
  };

  var shardKeeper = {
    name: "Shard Keeper",
    greeting:
      "The Shard Keeper lumbers towards you, twirling its massive polearm. Good Luck",
    health: 100,
    moveNum: 3,
    moves: [["slash", 30], ["charge", 50], ["fire breath", 12]],
    vulnerability: ["blunt", 50],
    introSound: shardKeeperIntroSound
  };

  //COMBAT HERE
  //players equipped weapon
  let playerEquipped = steelMace;
  //player damage before being rounded down
  let playerDamage;
  //player damage after being rounded down
  let playerRealDamage;
  //stores random number deciding what move the enemy is using
  let enemyMove;
  //enemy damage
  let enemyDamage;
  //enemy player is currently fighting
  let enemy;
  //checks to see if the enemy has already attacked. Player goes first.
  let hasAttacked = true;
  //prints out combat to combat div
  function combatPrint(input) {
    $(".combatOutput")
      .append("<p class='text-center'>" + input + "</p>");
    //reset textbox
    $("#commandline").val("");
  }
  //  Combat section
  //checks if the game is over by comparing health
  function gameOverCheck(pHealth, eHealth) {
    if (pHealth <= 0) {
      combatPrint("You lose. Refresh to try again.");
      return true;
    } else if (eHealth <= 0) {
      combatPrint("You've defeated the " + enemy.name + ".");
      $("#backToGame").fadeIn(1000);
      return true;
    }
    return false;
  }

  //takes in the maxmum and minimum damage a given move can inflict and returns a random value between those ranges.
  function calcDamage(max, min) {
    return Math.random() * (max - min) + min;
  }

  //finds the number of moves the current enemy can perform and calculates a random number to decide which move is performed.
  function calcEnemyMove(name) {
    var howMany = name.moveNum;
    return Math.floor(calcDamage(howMany + 1, 1)) - 1;
  }

  //changes the height of the player and enemy health and mana bars.
  function calcHealthBars(who, howMuch) {
    document.getElementById(who).style.height = howMuch * 2 + "px";
  }

  //checks enemy object vulnerability and compares it to the current damage type the player is performing.
  function checkForDamageType(damageTypeAttacking, enemyDamageType) {
    if (damageTypeAttacking.damageType === enemyDamageType.vulnerability[0]) {
      return enemyDamageType.vulnerability[1];
    }
  }

  //loops through player inventory for any given value and returns a boolean.
  function inventorySearch(input) {
    for (var i = 0; i < player.inventory.length + 1; i++) {
      if (player.inventory[i] === input) {
        return true;
      } else {
        return false;
      }
    }
  }

  function enemyTurn() {
    enemyMove = calcEnemyMove(enemy);
    enemyDamage = calcDamage(enemy.moves[enemyMove][1], 1);
    var enemyRealDamage = Math.floor(enemyDamage);
    player.health = player.health - enemyRealDamage;
    combatPrint(
      enemy.name +
        " attacks you with " +
        enemy.moves[enemyMove][0] +
        " for " +
        enemyRealDamage +
        "!"
    );
    calcHealthBars("playerHealth", player.health);
    witheredAttackSound.play();
    hasAttacked = true;
  }

  function useWeapon() {
    if (hasAttacked === false) {
      return combatPrint("You are still recovering from your attack.");
    }
    if (
      gameOverCheck(player.health, enemy.health) === false &&
      hasAttacked === true
    ) {
      playerDamage = calcDamage(playerEquipped.stats, 1);
      playerRealDamage = Math.floor(playerDamage);
      enemy.health = enemy.health - playerRealDamage;
      combatPrint(
        "You attack " +
          enemy.name +
          " with your " +
          playerEquipped.name +
          " for " +
          playerRealDamage
      );
      calcHealthBars("enemyHealth", enemy.health);
      swordAttackSound.play();
      setTimeout(enemyTurn, 1000);
      hasAttacked = false;
    } else {
      combatPrint("The game is over.");
    }
  }
  function useFireball() {
    if (hasAttacked === false) {
      return combatPrint("You are still recovering from your attack.");
    }
    if (
      gameOverCheck(player.health, enemy.health) === false &&
      hasAttacked === true &&
      player.mana >= 25
    ) {
      playerDamage = calcDamage(fireBall.stats, 1);
      playerRealDamage = Math.floor(playerDamage);
      enemy.health = enemy.health - playerRealDamage;
      player.mana = player.mana - fireBall.manaCost;
      combatPrint(
        "You sling a flaming ball at " + enemy.name + " for " + playerRealDamage
      );
      if (checkForDamageType(fireBall, enemy) > 0) {
        combatPrint(
          "Fireball deals an extra " + enemy.vulnerability[1] + " damage"
        );
        enemy.health = enemy.health - enemy.vulnerability[1];
      }
      calcHealthBars("enemyHealth", enemy.health);
      calcHealthBars("playerMana", player.mana);
      fireBall.sound.play();
      setTimeout(enemyTurn, 1000);
      hasAttacked = false;
    } else {
      combatPrint("You do not have enough mana");
    }
  }

  function useHealthPot() {
    if (hasAttacked === false) {
      return combatPrint("You are still recovering from your attack.");
    }
    if (healthPot.owned > 0) {
      player.health = player.health + healthPot.stats;
      healthPot.owned = healthPot.owned - 1;
      combatPrint("You use a health potion. You feel invigorated!");
      healthPot.sound.play();
      calcHealthBars("playerHealth", player.health);
      setTimeout(enemyTurn, 1000);
      hasAttacked = false;
    } else {
      combatPrint("You do not have a health potion");
    }
  }
  
    function combatSelect(){
    if (enemy == withered){
      combat(player,shardKeeper);
      player.health = 100;
      player.mana = 100;
    } else {
      combat(player, withered);
      player.health = 100;
      player.mana = 100;
    }
  }

  //combat function
  function combat(player, enemyFighting) {
    enemy = enemyFighting;
    combatPrint(enemy.greeting);
    if (enemy.attackFirst === true) {
      enemyTurn();
    }
    enemy.introSound.play();
    document.getElementById("enemyHealth").style.height = enemy.health + "px";
  }

  combat(player, withered);
  //COMBAT END
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console