running and jumping

components/controllable.js

@@ -0,0 +1,19 @@
+var bs = require('bindlestiff')
+
+var controls = require('kb-controls')({
+ '<left>': 'left'
+ , 'A': 'left'
+
+ , 'D': 'right'
+ , '<right>': 'right'
+
+ , 'W': 'jump'
+ , '<up>': 'jump'
+ , '<space>': 'jump'
+})
+
+module.exports = bs.component('controllable')
+ .on('init', function() {
+ this.controlling = true
+ this.controls = controls
+ })

entities/player.js

@@ -2,36 +2,64 @@ var Box2D = require('box2dweb-commonjs').Box2D
 var b2Player = require('box2d-player')(Box2D)
 var bs = require('bindlestiff')
 
+var round = Math.round
+var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
+var b2FixtureDef = Box2D.Dynamics.b2FixtureDef
 var b2BodyDef = Box2D.Dynamics.b2BodyDef
 var b2Vec2 = Box2D.Common.Math.b2Vec2
 var b2Body = Box2D.Dynamics.b2Body
+var tempPosition = [0,0]
 
-var special = bs.component('player')
+var player = bs.component('player')
  .needs('physical')
  .needs('attached')
+ .needs('controllable')
  .on('init', function() {
  var x = this.game.width / 60
  var y = this.game.height / 60
 
  var def = new b2BodyDef
- def.position = new b2Vec2(0, 0)
+ def.position = new b2Vec2(0, -5)
  def.type = b2Body.b2_dynamicBody
  def.userData = null
  def.fixedRotation = true
 
- var body = this.world.CreateBody(def)
+ this.body = this.world.CreateBody(def)
 
- this.b2p = new b2Player(this.world, { body: body })
- this.b2Pos = this.b2p.body.m_xf.position
+ var fixdef = new b2FixtureDef
+ fixdef.shape = new b2CircleShape(0.49)
+
+ this.fixture = this.body.CreateFixture(fixdef)
+
+ this.b2p = new b2Player(this.world, {
+ body: this.body
+ , fixture: this.fixture
+ , jumpHeight: 20
+ })
+
+ this.b2Pos = this.body.m_xf.position
+ })
+ .on('tick', function() {
+ this.body.m_linearVelocity.x =
+ this.controls.left ? -14
+ : this.controls.right ? +14
+ : 0
+
+ if (this.controls.jump) this.b2p.jump()
+
+ tempPosition[0] = round(this.b2Pos.x)
+ tempPosition[1] = round(this.b2Pos.y)
+ this.game.field.move(tempPosition)
  })
  .on('draw', function(ctx, game) {
  ctx.fillStyle = '#00f'
- var x = this.b2Pos.x * 30 - 15 - game.camera.pos[0]
- var y = this.b2Pos.y * 30 - 15 - game.camera.pos[1]
+ var x = this.b2p.body.m_xf.position.x * 30 - 15 - game.camera.pos[0]
+ var y = this.b2p.body.m_xf.position.y * 30 - 15 - game.camera.pos[1]
  ctx.fillRect(x, y, 30, 30)
  })
 
 module.exports = bs.define()
  .use(require('../components/attached'))
  .use(require('../components/physical'))
- .use(special)
+ .use(require('../components/controllable'))
+ .use(player)

game.js

@@ -1,6 +1,7 @@
 var Manager = require('bindlestiff/manager')
 var inherits = require('inherits')
 var trap = require('pointer-trap')
+var fps = require('fps')
 
 var camera = require('./lib/camera')
 var field = require('./lib/field')
@@ -20,9 +21,9 @@ function Game(canvas) {
  this.ctx = canvas.getContext('2d')
  this.width = canvas.width
  this.height = canvas.height
- this.tickrate = 1000 / 60
+ this.tickrate = 1 / 60
 
- this.gravity = new b2Vec2(0, 50)
+ this.gravity = new b2Vec2(0, 40)
  this.world = new b2World(this.gravity, true)
 
  this.field = field(this)
@@ -43,7 +44,9 @@ Game.prototype.start = function() {
  this.add(this.player)
 }
 
+var framecounter = fps({ every: 1, decay: 0.5 })
 Game.prototype.tick = function() {
+ framecounter.tick()
  this.world.Step(this.tickrate, 8, 3)
  this.camera.tick()
 

index.js

@@ -1,9 +1,17 @@
 var ticker = require('ticker')
+var raf = require('raf')
 var game = require('./game-instance')
 
-ticker(game.canvas, 60, 3)
- .on('tick', function() { game.tick() })
- .on('draw', function() { game.draw() })
+
+raf(game.canvas).on('data', function() {
+ game.tick()
+ game.draw()
+})
+
+
+// ticker(game.canvas, 60, 3)
+// .on('tick', function() { game.tick() })
+ // .on('draw', function() { game.draw() })
 
 process.nextTick(function() {
  game.start()

lib/camera.js

@@ -16,12 +16,9 @@ function Camera(game, field) {
 Camera.prototype.draw = function() {
  this.target[0] = this.game.player.b2Pos.x * 30 - this.game.width / 2
  this.target[1] = this.game.player.b2Pos.y * 30 - this.game.height / 2
- lerp(this.pos, this.pos, this.target, 0.01)
+ lerp(this.pos, this.pos, this.target, 0.05)
 }
 
-var temp = [0,0]
 Camera.prototype.tick = function() {
- temp[0] = round(this.target[0] / this.shape[0])
- temp[1] = round(this.target[1] / this.shape[1])
- this.field.move(temp)
+
 }

lib/field.js

@@ -14,17 +14,15 @@ function Field(game) {
  shape: [32, 32]
  , getter: function(position, done) {
  var shape = this.shape
- process.nextTick(function() {
- var ndarray = cave(zero(shape))(10)
- for (var i = 0; i < 15; i += 1) {
- ndarray.set(
- (Math.random() * shape[0])|0
- , (Math.random() * shape[1])|0
- , 0
- )
- }
- return done(null, ndarray)
- })
+ var ndarray = cave(zero(shape))(10)
+ for (var i = 0; i < 35; i += 1) {
+ ndarray.set(
+ (Math.random() * shape[0])|0
+ , (Math.random() * shape[1])|0
+ , 0
+ )
+ }
+ return done(null, ndarray)
  }
  })
 

package.json

@@ -36,6 +36,8 @@
  "cave-automata-2d": "~0.3.1",
  "continuous-box2d": "0.0.0",
  "continuous-observer": "~0.1.1",
- "box2d-player": "~0.1.0"
+ "box2d-player": "~0.1.0",
+ "fps": "0.0.3",
+ "raf": "0.0.3"
  }
 }