Skip to content

Instantly share code, notes, and snippets.

@alexandergottlieb

alexandergottlieb/index.html

Last active November 16, 2019 09:30
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexandergottlieb/ec341175e0f09a43cbe67ee7bb289575 to your computer and use it in GitHub Desktop.
Save alexandergottlieb/ec341175e0f09a43cbe67ee7bb289575 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<!-- Visit alexandergottlieb.com for more tutorials -->
<title>Balls Matter</title>
</head>
<body>
<canvas id="world"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Raw
scripts.js
window.addEventListener('load', function() {
//Fetch our canvas
var canvas = document.getElementById('world');
//Setup Matter JS
var engine = Matter.Engine.create();
var world = engine.world;
var render = Matter.Render.create({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: 'transparent',
wireframes: false,
showAngleIndicator: false
}
});
//Add a ball
var ball = Matter.Bodies.circle(250, 250, 50, {
density: 0.04,
friction: 0.01,
frictionAir: 0.00001,
restitution: 0.8,
render: {
fillStyle: '#F35e66',
strokeStyle: 'black',
lineWidth: 1
}
});
Matter.World.add(world, ball);
//Add a floor
var floor = Matter.Bodies.rectangle(250, 520, 500, 40, {
isStatic: true, //An immovable object
render: {
visible: false
}
});
Matter.World.add(world, floor);
//Make interactive
var mouseConstraint = Matter.MouseConstraint.create(engine, { //Create Constraint
element: canvas,
constraint: {
render: {
visible: false
},
stiffness:0.8
}
});
Matter.World.add(world, mouseConstraint);
//Start the engine
Matter.Engine.run(engine);
Matter.Render.run(render);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment