首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >无法为matter.js设置动画

无法为matter.js设置动画
EN

Stack Overflow用户
提问于 2017-03-12 18:17:23
回答 1查看 777关注 0票数 1

我试图在matter.js网站上复制一个例子,但我无法让它工作。我尝试将我的代码布局成与项目相同的方式,这些项目确实可以工作,但没有…

代码语言:javascript
复制
    var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

    var world;

    var engine;
    var particles=[];

function Particles(x,y,r){
  this.x=x;
  this.y=y;
  this.d=r*2;
  this.body=Bodies.circle(x,y,r);
  World.add(world,this.body);
  this.disp=function(){
    fill(255);
    ellipse(x,y,this.d, this.d);
  }

}



function setup() {
createCanvas(600,400);
engine = Engine.create();
world=engine.world;
Engine.run(engine);
rect1=Bodies.rectangle(width/2,height/2,10,150);
World.add(world,rect1);



}

function mousePressed(){
  particles.push(new Particles(mouseX,mouseY,5));
}

function draw() {
  background(51);

Engine.update(engine);
  push();
  rectMode(CENTER);
  rect(width/2,height/2,10,150);
  pop();

  for (var i = 0; i < particles.length; i++) {
    particles[i].disp();



}}

所以基本上的问题是,我可以用鼠标创建的粒子不会移动(以及矩形),但它们在world.bodies中被引用(当我在chrome中使用控制台时)。我不知道为什么它不能工作…我使用p5.js作为javascipt环境(它有点像处理)

EN

回答 1

Stack Overflow用户

发布于 2017-03-13 00:00:08

在发布代码之前,请尝试正确格式化代码。至少使用适当的缩进。

但你的问题是这一行:

代码语言:javascript
复制
ellipse(x,y,this.d, this.d);

每当绘制粒子时,都会使用传递给构造函数的原始xy变量。你永远不会改变这些值,所以你的粒子永远不会移动。

你正在使用一个物理引擎,但是你永远不会从物理引擎中得到粒子的位置。要解决您的问题,需要参考matter.js库的文档。

具体地说,body documentation包含有关body.position字段的信息,该字段包含物理引擎正在更新的正文的位置。

代码语言:javascript
复制
ellipse(this.body.position.x, this.body.position.y, this.d, this.d);
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42746176

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档