healthbar

components/enemy.js

@@ -58,6 +58,12 @@ module.exports = function(
       .on('damaged', function() {
         this.flinch = 1
       })
+      .on('damaging', function() {
+        var self = this
+        this.game.next(function() {
+          self.trigger('died')
+        })
+      })
       .on('died', function() {
         if (this.flagged) return
         this.flagged = true

components/explosive.js

@@ -25,16 +25,18 @@ function explosive(force) {
 
       for (var i = 0; i < bodies.length; i += 1) {
         var b = bodies[i]
-        if (b !== this.game.player.body) {
-          var p = b.body.m_xf.position
-          var dy = p.y - ty
-          var dx = p.x - tx
-          if (Math.abs(dy) + Math.abs(dx) < 20) {
-            var a = Math.atan2(dy, dx)
-            tempVec.x = Math.cos(a) * 40
-            tempVec.y = Math.sin(a) * 40
-            b.body.ApplyImpulse(tempVec, center)
+        var p = b.body.m_xf.position
+        var dy = p.y - ty
+        var dx = p.x - tx
+        if (Math.abs(dy) + Math.abs(dx) < 20) {
+          var a = Math.atan2(dy, dx)
+          tempVec.x = Math.cos(a) * 40
+          tempVec.y = Math.sin(a) * 40
+          b.body.ApplyImpulse(tempVec, center)
+          if (b !== this.game.player) {
             b.trigger('damaged', 3)
+          } else {
+            b.health += 2
           }
         }
       }

components/harmful.js

@@ -12,5 +12,6 @@ function harmful(group, damage) {
         this.body.m_userData = this.body.m_userData || {}
         this.body.m_userData.harmful_damage = damage
         this.body.m_userData.harmful_group = group
+        this.body.m_userData.parent = this
       })
 }

components/vulnerable.js

@@ -13,12 +13,15 @@ module.exports = function vulnerable(group) {
 
       this.body.m_userData = this.body.m_userData || {}
       this.body.m_userData.vulnerable_group = group
+      this.body.m_userData.parent = this
       b2e(Box2D, this.world).fixture(
         this.fixture
       ).on('begin', function(a, b) {
         var data = a.m_body.m_userData
-        if (data.harmful_group === group)
+        if (data.harmful_group === group) {
           self.trigger('damaged', data.harmful_damage)
+          a.m_body.m_userData.parent.trigger('damaging', data.harmful_damage)
+        }
       })
     })
 }

entities/pellet.js

@@ -10,9 +10,9 @@ var b2Body = Box2D.Dynamics.b2Body
 
 module.exports = pellet
 
+var pelletCounter = 0
 function pellet(c) {
-  var pelletCounter = 0
-  var pelletMax = 80
+  var pelletMax = 40
 
   return bs.define()
     .use(require('../components/attached'))

entities/player.js

@@ -1,5 +1,6 @@
 var Box2D = require('box2dweb-commonjs').Box2D
 var b2Player = require('box2d-player')(Box2D)
+var lighten = require('../lib/color').lighten
 var bs = require('bindlestiff')
 
 var Bullet = require('./player-bullet')
@@ -31,6 +32,7 @@ var player = bs.component([
     def.userData = {}
     def.fixedRotation = true
 
+    this.flinch = 0
     this.body = this.world.CreateBody(def)
     this.rotation = 0
     this.rotating = false
@@ -78,6 +80,8 @@ var player = bs.component([
   .on('tick', function() {
     this.body.SetActive(true)
     this.body.SetAwake(true)
+    this.health = this.health < 0 ? 0
+      : (this.health < 25 ? this.health : 25)
 
     var xspd = this.body.m_linearVelocity.x =
         this.controls.left  && !this.blockedLeft  ? -14
@@ -86,6 +90,8 @@ var player = bs.component([
 
     this.game.ready = this.game.ready || xspd
     this.pop *= 0.95
+    this.flinch *= 0.97
+
     if (this.rotating) {
       this.rotation += xspd > 0
         ? +0.18
@@ -122,28 +128,33 @@ var player = bs.component([
     ctx.save()
     ctx.translate(x, y)
     ctx.rotate(this.rotation)
-    ctx.fillStyle = '#362F34'
+    ctx.fillStyle = lighten('#362F34', (this.flinch * 200)|0)
     ctx.fillRect(
         -15 - this.pop
       , -15 - this.pop
-      , 30 + this.pop * 2
-      , 30 + this.pop * 2
+      ,  30 + this.pop * 2
+      ,  30 + this.pop * 2
     )
     ctx.restore()
   })
+  .on('damaged', function(damage) {
+    this.flinch = 1
+  })
 
 module.exports = bs.define()
   .use(require('../components/attached'))
   .use(require('../components/physical'))
   .use(require('../components/controllable'))
+  .use(require('../components/health')(25))
   .use(player)
+  .use(require('../components/vulnerable')(0))
   .use(require('../components/gravity'))
 
 module.exports.prototype.fireBullet = function() {
   this.shootTimer = 8
   var bullet = new Bullet
-  var tx = this.game.mouse.x - this.game.width / 2
-  var ty = this.game.mouse.y - this.game.height / 2
+  var tx = this.game.mouse.x - (this.body.m_xf.position.x * 30 - this.game.camera.pos[0])
+  var ty = this.game.mouse.y - (this.body.m_xf.position.y * 30 - this.game.camera.pos[1])
   var a = Math.atan2(ty, tx)
   var rx = Math.cos(a)
   var ry = Math.sin(a)

game.js

@@ -33,7 +33,7 @@ function Game(canvas) {
   this.level  = 1
   this.levels = {
       speed : function(level) { return (Math.pow(level, 0.55) + level / 100) * 0.04 }
-    , health: function(level) { return Math.pow(level, 0.4) + level / 100 }
+    , health: function(level) { return Math.floor(Math.pow(level, 0.4) + level / 100) }
   }
 
   setInterval(function() {
@@ -137,6 +137,11 @@ Game.prototype.draw = function() {
     if (this.camera.pos[1] < -this.height) this.title = false
   }
 
+  ctx.fillStyle = '#362F34'
+  ctx.fillRect(0, 0, this.width, 20)
+  ctx.fillStyle = '#EB3E38'
+  ctx.fillRect(4, 4, this.width * this.player.health / 25 - 8, 12)
+
   if (this.flash)
   if (this.flash < 0.005) {
     this.flash = 0

lib/spawner.js

@@ -16,8 +16,8 @@ function Spawner(game) {
 
     var Enemy = EnemyGenerator(
         2.1 // size
-      , game.levels.speed(game.level) // speed
-      , 1 // health
+      , game.levels.speed(game.level)
+      , game.levels.health(game.level)
       , 0
     ).tag('spawned')