写一个愤怒的小鸟 (3)

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

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

今天停下来简单整理一下，p5.js 这样在 Canvas 上绘制库的 API 比较好理解，不过可能想物理系统模拟的库大家可能会感觉有点陌生，所以先停下来简单整理介绍一下如何使用 Matterjs。

Matter.Engine 模块包含创建和操作引擎的方法。引擎是一个控制器，管理更物理模拟世界。

engine = Engine.create();

创建一个新的引擎，选项参数是一个对象，如果没有指定选项对象，这使用引擎的属性的默认值来创建引擎。

创建一个具有矩形外壳的刚体模型。选项参数是一个对象，通过传入选项对象内属性值可以覆盖默认属性值，返回一个Matter.Body。

Matter.Body 模块包含了创建和操作 Body 模型的方法。Matter.Body 是一个可以由Matter.Engine 模拟的刚性体。在 Matter.Bodies 模块类似一个工厂类，可以看成创建 Body（如矩形、圆形和其他多边形)的工厂。

Matter.Bodies.[circle](x, y, radius, [options], [maxSides])

Matter.Bodies.[rectangle](x, y, width, height, [options])

通过Matter.Bodies 来创建 circle 和 rectangle 刚体

Matter.Body.[rotate](body,rotation,option)

World.add(world,this.body)

约束

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

Matter.MouseConstraint 模块包含创建鼠标约束的方法。鼠标约束用于允许用户互动，提供通过鼠标或触摸移动物体的能力。

Matter.Mouse模块包含创建和操作鼠标输入的方法。

整理代码

所有的用法都应该迁移到 Matter.Composite 上的对应函数。例如，World.add(world, body)现在变成 Composite.add(world, body)。

class Bird{
    constructor(x,y,r){
        this.body =Matter.Bodies.circle(x, y, r);
        Composite.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();
    }
}