SOURCE

console 命令行工具 X clear

                    
>
console
// 简写
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Composites = Matter.Composites,
    Body = Matter.Body,
    Constraint = Matter.Constraint,
    MouseConstraint = Matter.MouseConstraint,
    Common = Matter.Common,
    Events = Matter.Events;


// 创建引擎
var engine = Engine.create();

// 创建渲染器
var render = Render.create({
    element: document.body,
    engine: engine,
    options: {
        wireframes : false
    }
});

// 墙壁
var offset = 5;
World.add(engine.world, [
    Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true }),
    Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true }),
    Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }),
    Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true })
]);

// 鼠标约束
var mouseConstraint = MouseConstraint.create(engine, {
    element: render.canvas
});

World.add(engine.world, mouseConstraint);

// 运行引擎
Engine.run(engine);
Render.run(render);





var stack = Composites.stack(20, 20, 6, 4, 0, 0, function(x, y) {
  if (Common.random() > 0.35) {
    return Bodies.rectangle(x, y, 64, 64, {
      render: {
        stroke: "#000",
        sprite: {
          texture: "img/box.png"
        }
      }
    });
  } else {
    return Bodies.circle(x, y, 46, {
      desity: 0.0005,
      frictionAir: 0.06,
      friction: 0.01,
      render: {
        sprite: {
          texture: "img/ball.png"
        }
      }
    });
  }
});

World.add(engine.world, stack);

var renderOptions = render.options;

Engine.run(engine);
Render.run(render);

document.querySelector(".btns_on").addEventListener("click", function() {
  renderOptions.wireframes = true;
},
false);

document.querySelector(".btns_off").addEventListener("click", function() {
  renderOptions.wireframes = false;
},
false);
<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <title>
      Document
    </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js">
    </script>
  </head>
  
  <body>
    <div class="btns">
      <button class="btns_on">
        线框模式
      </button>
      <button class="btns_off">
        全局渲染模式
      </button>
    </div>
  </body>

</html>

本项目引用的自定义外部资源