Skip to content

Instantly share code, notes, and snippets.

@andrewn
Created Apr 18, 2018
Embed
What would you like to do?
wjvexp
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Events = Matter.Events,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create(),
world = engine.world;
// create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 600,
wireframes: false,
background: '#111'
}
});
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
// add bodies
var redColor = '#C44D58',
greenColor = '#C7F464';
var collider = (num = 0) => {
const w = 50;
const h = 50;
const x = (num * w) + (50/2);
const y = 575;
return Bodies.rectangle(x, y, w, h, {
isSensor: true,
isStatic: true,
render: {
strokeStyle: 'blue',
fillStyle: 'transparent',
lineWidth: 1
}
});
}
const colliders = _.range(0, 800/50).map(collider);
World.add(world, [
...colliders,
Bodies.rectangle(400, 620, 800, 50, {
isStatic: true,
render: {
fillStyle: 'transparent',
lineWidth: 1
}
})
]);
const droplet = () => (
World.add(world,
Bodies.circle(400, 40, 10, {
render: {
strokeStyle: greenColor,
fillStyle: 'transparent',
lineWidth: 1
}
})
)
);
window.setInterval(droplet, 2000)
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 (colliders.includes(pair.bodyA)) {
pair.bodyA.render.strokeStyle = redColor;
} else if (colliders.includes(pair.bodyB)) {
pair.bodyB.render.strokeStyle = redColor;
}
// if (colliders.includes(pair.bodyA)) {
// pair.bodyB.render.strokeStyle = redColor;
// } else if (colliders.includes(pair.bodyB)) {
// pair.bodyA.render.strokeStyle = redColor;
// }
}
});
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 (colliders.includes(pair.bodyA)) {
pair.bodyA.render.strokeStyle = 'blue';
} else if (colliders.includes(pair.bodyB)) {
pair.bodyB.render.strokeStyle = 'blue';
}
// if (pair.bodyA === collider) {
// pair.bodyB.render.strokeStyle = greenColor;
// } else if (pair.bodyB === collider) {
// pair.bodyA.render.strokeStyle = greenColor;
// }
}
});
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
// fit the render viewport to the scene
Render.lookAt(render, {
min: { x: 0, y: 0 },
max: { x: 800, y: 600 }
});
<script src="https://unpkg.com/matter-js@0.14.1/build/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment