small fixes

.gitignore

@@ -0,0 +1 @@
+node_modules

components/controllable.js

@@ -8,8 +8,13 @@ var controls = require('kb-controls')({
   , '<right>': 'right'
 
   , 'W': 'jump'
+  , 'Z': 'jump'
   , '<up>': 'jump'
   , '<space>': 'jump'
+
+  , '<mouse 1>': 'shoot'
+  , '<shift>': 'shoot'
+  , 'X': 'shoot'
 })
 
 module.exports = bs.component('controllable')

entities/player.js

@@ -30,6 +30,7 @@ var player = bs.component('player')
     this.rotation = 0
     this.rotating = false
     this.lastangle = 1
+    this.pop = 0
 
     var fixdef = new b2FixtureDef
     fixdef.shape = new b2CircleShape(0.49)
@@ -43,13 +44,37 @@ var player = bs.component('player')
     })
 
     this.b2Pos = this.body.m_xf.position
+
+    ;[-1, 1].forEach(function(dir) {
+      this.left = this.b2p.createSensor([
+          [-0.65, -0.40]
+        , [-0.48, -0.40]
+        , [-0.48, -0.45]
+        , [-0.65, -0.45]
+      ])
+      this.right = this.b2p.createSensor([
+          [+0.65, -0.40]
+        , [+0.48, -0.40]
+        , [+0.48, -0.45]
+        , [+0.65, -0.45]
+      ])
+    }.bind(this))
+
+    var self = this
+    this.blockedLeft = 0
+    this.blockedRight = 0
+    this.left.on('begin',  function() { self.blockedLeft += 1 })
+    this.right.on('begin', function() { self.blockedRight += 1 })
+    this.left.on('end',    function() { self.blockedLeft -= 1 })
+    this.right.on('end',   function() { self.blockedRight -= 1 })
   })
   .on('tick', function() {
     var xspd = this.body.m_linearVelocity.x =
-        this.controls.left  ? -14
-      : this.controls.right ? +14
+        this.controls.left  && !this.blockedLeft  ? -14
+      : this.controls.right && !this.blockedRight ? +14
       : 0
 
+    this.pop *= 0.95
     if (this.rotating) {
       this.rotation += xspd > 0
         ? +0.18
@@ -63,25 +88,29 @@ var player = bs.component('player')
       this.rotation = 0
     }
 
-    if (this.controls.jump) this.b2p.jump()
+    if (this.controls.jump && this.b2p.jump()) {
+      this.pop += 8
+    }
     this.rotating = ((abs(this.body.m_linearVelocity.y)) > 0.2)
 
     tempPosition[0] = round(this.b2Pos.x)
     tempPosition[1] = round(this.b2Pos.y)
+    this.pop = this.pop > 8 ? 8 : this.pop
     this.game.field.move(tempPosition)
   })
   .on('draw', function(ctx, game) {
     var x = this.b2p.body.m_xf.position.x * 30 - game.camera.pos[0]
     var y = this.b2p.body.m_xf.position.y * 30 - game.camera.pos[1]
     ctx.save()
     ctx.translate(x, y)
-    ctx.rotate(
-        this.body.m_linearVelocity.x > 0
-      ? this.rotation
-      : this.rotation
-    )
+    ctx.rotate(this.rotation)
     ctx.fillStyle = '#FFCFBF'
-    ctx.fillRect(-15, -15, 30, 30)
+    ctx.fillRect(
+        -15 - this.pop
+      , -15 - this.pop
+      , 30 + this.pop * 2
+      , 30 + this.pop * 2
+    )
     ctx.restore()
   })
 

game.js

@@ -76,8 +76,8 @@ Game.prototype.draw = function() {
     if (data.type === 'wall') {
       var x = floor(data.pos[0] * 30 - camx)
         , y = floor(data.pos[1] * 30 - camy)
-        , w = floor(data.pos[2] * 30) - 1
-        , h = floor(data.pos[3] * 30) - 1
+        , w = floor(data.pos[2] * 30)
+        , h = floor(data.pos[3] * 30)
       if (
         x + w >= 0 ||
         y + h >= 0 ||
@@ -93,7 +93,7 @@ Game.prototype.draw = function() {
   for (var i = 0; i < l; i += 1)
     this.instances[i].trigger('draw', ctx, this)
 
-  ctx.fillStyle = '#0f0'
+  ctx.fillStyle = '#FFCFBF'
   ctx.fillRect(mousex - 3, mousey - 3, 6, 6)
 
   this.camera.draw()

index.html

@@ -7,14 +7,15 @@
       body, html {
         padding: 0;
         margin: 0;
-        background: #444;
+        background: #222;
       }
       #main {
-        -webkit-box-shadow: 0 0 20px -3px #000;
-           -moz-box-shadow: 0 0 20px -3px #000;
-            -ms-box-shadow: 0 0 20px -3px #000;
-             -o-box-shadow: 0 0 20px -3px #000;
-                box-shadow: 0 0 20px -3px #000;
+        border: 1px dotted #fff;
+        -webkit-box-shadow: 0 0 30px -12px #fff;
+           -moz-box-shadow: 0 0 30px -12px #fff;
+            -ms-box-shadow: 0 0 30px -12px #fff;
+             -o-box-shadow: 0 0 30px -12px #fff;
+                box-shadow: 0 0 30px -12px #fff;
         width: 800px;
         height: 600px;
         position: absolute;