A Better "AppDev University - Full Stack Web Development"

target.js

var asymHumanoidBodyParts = [["head", 3],
    ["left-eye", 1],
    ["left-ear", 1],
    ["mouth", 1],
    ["nose", 1],
    ["neck", 2],
    ["left-shoulder", 3],
    ["left-upper-arm", 3],
    ["chest", 10],
    ["back", 10],
    ["left-forearm", 3],
    ["abdomen", 6],
    ["left-kidney", 1],
    ["left-hand", 2],
    ["left-knee", 2],
    ["left-thigh", 4],
    ["left-lower-leg", 3],
    ["left-achilles", 1],
    ["left-foot", 2]];

// Scale integer weights in order to have a cumulative weight of 1
var normalizeBodyParts = function(bodyParts, sum) {
  var len = bodyParts.length;
  
  while(len--) bodyParts[len][1] /= sum;

  return bodyParts;
}
    
// This is used to return a nested array of symmetrical body parts.
// For example, if the source array of body parts contains
// ["left-elbow", 2]
// then the array returned by this function will also include
// ["right-elbow", 2]
// This allows us to reduce replication, as a left elbow is just as
// likely to be hit as a right elbow.
var symmetrizeBodyParts = function(bodyParts) {
  var finalParts = [];
  var part;
  var sum = 0;
  
  while(bodyParts.length) {
    part = bodyParts.pop();
    if (part[0].indexOf("left") > -1) {
      sum += part[1];
      finalParts.push([part[0].replace("left", "right"), part[1]]);
    }
    sum += part[1];
    finalParts.push(part);
  }
  
  return normalizeBodyParts(finalParts, sum);
}

// The logic of the targeting system is as follows:
// 1. Pick a random number between 0 and the 1 - the +target+
// 2. Iterate through the list of body parts, decrementing +target+
//    by the weight of the body part.
// 3. When the +target+ is less than +weight+, then the
//    corresponding body part has been hit.
// 4. Return that body part.
var attack = function(bodyParts) {
  var target = Math.random();
  var len = bodyParts.length;
  
  while(--len && target > bodyParts[len][1]) target -= bodyParts[len][1];

  return bodyParts[len];
}

// !THIS IS THE ONLY NECESSARY CLOSURE!
// finalParts is captured by the closure passed along to onclick so
// that we don't have to generate the array anew each time the button
// is clicked.
// This is merely to set up the event handlers on the dom objects and
// create the complete parts array from the asymetric parts array.
var setup = function() {
  var finalParts = symmetrizeBodyParts(asymHumanoidBodyParts);

  document.getElementById("initiate-attack").onclick = function() {
    var partHit = attack(finalParts)[0].replace(/-/g, " ")
    document.getElementById("attack-message").innerHTML += "You hit the giant's " + partHit + "!<br>";
  }
}

// Assign the setup function to the onload event handler. Notice that
// we're not using the parentheses; we're assigning the function
// object, not the result of a call to the function.
window.onload = setup;