Star Wars Javascript Game

I wanted to see if I could create a simple game example using numerical randomized values and using Javascript one page coding. I will probably expand the gameplay of this game in the future but here is the initial coding for a Star Wars game.

Here is a link to the game: https://sethmh82.github.io/week-4-game/index.html
Here is a link to the GitHub source code: https://github.com/sethmh82/week-4-game

 var myHealth = 100,
    enemy1Health = 100,
    enemiesKilled = 0,
    attackPower1 = 1,
    attacking = 0,
    enemyLoaded = 0,
    enemy1dead = 0,
    enemy2dead = 0,
    enemy3dead = 0;

    function isGameOver(){
      if (enemiesKilled === 4) {
      $("#you-won").html("<h1>YOU WIN</h1><br><h2>You defeated all enemies</h2>");
      document.getElementById("you-won").style.background = "#f4af0a";
      document.getElementById("you-won").style.padding = "30px";
      document.getElementById("enemy-image").style.display = "none";
      } 
    }

    function iAmAttacking() {
      isGameOver();
          if (enemyLoaded === 0) {
          } else {
                var myAttack = attackPower1;
                enemy1Health = (enemy1Health - myAttack);
                document.getElementById("healthBar").style.width = (enemy1Health + "%");
                attackPower1++;
                $("#my-attack").html(attackPower1);   
                      if (enemy1Health <= 0) {
                            document.getElementById("healthBar").style.width = "0%";
                            $("#enemy-health").html("0"); 
                            $("#enemy-image").html("<img class='enemypic' src='assets/images/explode.gif'>"); 
                            enemiesKilled++;
                            isGameOver();
                            $("#kills").html(enemiesKilled + " /4");
                           document.getElementById("bottom-col").style.opacity = "100"; 
                            enemyLoaded = 0;
                            enemy1dead = 1;
                      } else {
                            $("#enemy-health").html(enemy1Health);
                            enemyIsAttacking();
                      }      
          }
                  
    }


    function enemyIsAttacking() {
        if (attacking === 1) {
        var enemyAttack = Math.floor(Math.random()*10);
        }
        if (attacking === 2) {
        var enemyAttack = Math.floor(Math.random()*18);
        }
        if (attacking === 3) {
        var enemyAttack = Math.floor(Math.random()*7);
        }
        if (attacking === 4) {
        var enemyAttack = Math.floor(Math.random()*4);
        }

          myHealth = (myHealth - enemyAttack);
              if (myHealth <= 0) {
              document.getElementById("myHealthBar").style.width = ("0%");
              $("#my-health").html("0");
              $("#you-won").html("<h1>YOU LOST</h1><br><h2>You were defeated by the enemy</h2>");
              document.getElementById("my-attack").style.display = "none";
              document.getElementById("power1").style.display = "none";
              document.getElementById("you-won").style.background = "red";
              document.getElementById("you-won").style.padding = "30px";
              document.getElementById("enemy-image").style.display = "none";
              } else {
              document.getElementById("myHealthBar").style.width = (myHealth + "%");
              $("#my-health").html(myHealth);
              }    
    }

// ATTACK BUTTON
        $("#power1").on("click", function() {
        iAmAttacking();
    });

// RESET BUTTON
        $("#reset").on("click", function() {
        location.reload();
    });

// CHOOSING AN ENEMY

        //PROBE DROID
        $("#enemy1").on("click", function() {
          document.getElementById("enemy1").style.opacity = "0";
          document.getElementById("bottom-col").style.opacity = "0";  
          attacking = 1;
          enemyLoaded = 1;
          enemy1Health = 100;
        $("#enemy-image").html("<img class='enemypic' src='assets/images/probe.gif'>");
        $("#enemy-name").html("<b>Probe</b>");
        $("#enemy-health").html(enemy1Health);
        document.getElementById("healthBar").style.width = "100%";
            });
        
        //STORMTROOPER
        $("#enemy2").on("click", function() {
         document.getElementById("enemy2").style.opacity = "0";
         document.getElementById("bottom-col").style.opacity = "0"; 
          attacking = 2;
          enemyLoaded = 1;
          enemy1Health = 100;
        $("#enemy-image").html("<img class='enemypic' src='assets/images/stormtrooper.gif'>");
        $("#enemy-name").html("<b>Stormtrooper</b>");
        $("#enemy-health").html(enemy1Health);
        document.getElementById("healthBar").style.width = "100%";
        
    });
        //AT-ST WALKER
        $("#enemy3").on("click", function() {
         document.getElementById("enemy3").style.opacity = "0";
         document.getElementById("bottom-col").style.opacity = "0"; 
          attacking = 3;
          enemyLoaded = 1;
          enemy1Health = 100;
        $("#enemy-image").html("<img class='enemypic' src='assets/images/at-st.gif'>");
        $("#enemy-name").html("<b>AT-ST Walker</b>");
        $("#enemy-health").html(enemy1Health);
        document.getElementById("healthBar").style.width = "100%";
        
    });
        //BOBA FETT
        $("#enemy4").on("click", function() {
          document.getElementById("enemy4").style.opacity = "0";
          document.getElementById("bottom-col").style.opacity = "0"; 
          attacking = 4;
          enemyLoaded = 1;
          enemy1Health = 100;
        $("#enemy-image").html("<img class='enemypic' src='assets/images/boba-fett.gif'>");
        $("#enemy-name").html("<b>Boba Fett</b>");
        $("#enemy-health").html(enemy1Health);
        document.getElementById("healthBar").style.width = "100%";
        
    });

Currency Convertor Using Math.js Javascript Library and Fixer.io

For this currency convertor to work we have to link the math.js Javascript library and pull the current currency conversion rates from fixer.io.

Using a text inbox you can generate almost and string of currency values. I have the decimal place set to 2 but you can change that to be more or less by changing the precision value in this line:


 var resultStr = math.format(math.eval(expr.value), {notation: 'fixed', precision: 2})
<!DOCTYPE html>
<html>
<head>
  <title>Currency Conversion</title>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/mathjs/3.11.5/math.min.js"></script>

  <style>
    body,
    html,
    input {
      font-size: 11pt;
      font-family: Gotham, Verdana, Arial, Sans-Serif;
      color: #4d4d4d;
      max-width: 600px;
    }

    h1 {
      font-size: 120%;
    }

    input {
      padding: 5px;
      width: 400px;
    }
    .lbl {
      font-size: 13px;
    }
  </style>
</head>
<body>

<p id="info">
  fetching currencies...
</p>
<p>
  <label class="lbl" for="expr">Enter an expression with currencies:</label><br>
  <label class="lbl" for="expr">EXAMPLE: 25 GBP + 5 EUR + 25 AUD in USD</label><br>
  <label class="lbl" for="expr">The above expression adds 25 British Pounds with 5 Euros and 25 Australian Dollars and outputs the amount in US Dollars.</label>
</p>
<div id="form" style="display: none;">
  <p>
    <input id="expr" value="25 GBP + 5 EUR + 25 AUD in USD" /><br/>
  </p>
  <p id="result"></p>
</div>

<script>
  fetchAndImportCurrencies()
      .then(function (currencies) {
        document.getElementById('expr').oninput = evaluate;
        document.getElementById('form').style.display = '';
        document.getElementById('info').innerHTML = 'Available currencies: ' + currencies.join(', ');

        evaluate();
      })

  function fetchAndImportCurrencies () {
    // this calls for the actuall currency conversion rates from fixer.io
    return fetch('https://api.fixer.io/latest')
        .then(function (response) {
          return response.json();
        }).then(function (data) {

          // import the currencies
          math.createUnit(data.base)
          Object.keys(data.rates).forEach(function (currency) {
            math.createUnit(currency, math.unit(1 / data.rates[currency], data.base));
          });

          // return an array with all available currencies
          return Object.keys(data.rates).concat(data.base);
        });
  }

  function evaluate () {
    var expr = document.getElementById('expr');
    var result = document.getElementById('result');

    try {
// precision: 2 gives 2 decimal places.  
      var resultStr = math.format(math.eval(expr.value), {notation: 'fixed', precision: 2})
      result.innerHTML = '<span style="color: dodgerblue;">' + resultStr + '</span>';
    }
    catch (err) {
      result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>';
    }
  }
</script>
</body>
</html>