Javascript 带有Matter.js的HTML元素

我想用Matter.js以类似的方式移动HTML元素

这些是我的目标：

div{
颜色：白色；
字体大小：70px；
填充：20px；
显示：内联块；
字体系列：Arial；
背景：蔚蓝；
}
.帆布{
宽度：500px；
高度：500px；
}
.反对一{
背景：蓝色；
}
.目标二{
背景：红色；
}
.反对三{
背景：绿色；
}

一个
两个
三

是使用matter.js构建的。我这样做的方式是在

update（）

函数中根据物质体的变换来变换DOM元素

var bodiesDom = document.querySelectorAll('.matter-body');
var bodies = [];
for (var i = 0, l = bodiesDom.length; i < l; i++) {
  if (bodiesDom[i].classList.contains('hot')) {
    frA = 0.1;
    oY = -40;
  } else {
    frA = 0;
    oY = 0;
  }
  if (bodiesDom[i].classList.contains('strip')) {
    // Strip
    var body = Bodies.rectangle(
      VIEW.centerX + Math.floor(Math.random() * VIEW.width/2) - VIEW.width/4,
      oY,
      VIEW.width * bodiesDom[i].offsetWidth / window.innerWidth,
      VIEW.height * bodiesDom[i].offsetHeight / window.innerHeight, {
        restitution:      0.05,
        friction:         2,
        frictionAir:      frA,
        frictionStatic:   20,
        density:          100,
        chamfer:          { radius: 4 },
        angle:            (Math.random() * 2.000) - 1.000
      }
    );
  } else if (bodiesDom[i].classList.contains('page-nav')) {
    // Nav
    var body = Bodies.circle(
      VIEW.centerX + Math.floor(Math.random() * VIEW.width/2) - VIEW.width/4,
      0,
      24, {
        restitution:      0.3,
        friction:         2,
        frictionAir:      0,
        frictionStatic:   2,
        density:          100,
        angle:            (Math.random() * 2.000) - 1.000
      }
    );
  }
  bodiesDom[i].id = body.id;
  bodies.push(body);
}

function update() {

  // strips
  for (var i = 0, l = bodiesDom.length; i < l; i++) {
    var bodyDom = bodiesDom[i];
    var body = null;
    for (var j = 0, k = bodies.length; j < k; j++) {
      if (bodies[j].id == bodyDom.id) {
        body = bodies[j];
        break;
      }
    }

    if (body === null) continue;

    bodyDom.style.transform = "translate( " +
      (body.position.x - bodyDom.offsetWidth / 2) +
      "px, " +
      (body.position.y - bodyDom.offsetHeight / 2) +
      "px )";
    bodyDom.style.transform += "rotate( " + body.angle + "rad )";
  }

  window.requestAnimationFrame(update);
}

var bodiesDom=document.queryselectoral（'.matter body'）；
var主体=[]；
for（var i=0，l=bodiesDom.length；i

处的代码是使用matter.js构建的。我这样做的方式是在

update（）

函数中根据物质体的变换来变换DOM元素

var bodiesDom = document.querySelectorAll('.matter-body');
var bodies = [];
for (var i = 0, l = bodiesDom.length; i < l; i++) {
  if (bodiesDom[i].classList.contains('hot')) {
    frA = 0.1;
    oY = -40;
  } else {
    frA = 0;
    oY = 0;
  }
  if (bodiesDom[i].classList.contains('strip')) {
    // Strip
    var body = Bodies.rectangle(
      VIEW.centerX + Math.floor(Math.random() * VIEW.width/2) - VIEW.width/4,
      oY,
      VIEW.width * bodiesDom[i].offsetWidth / window.innerWidth,
      VIEW.height * bodiesDom[i].offsetHeight / window.innerHeight, {
        restitution:      0.05,
        friction:         2,
        frictionAir:      frA,
        frictionStatic:   20,
        density:          100,
        chamfer:          { radius: 4 },
        angle:            (Math.random() * 2.000) - 1.000
      }
    );
  } else if (bodiesDom[i].classList.contains('page-nav')) {
    // Nav
    var body = Bodies.circle(
      VIEW.centerX + Math.floor(Math.random() * VIEW.width/2) - VIEW.width/4,
      0,
      24, {
        restitution:      0.3,
        friction:         2,
        frictionAir:      0,
        frictionStatic:   2,
        density:          100,
        angle:            (Math.random() * 2.000) - 1.000
      }
    );
  }
  bodiesDom[i].id = body.id;
  bodies.push(body);
}

function update() {

  // strips
  for (var i = 0, l = bodiesDom.length; i < l; i++) {
    var bodyDom = bodiesDom[i];
    var body = null;
    for (var j = 0, k = bodies.length; j < k; j++) {
      if (bodies[j].id == bodyDom.id) {
        body = bodies[j];
        break;
      }
    }

    if (body === null) continue;

    bodyDom.style.transform = "translate( " +
      (body.position.x - bodyDom.offsetWidth / 2) +
      "px, " +
      (body.position.y - bodyDom.offsetHeight / 2) +
      "px )";
    bodyDom.style.transform += "rotate( " + body.angle + "rad )";
  }

  window.requestAnimationFrame(update);
}

var bodiesDom=document.queryselectoral（'.matter body'）；
var主体=[]；
for（var i=0，l=bodiesDom.length；i

---

代码在

我没有使用matter.js，但从我从文档中看到它使用的是HTML5画布。我认为您需要在画布中绘制对象，而不是使用HTML元素。我没有使用matter.js，但从文档中看到，它使用的是HTML5画布。我认为你需要在画布中绘制对象，而不是使用HTML元素为什么使用Math.random？我希望元素具有随机的起始位置。你的代码示例绝对节省了我的时间。非常感谢你发布这篇文章！很乐意帮忙！我很想知道你在构建什么。为什么要使用Math.random？我希望元素具有随机的起始位置。你的代码示例绝对救了我的命。非常感谢你发布这篇文章！很乐意帮忙！很想看看你在建什么。