Draggable спрайты на обоях

Question

Я пытаюсь воспроизвести что-то вроде этого: http://carbure.co/.

После проверки веб-сайт использует физический движок. Ниже приведена (неудачная) попытка кода, и мне трудно заставить ее работать, учитывая ужасные документы.

У кого-нибудь есть идеи, как еще я могу этого добиться?

Большое спасибо

$(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/