javascript - 壁纸上的可拖动 Sprite

Question

我正在尝试重现这样的内容:http://carbure.co/ .

经检查，网站使用matter.js ，一个物理引擎。下面是一个(失败的)代码尝试，考虑到糟糕的文档，我很难让它工作。

有谁知道我还能如何实现这一目标吗？

非常感谢

$(window).load(function() {
  var w = $(window).innerWidth();
  var h = $(window).innerHeight();

  // Matter.js module aliases
  var Engine = Matter.Engine;
  var World = Matter.World;
  var Bodies = Matter.Bodies;
  var Body = Matter.Body;
  var Constraint = Matter.Constraint;
  var Composite = Matter.Composite;
  var Composites = Matter.Composites;
  var MouseConstraint = Matter.MouseConstraint;

  // create a Matter.js engine
  var engine = Engine.create({
    render: {
      element: document.body,
      options: {
        width: w,
        height: h,
        wireframes: false,
        background: '#fff'
      }
    }
  });

  // add a mouse controlled constraint
  var mouseConstraint = MouseConstraint.create(engine);
  World.add(engine.world, mouseConstraint);

  var addToWorld = [];

  // create random poly's and a ground
  var ranPolygons = Math.random() * 10 + 5 >> 0;
  var prevPoly;
  for (var i = 0; i < ranPolygons; i++) {
    var polyRadius = Math.random() * 40 + 40 >> 0;
    var polySides = 1;
    var x = Math.random() * (w - polyRadius * 2) + polyRadius >> 0;
    var y = Math.random() * (h / 2 - polyRadius * 2) + polyRadius >> 0;
    var isStatic = Math.random() * 1 < 0.2;

    var poly = Bodies.polygon(x, y, polySides, polyRadius, {
      render: {
        fillStyle: isStatic ? '#0134CB' : makePattern(),
        strokeStyle: isStatic ? 'transparent' : '#0134CB',
        lineWidth: Math.random() * 5 + 2 >> 0
      },
      density: Math.random() * 0.1,
      isStatic: isStatic,
      restitution: Math.random() * 1
    });
    addToWorld.push(poly);

  // add borders
  var border = 5;
  var halfBorder = border / 2;
  var borders = [
    Bodies.rectangle(w / 2, halfBorder, w + border, border, {
      isStatic: true,
      render: {
        fillStyle: 'transparent',
        strokeStyle: 'transparent'
      }
    }),
    Bodies.rectangle(w / 2, h - halfBorder, w + border, border, {
      isStatic: true,
      render: {
        fillStyle: 'transparent',
        strokeStyle: 'transparent'
      }
    }),
    Bodies.rectangle(halfBorder, h / 2, border, h + border, {
      isStatic: true,
      render: {
        fillStyle: 'transparent',
        strokeStyle: 'transparent'
      }
    }),
    Bodies.rectangle(w - halfBorder, h / 2, border, h + border, {
      isStatic: true,
      render: {
        fillStyle: 'transparent',
        strokeStyle: 'transparent'
      }
    }),
  ];
  addToWorld = addToWorld.concat(borders);

  // add all of the bodies to the world
  World.add(engine.world, addToWorld);

  // run the engine
  runner = Engine.run(engine)

  // setTimeout(ranGrav, 2000);
  engine.world.gravity.y = 0;
  engine.world.gravity.x = 0;

  $(engine.render.canvas).css({
    width: '100%',
    height: '100vh'
  })

});

Answer 1

我运行了你的代码。它有很多问题。首先，缺少的括号属于循环:

for (var i = 0; i < ranPolygons; i++) {

除此之外，我还必须运行渲染器:

Render.run(render);

我去掉了这一点，因为它是不必要的并且发出警告:

$(engine.render.canvas).css({
    width: '100%',
    height: '100vh'
});

https://jsfiddle.net/jx3vn7da/