“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Although I almost don’t play games anymore, games are the dream of every big boy. When I was a child, I often had to wait for one or two hours to play games. I remember that I used to draw games on paper to play, and I still remember those things clearly. This is also one of the motives of coding today. There is no purpose, but it is only for a little bit of my childhood. Suddenly I don’t know what the right word is.

<! DOCTYPEhtml>
<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>
Copy the code

P5.js is used to draw the game’s interface on the browser, and matter. Js is used to simulate the physics system

function setup() {
    createCanvas(600.400);
}
  
function draw() {
    background(0);
}

Copy the code

Setup a 2D scene and define setup in which a Canvas is created to define the width and height. Initialize the geometry in the setup method and then in the draw method, which is used to draw the geometry update interface.

  • bird.js
  • box.js

Create the ground

Define a Box class that accepts Box at interface positions X and y and its width and height W and h in the constructor, and then define rect to fill with white in the show method.

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)
    }
}
Copy the code

Create a box

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();

  }
Copy the code

Create a bird

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); }}Copy the code
let ground;
let box;

let bird;
function setup() {... bird =new Bird(50.300.25)}function draw() {... bird.show(); }Copy the code

The introduction of Matterjs

We introduce Matterjs statically in the tag

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

Start by defining engine and World in Setup

let engine,world;

function setup() {
  createCanvas(600.400); engine = Matter.Engine.create(); world = engine.world; . }Copy the code

With world and Engine defined, we can add a package for Box and Bird and ground to be rigid bodies, so that they will exist in the previously defined physical system.

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)
    }
}
Copy the code

Here we define Matter.Bodies. Rectangle (x,y, W,h) and then draw the Box position information from the rigidbody, not from the definition.