lonekorean

@supports (background: paint(id)) {
    /* good to go! */
}

lonekorean

if ('paintWorklet' in CSS) {
    // good to go!
}

lonekorean

Matter.Events.on(engine, 'beforeUpdate', function(event) {
    if (pinball.position.x > 450 && pinball.velocity.y > 0) {
        Matter.Body.setVelocity(pinball, { x: 0, y: -10 });
    }
});

lonekorean

Matter.Events.on(engine, 'collisionStart', function(event) {
    let a = event.pairs.bodyA;
    let b = event.pairs.bodyB;

    // check bodies, do whatever...
});

lonekorean

const CUSTOM_PATH = '425.6 327 273.8 315.6...';

function customShape(x, y) {
    let vertices = Matter.Vertices.fromPath(CUSTOM_PATH);
    return Matter.Bodies.fromVertices(x, y, vertices, {
        // set options if you need them...
    });
}

lonekorean

<polygon points="425.6 327 273.8 315.6..."/>

lonekorean

function wall(x, y, width, height) {
    return Matter.Bodies.rectangle(x, y, width, height, {
        chamfer: { radius: 10 },
        // other options here...
    });
}

lonekorean

// wrong
square.setAngularVelocity(0.1);

// correct
Matter.Body.setAngularVelocity(square, 0.1);

lonekorean

function rect(x, y, width, height, color) {
    return Matter.Bodies.rectangle(x, y, width, height, {
        isStatic: true,
        restitution: 1,
        render: { fillStyle: color }
    });
}

lonekorean

// params: x, y, width, height, options
let square = Matter.Bodies.rectangle(200, 100, 50, 50, {
    // specify options here
});
Matter.World.add(engine.world, square);