platformer (matter-js)

platformer (matter-js).markdown

platformer (matter-js)

A Pen by lilgreenland on CodePen.

License.

script.js

//  http://brm.io/matter-js/docs/
//  http://brm.io/matter-js/demo/#mixed
//  https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js

// module aliases
var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Events = Matter.Events,
  Bodies = Matter.Bodies;

// create an engine
var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    pixelRatio: 1,
    background: '#222',
    wireframeBackground: '#222',
    enabled: true,
    wireframes: true,
    showVelocity: true,
    showAngleIndicator: true,
    showCollisions: true
  }
});

//add the walls
var offset = 5;
World.add(engine.world, [
  Bodies.rectangle(400, -offset, 800 + 2 * offset, 50, {
    isStatic: true
  }),
  Bodies.rectangle(400, 600 + offset, 800 + 2 * offset, 50, {
    isStatic: true
  }),
  Bodies.rectangle(800 + offset, 300, 50, 600 + 2 * offset, {
    isStatic: true
  }),
  Bodies.rectangle(-offset, 300, 50, 600 + 2 * offset, {
    isStatic: true
  })
]);

// add some ramps to the world for the bodies to roll down
World.add(engine.world, [
  //Bodies.rectangle(200, 150, 700, 20, { isStatic: true, angle: Math.PI * 0.06 }),
  Bodies.rectangle(600, 350, 700, 20, {
    isStatic: true,
    angle: -Math.PI * 0.1
  }),
  Bodies.rectangle(340, 580, 700, 20, {
    isStatic: true,
    angle: Math.PI * 0.06
  })
]);

//adds some shapes
//World.add(engine.world, Bodies.polygon(400, 200, 2+Math.ceil(Math.random()*7), 30));

//add the player
var player = Bodies.circle(100, 100, 25, {
  density: 0.001,
  friction: 0.7,
  frictionStatic: 0,
  frictionAir: 0.01,
  restitution: 0.5,
  ground: false,
});

//populate world
World.add(engine.world, player);

//looks for key presses and logs them
var keys = [];
document.body.addEventListener("keydown", function(e) {
  keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function(e) {
  keys[e.keyCode] = false;
});

//at the start of a colision for player
Events.on(engine, "collisionStart", function(event) {
  var pairs = event.pairs
  for (var i = 0, j = pairs.length; i != j; ++i) {
    var pair = pairs[i];
    if (pair.bodyA === player) {
      player.ground = true;
    } else if (pair.bodyB === player) {
      player.ground = true;
    }
  }
});
//ongoing checks for collisions for player
Events.on(engine, "collisionActive", function(event) {
  var pairs = event.pairs
  for (var i = 0, j = pairs.length; i != j; ++i) {
    var pair = pairs[i];
    if (pair.bodyA === player) {
      player.ground = true;
    } else if (pair.bodyB === player) {
      player.ground = true;
    }
  }
});
//at the end of a colision for player
Events.on(engine, 'collisionEnd', function(event) {
  var pairs = event.pairs;
  for (var i = 0, j = pairs.length; i != j; ++i) {
    var pair = pairs[i];
    if (pair.bodyA === player) {
      player.ground = false;
    } else if (pair.bodyB === player) {
      player.ground = false;
    }
  }
})

//main engine update loop
Events.on(engine, "beforeTick", function(event) {
  if (keys[32]) {console.log(player)};
  //jump
  if (keys[38] && player.ground) {
    player.force = {      x: 0,      y: -0.1    };
  }
  //spin left and right
  if (keys[37] && player.angularVelocity > -0.2) {
    player.torque = -0.1;
  } else {
    if (keys[39] && player.angularVelocity < 0.2) {
      player.torque = 0.1;
    }
  }
});

var playerGround = false;
Events.on(engine, "collisionStart", function(event) {
  //console.log(event.pairs)
  //var x = event.pairs[0].activeContacts[0].vertex.x
  //var y = event.pairs[0].activeContacts[0].vertex.y
  playerGound = true
});

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/464612/matter.min.js"></script>

style.css

body {
  background-color: #222;
  color: white;
}
canvas {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}