与 Chipmunk JS 碰撞失败答案

【问题标题】：Collision with Chipmunk JS failing与 Chipmunk JS 碰撞失败
【发布时间】：2013-10-25 14:58:13
【问题描述】：

您可以在这里查看正在发生的事情，并在此处试用演示：http://student.dei.uc.pt/~drgomes/carry/index.html。

所以，我正在使用 Chipmunk JS 演示来了解它的工作原理（请参阅https://github.com/josephg/Chipmunk-js）。简单的演示一开始还不错，但后来事情开始变得疯狂，到目前为止我一直试图弄清楚这一点，但没有运气。

var radToDeg = 180 / Math.PI;

function PlayState() {
  this.blocks = [];

  this.setup = function() {
    space.iterations = 100;
    space.gravity = new cp.Vect(0, 150);
    space.game = this;

    this.ground = space.addShape(new cp.SegmentShape(space.staticBody, new cp.v(0, 480), new cp.v(640, 480), 0));
    this.ground.setElasticity(0);
    this.ground.setFriction(1);
  };

  this.update = function() {
    space.step(this.dt);

    for (var i = 0; i < this.blocks.length; i++) {
      var block = this.blocks[i];
      block.sprite.x = block.body.p.x;
      block.sprite.y = block.body.p.y;
      block.sprite.angle = block.body.a * radToDeg;
    }

    if (isMouseDown("left")) {
      if (this.canAddBlock) {
        this.canAddBlock = false;
        this.addBlock(mouseX, mouseY);
      }
    } else {
      this.canAddBlock = true;
    }
  };

  this.draw = function() {
    clearCanvas();

    for (var i = 0; i < this.blocks.length; i++) {
      this.blocks[i].sprite.draw();
    }

    // this.ground.sprite.draw();
  };

  this.addBlock = function(x, y) {
    width = 64;
    height = 64;

    var newBlock = new Block(x, y, width, height);

    newBlock.body = space.addBody(new cp.Body(1, cp.momentForBox(1, width, height)));
    newBlock.body.setPos(new cp.v(x, y));
    newBlock.shape = space.addShape(new cp.BoxShape(newBlock.body, width, height));
    newBlock.shape.setElasticity(0);
    newBlock.shape.setFriction(1);
    this.blocks.push(newBlock);
  };
}

desiredFPS = 60;
switchState(new PlayState());

源代码非常简单，我对我创建地面的方式表示怀疑，因为我无法确定它实际上处于什么位置。立方体似乎找到了它并与之碰撞。

另一个源文件是一个小块类来帮助我组织事情：

Block = (function() {
  function constructor(x, y, width, height) {
    this.sprite = new Sprite("res/block.png", x, y);

    this.width = width;
    this.height = height;

  }

  constructor.prototype = {
    update: function() {

    }
  };

  return constructor;
})();

【问题讨论】：

我会启用 chrome web 开发人员工具的画布检查器，看看发生了什么：html5rocks.com/en/tutorials/canvas/inspection 因为我担心我无法复制这个问题
你能把你的演示放到jsfiddle.net吗？
你卡在哪里了？伙计，我在这里没有发现任何问题

标签： javascript html game-physics chipmunk physics-engine

【解决方案1】：

从观察行为来看，我认为它就像精灵和花栗鼠身体不围绕同一点旋转一样简单。我相信花栗鼠的旋转是围绕着质心的。看起来精灵围绕左上角旋转。事实上，它们也可能是从那个角落画的，这就解释了为什么它们堆叠起来很有趣，并且与底部平面相交。

我认为您在 update 函数中需要这样的东西。（伪代码）：

offset = Vector(-width/2,-height/2) 
offset.rotate_by(block.body.a)

block.sprite.x = block.body.p.x + offset.x
block.sprite.y = block.body.p.y + offset.y

【讨论】：

其实这个理论很好，我一定要试试，我很确定可能是这样的。

【解决方案2】：

我根本不知道花栗鼠，但在玩你的演示时，物理学似乎根本不正确（对我来说从一开始就是正确的）。查看您的代码只是一种预感，但在我看来，您应该在 Block 类中的 Sprite 实例上设置尺寸，而不是在 Block 实例本身上。

Block = (function() {
  function constructor(x, y, width, height) {
    this.sprite = new Sprite("res/block.png", x, y);

    // Do you mean to set the width and height of the sprite?
    this.sprite.width = width;
    this.sprite.height = height;

  }

  constructor.prototype = {
    update: function() {

    }
  };

  return constructor;
})();

【讨论】：