Add player health

css/app.css

@@ -18,21 +18,27 @@ canvas {
 .wrapper {
     width: 512px;
     margin: 0 auto;
-    margin-top: 2em;
+    margin-top: 0em;
 }
 
 #instructions {
-    float: left;
     font-family: sans-serif;
     color: #757575;
 }
-
-#score {
+#health{
+    float: left;
+    color: white;
+    font-size: 2em;
+}
+#score{
     float: right;
     color: white;
     font-size: 2em;
 }
-
+.params{
+    height:40px;
+    width:100%;
+}
 .key {
     color: #aaffdd;
 }

index.html

@@ -27,8 +27,13 @@ <h1>GAME OVER</h1>
           shoot with <span class="key">space</span>
         </div>
       </div>
+        <div class="params">
+
+            <div id="health">Health: <span id="health-value"></span></div>
+            <div id="score"></div>
+        </div>
+
 
-      <div id="score"></div>
     </div>
 
     <script type="text/javascript" src="js/resources.js"></script>

js/app.js

@@ -52,6 +52,7 @@ resources.onReady(init);
 
 // Game state
 var player = {
+    health: 100,
     pos: [0, 0],
     sprite: new Sprite('img/sprites.png', [0, 0], [39, 39], 16, [0, 1])
 };
@@ -67,6 +68,7 @@ var terrainPattern;
 
 var score = 0;
 var scoreEl = document.getElementById('score');
+var healtEl = document.getElementById('health-value');
 
 // Speed in pixels per second
 var playerSpeed = 200;
@@ -94,6 +96,7 @@ function update(dt) {
     checkCollisions();
 
     scoreEl.innerHTML = score;
+    healtEl.innerHTML = player.health;
 };
 
 function handleInput(dt) {
@@ -233,7 +236,23 @@ function checkCollisions() {
         }
 
         if(boxCollides(pos, size, player.pos, player.sprite.size)) {
-            gameOver();
+            if (player.health == 0){
+                gameOver();
+            }else{
+                player.health -= 10
+                enemies.splice(i, 1);
+                i--;
+                explosions.push({
+                    pos: pos,
+                    sprite: new Sprite('img/sprites.png',
+                        [0, 117],
+                        [39, 39],
+                        16,
+                        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+                        null,
+                        true)
+                });
+            }
         }
     }
 }