##The Slap Object Game - Part 2

###Step 1 - JS - Health Condition

• We are now going to add a component that changes the color of the background when the player's health drops below a certain threshold. We will need to use a conditional statement to determine the health.

1. inside the update() function add an if statement

	if("[PlayerHealth]" <= 0){
		 document.getElementById("player-panel").classList.add("panel-danger")
	}else{
		 document.getElementById("player-panel").classList.remove("panel-danger")
	}

1. When the player's health drops below zero, the panel should turn red.

###Step 2 - Items

• It's now time to add items to our game. Items are objects that will be created using a constructor. the items are responsible for reducing the damage done to the player on hit.

1. Create an Item constructor that takes in the following "options": (name, modifier, description).
2. The Item should have 3 properties: name, modifier, description.
3. Add an empty draw method to the Item.
4. Your constructor should look like the one below.

var Obj = function(option1, option2, option3){
	this.option1 = option1;
	this.option2 = option2;
	this.option3 = option3;
	this.draw = function(){
     //...
	}
}

###Step 3 - Create the items

• Since our game will have multiple items, we need to find an easy way to access them. We can use an array to store a collection of objects. However, arrays are not always the easiest to use, because they require us to loop over the entire collection when we are looking for a specific item. What if we instead, create an object that uses the name of the item as a property?

1. Create an object called items.
2. following the example below, add 2 more items.

var items = {
	shield:new Item("Shield",0.3,"This is an awesome shield!"),
	...
	...
}

• We can now easily reference the shield item by calling items.shield.
• What would items.shield.name return?

###Step 4 - Give some items to our player.

• We are using an object to store the master list of items in our game. However, we need to be able to give our player items. In this case, we need to use an array, because it may be possible for the player to have multiples of the same item.

1. Create an array property named items on the player object.
2. Place the shield in the first index of the items array.

 items:[items.shield]

1. keep in mind that the [items] object that is global, is completly different than the [items] array on the player.

###Step 5 - REDUCE THE DAMAGE!... almost

• How are you at math?

1. create a function on the player object called, addMods().
2. using a "for i loop", calculate the combined value of modifiers in the player.items array.
   • this may be tricky, but think it through before reading the following hints. ##HINTS
   1. we need to create a variable to hold the running modifier total.
   2. this variable should be outside of the loop.
   3. inside the loop, increase the running total by the 'current items modifier'
   4. arrays need to be accessed by index. [i]
3. have the function return the total.

###Step 6 - REDUCE THE DAMAGE!... for real this time.

• before you being this step, try to solve the problem... without the help from a mentor. Remeber math in javascript is the same as on paper. Order of operations matters: 5 - (5 * .3) = 3.5
• stuck?
• look at the hit function()
• total damage done = damage - (damage * [sum of all modifiers])
• did you get it! I think the following works

this.health -= (damage - (damage * this.addMods())));

###UPSHIFT CHALLENGE

1. Add this to the body of the item.draw method.

	return '<div class="item">'+ this.name +'</div>';

Create a drawItems method under the update() function. Have the update() function call the drawItems() function. retrieve from the dom the element id = "player-items" set the innerHTML of the element equal to a concatenation of all the items.draw() results.

Add to the UI a way to give your player items.