hello.html

Hello world adapted from: github.com/liabru/matter-js/wiki/Getting-started/1d138998f05766dc4de0e44ae2e35d03121bb7f2

Also asked at: stackoverflow.com/questions/28079138/how-to-make-minimal-example-of-matter-js-work/76203103#76203103

Renderer questions:

follow object on viewport: codepen.io/csims314/pen/goZQvG
draw text: github.com/liabru/matter-js/issues/321

js/matterjs/hello.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Matter.js hello world</title>
<script src="node_modules/matter-js/build/matter.min.js"></script>
<style>
body {
  background-color: white;
}
</style>
</head>
<body>
<h1>Matter.js hello world</h1>
<p><a href="http://cirosantilli.com/_file/js/matterjs/example.html">More information</a></p>
<script>
window.Matter || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js" integrity="sha512-0z8URjGET6GWnS1xcgiLBZBzoaS8BNlKayfZyQNKz4IRp+s7CKXx0yz7Eco2+TcwoeMBa5KMwmTX7Kus7Fa5Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"><\/script>');
</script>
<script>
// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

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

// create a renderer
var render = Render.create({
    element: document.body,
    engine: engine
});

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);

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

// create runner
var runner = Runner.create();

// run the engine
Runner.run(runner, engine);
</script>
</body>
</html>

js/matterjs/hello.html

 Ancestors (12)