mercredi 22 avril 2015

How do I create an HTML message for a mouseConstraint on this cradle?

This is what I'm trying to work on right now, from the matter.js library. I want to use two events to trigger two HTML messages by grabbing the ball on the left side of the cradle that will say "Hey you grabbed the cradle" and then when you let go, it would say "Wow, look at that!".

// Matter.js - http://ift.tt/Oz0I6i

// Matter module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Body = Matter.Body,
    Composites = Matter.Composites,
    MouseConstraint = Matter.MouseConstraint;

// create a Matter.js engine
var engine = Engine.create(document.body, {
  render: {
    options: {
      showAngleIndicator: true,
      showVelocity: true,
      wireframes: false
    }
  }
});

// add a mouse controlled constraint
var mouseConstraint = MouseConstraint.create(engine);
World.add(engine.world, mouseConstraint);

// add a Newton's Cradle (using the Composites factory method!)
var cradle = Composites.newtonsCradle(280, 150, 5, 30, 200);
World.add(engine.world, cradle);

// offset the first body in the cradle so it will swing
Body.translate(cradle.bodies[0], { x: 0, y: 0 });

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

For more information, here is the Codepen: http://ift.tt/1Es0gyX

Aucun commentaire:

Enregistrer un commentaire