无法使事项.js开始

我正在使用状态库。但是我什至无法启动它。我完全遵循“入门”指南,直到看不到渲染器出现。你能看到我做错了吗?

谢谢!

// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;

// 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
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>frist sketch matter js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <script language="javascript" type="text/javascript" src="libraries/matter.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
  </head>
  <body>
    <h1>First sketch</h1>
  </body>
</html>
评论
  • 渗透的葬礼
    渗透的葬礼 回复

    I don't know what the style.css refers to, but using cdn references for the Javascript files fixes the problem.

    // module aliases
    var Engine = Matter.Engine,
        Render = Matter.Render,
        World = Matter.World,
        Bodies = Matter.Bodies;
    
    // 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
    World.add(engine.world, [boxA, boxB, ground]);
    
    // run the engine
    Engine.run(engine);
    
    // run the renderer
    Render.run(render);
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>frist sketch matter js</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0/sketch.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.js"></script>
        <style>
        body {
          padding: 0;
          margin: 0;
        }
        </style>
      </head>
      <body>
        <h1>First sketch</h1>
      </body>
    </html>