写一个愤怒的小鸟(1)用 p5.js 来在浏览器上绘制游戏的界面，模拟物理系统采用 matter.js 搭建一个 2D

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <script src="js/box.js"></script>
    <script src="js/sketch.js"></script>
</body>
</html>

用 p5.js 来在浏览器上绘制游戏的界面，模拟物理系统采用 matter.js

function setup() {
    createCanvas(600, 400);
}
  
function draw() {
    background(0);
}

搭建一个 2D 场景，定义 setup 在其中创建一个 Canvas 定义宽度和高度，在 setup 方法对对于几何体进行初始化，然后在 draw 方法，这个方法中用于绘制几何体更新界面。

bird.js
box.js

创建地面

定义一个 Box 类，在构造函数接受 Box 在界面位置 x 和 y 以及 box 的宽度和高度 w 和 h，然后在 show 方法定义 rect 填充颜色为白色。

class Box{
    constructor(x,y,w,h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }

    show(){
        fill(255)
        rect(this.x,this.y,this.w,this.h)
    }
}

创建一个箱子

let ground;
let box;
function setup() {
    createCanvas(600, 400);
    ground = new Box(0,height-20,width,20);
    box = new Box(450,300,50,75)
  }
  
  function draw() {
    background(0);
    ground.show();
    box.show();

  }

创建小鸟

class Bird{
    constructor(x,y,r){
        this.x = x;
        this.y = y;
        this.r = r;
    }

    show(){
        fill(255);
        circle(this.x, this.y, this.r);
    }
}

let ground;
let box;

let bird;
function setup() {
   ...
    bird = new Bird(50,300,25)

  }
  
  function draw() {
   ...
    bird.show();
  }

屏幕快照 2021-11-11 下午6.53.11.png

引入 Matterjs

我们在标签静态引入 Matterjs

<script src="libs/matter.min.js"></script>

首先在 setup 中定义 engine 和 world

let engine,world;

function setup() {
  createCanvas(600, 400);
  engine = Matter.Engine.create();
  world = engine.world;
  ...
}

定义好 world 和 engine，我们可以为 box 和 bird 以及 ground 添加一个包裹将其设置为刚体，这样他们就会存在于之前定义物理系统里了。

class Box{
    constructor(x,y,w,h){
        this.body = Matter.Bodies.rectangle(x,y,w,h);
        Matter.World.add(world,this.body);
        this.w = w;
        this.h = h;
    }

    show(){
        const pos = this.body.position;
        fill(255)
        rect(pos.x,pos.y,this.w,this.h)
    }
}

这里我们定义 Matter.Bodies.rectangle(x,y,w,h) 刚体，然后绘制 Box 位置信息是从刚体获取，而不是定义得来。