写一个愤怒的小鸟 (2)

「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」

虽然现在几乎不玩游戏了，不过游戏是每一个大男孩的梦想，小时候为了玩游戏等上 1个 2个小时的事情都是常有，今天回想起来还是美滋滋。记得自己曾经在纸上绘制过游戏来玩，到现在那些事情还记得很清楚，这也是我们今天 coding 的一个动机，没有什么目的，完全是是对自己童年的一点点什么来的呢? 突然不知道用什么恰当的词。

将结合体的一些平移和旋转动作提取出来有物理引擎来控制。所以位置信息和角度都是从 body 上获取然后用于在更新绘制界面时控制 box 的位置和角度。

show(){
    const pos = this.body.position;
    const angle = this.body.angle;
    push()
    translate(pos.x,pos.y)
    rotate(angle)
    fill(255)
    rect(0,0,this.w,this.h)
    pop()
}
复制代码

不过在 p5.js 对于几何体是以其左上角点做中心点对几何体进行操作，不顾在 matter.js 是几何体中心。

    show(){
        ...
        fill(255);
        rectMode(CENTER);
        rect(0,0,this.w,this.h);
        pop();
    }
复制代码

通过 rectMode 将 p5.js 的系统中心设置为几何体的中心而不是几何体的左上角。为此需要添加rectMode(CENTER)语句，关于中心点问题就得到了解决，让 p5.js 和 Matter.js 保持一致。

启动引擎

  function draw() {
    background(0);
    Matter.Engine.update(engine)
    ground.show();
    box.show();
    bird.show();
  }
复制代码

可以通过Matter.Engine.update(engine)并且希望将这一切都通过 p5.js 绘制在画面。添加完代码更新界面，发现瞬间 ground 和 box 都从上向下运动出了画面。我们需要地面是静止几何体，而 box 是动态几何体，所以还需要对于 ground 进行不修改，我们创建 Ground 类让其继承 Box，同时添加this.body.isStatic = true;这条语句将其转换为静态几何体。

class Ground extends Box{
    constructor(x,y,w,h){
        super(x,y,w,h);
        this.body.isStatic = true;
    }
}
复制代码

对 Circle 进行改造

class Bird{
    constructor(x,y,r){
        this.body =Matter.Bodies.circle(x, y, r);
        Matter.World.add(world,this.body);
        this.r = r;
    }

    show(){
        const pos = this.body.position;
        const angle = this.body.angle;
        push();
        translate(pos.x,pos.y);
        rotate(angle);
        fill(255);
        rectMode(CENTER);
        circle(0,0,this.r);
        pop();
    }
}
复制代码

这里简单总结一下将 p5 类，融入物理系统的一般步骤

• 首先创建一个 Matter.Bodies 的几何体作为刚体代理
• 然后将创建刚体代理添加物理引擎的 world
• 然后从刚体上获取位置和角度信息
• 利用角度和位置信息以及几何体大小信息来绘制几何体

添加互动

const {
    Engine,
    World,
    Bodies,
    Mouse,
    MouseConstraint,
    Constraint
} = Matter
复制代码

在设置函数，创建约束(Constraint)，这里创建 MouseConstraint 也就用鼠标点击刚体，刚体会随着鼠标移动，有点类似给刚体一定力作用， MouseConstraint.create(engine,options); 需要接受两个参数，一个哪一个物理引擎，一个是对那个一 html 元素添加鼠标交互。

function setup() {
    ...

    const mouse = Mouse.create(canvas.elt);
    const options = {
        mouse: mouse
    }

    mConstraint = MouseConstraint.create(engine,options);
    World.add(world,mConstraint);

  }
复制代码

添加多个 box

添加多个 box 这个应该不难，就不做过多解释直接上代码。

...

let ground;
let boxes = [];

...
function setup() {
    ...
    for (let i = 0; i < 3; i++) {
        boxes[i] = new Box(450,300 -i*75,50,75);
        
    }
    ...

  }
  
  function draw() {
    ...
    for (let i = 0; i < 3; i++) {
        boxes[i].show();
    }
    ...
  }
复制代码