docs/index.html

<!doctype html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>lark-matter</title>
</head>

<body>
  <script src='./libs/matter.js'></script>
  <script src='./LarkMatter/index.js'></script>
  <script>
    Matter.use('lark-matter');
    // Pixel size of a dot
    LarkMatter.options.dotSize = 5;
    // Number of pixel art rotation patterns
    LarkMatter.options.rotationNum = 16;
    // Enable sound effects
    LarkMatter.options.enableSes = false;
    // Enable a bgm
    LarkMatter.options.enableBgm = false;
    // Set a random seed for generating pixels, particles and audios
    // (null: Set a seed randomly each time)
    LarkMatter.options.seed = null;
    // OnRender callback function
    LarkMatter.options.onRender = null;

    var Engine = Matter.Engine,
      Render = Matter.Render,
      Runner = Matter.Runner,
      Composites = Matter.Composites,
      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: Math.min(document.documentElement.clientWidth, 800),
        height: Math.min(document.documentElement.clientHeight, 600),
        showAngleIndicator: true,
        showCollisions: true
      }
    });

    Render.run(render);

    // create runner
    var runner = Runner.create();
    Runner.run(runner, engine);

    // add bodies
    World.add(world, [
      // walls
      Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
      Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
      Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
      Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
    ]);

    var scale = 0.9;
    World.add(world, Composites.car(150, 100, 100 * scale, 40 * scale, 30 * scale));

    scale = 0.8;
    World.add(world, Composites.car(350, 300, 100 * scale, 40 * scale, 30 * scale));

    World.add(world, [
      Bodies.rectangle(200, 150, 400, 20, { isStatic: true, angle: Math.PI * 0.06 }),
      Bodies.rectangle(500, 350, 650, 20, { isStatic: true, angle: -Math.PI * 0.06 }),
      Bodies.rectangle(300, 560, 600, 20, { isStatic: true, angle: Math.PI * 0.04 })
    ]);
  </script>
</body>

</html>