Ok, this may not seem like much. But I’ve been trying to get this ball to show up on the screen for a day now. I finally did a search past the first page and found this tutorial: https://alexandergottlieb.com/2017/01/19/matter.js-the-missing-tutorial/
There were 2 parts I had to get going correctly:
- Setting up the canvas in the html with the canvas tag
- Including the script in the body tag
Here’s the code that is working for me:
index.html
<!DOCTYPE HTML> <html> <head> <title>Mathogen - Matter.js</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="mathogenMatter.js"></script> </body> </html>
mathogenMatter.js
window.addEventListener('load', function () {
//Fetch our canvas
varcanvas=document.getElementById('world');
//Setup Matter JS
varengine=Matter.Engine.create();
varworld=engine.world;
varrender=Matter.Render.create({
canvas: canvas,
engine: engine,
options: {
width: 500,
height: 500,
background: 'transparent',
wireframes: false,
showAngleIndicator: false
}
});
//Add a ball
varball=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
varfloor=Matter.Bodies.rectangle(250, 520, 500, 40, {
isStatic: true, //An immovable object
render: {
visible: false
}
});
Matter.World.add(world, floor);
//Make interactive
varmouseConstraint=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);
});