SOURCE

// necessary modules
const {
    Engine,
    Render,
    World,
    Body,
    Bodies,
    Mouse,
    MouseConstraint,
    Constraint,
    Events,
} = Matter;

// engine
const engine = Engine.create();

// renderer
const render = Render.create({
    element: document.querySelector('main'),
    engine,
    options: {
        wireframes: false,
        // 将画布的背景设置为完全透明，以支持使用矩形和圆形元素构建的设计
        background: 'transparent',
    },
});

// world
const {
    world
} = engine;

// 去除重力使球仅受到碰撞
engine.world.gravity.y = 0;

// 项目中使用的全局变量
// the idea is to translate the table to show a smaller rectangle surrounded by four borders and six circles
const margin = 40;
const width = 600;
const height = 800;

const borderSize = margin;
const pocketSize = margin;
// 描述袋口位置的数组
const pocketsPosition = [{
    x: 0,
    y: 0
}, {
    x: width,
    y: 0
}, {
    x: width,
    y: height / 2
}, {
    x: width,
    y: height
}, {
    x: 0,
    y: height
}, {
    x: 0,
    y: height / 2
},];
const ballSize = pocketSize * 0.5;

// specify a larger surface for the canvas, inspired by d3 margin convention
render.canvas.width = width + margin * 2;
render.canvas.height = height + margin * 2;

// 背景填充
const floor = Bodies.rectangle(width / 2, height / 2, width, height, {
    render: {
        fillStyle: 'hsl(150, 80%, 20%)',
    },
    // isSensor means the ball with not bounce off of the rectangle as if it were a solid shape
    isSensor: true,
});

// utility function to create a rectangle for the borders
const makeBorder = (x, y, w, h) =>
    Bodies.rectangle(x, y, w, h, {
        render: {
            fillStyle: 'hsl(260, 2%, 10%)',
        },
    });

// rectangles for the border, surrounding the floor
const borderTop = makeBorder(width / 2, -borderSize / 2, width, borderSize);
const borderRight = makeBorder(
    width + borderSize / 2,
    height / 2,
    borderSize,
    height
);
const borderBottom = makeBorder(
    width / 2,
    height + borderSize / 2,
    width,
    borderSize
);
const borderLeft = makeBorder(-borderSize / 2, height / 2, borderSize, height);

// utility function creating a circle for the pockets
// isSensor is specified to later have smaller circles used to detect a collision
const makePocket = (x, y, r, isSensor = true, label = '') =>
    Bodies.circle(x, y, r, {
        isStatic: true,
        isSensor,
        label,
        render: {
            fillStyle: 'hsl(260, 2%, 10%)',
        },
    });

// create two sets of circles, one purely aesthetical and one functional (smaller and used to detect a collision)
const pockets = pocketsPosition.map(({
    x, y
}) => makePocket(x, y, pocketSize));
const pocketsCollision = pocketsPosition.map(
    ({
        x, y
    }) => makePocket(x, y, pocketSize / 3, false, 'pocket') 
    // the label is picked up following the collisionStart event
);

const table = Body.create({
    parts: [
        floor,
        borderTop,
        borderRight,
        borderBottom,
        borderLeft,
        ...pockets,
        ...pocketsCollision,
    ],
    isStatic: true,
});

// translate the table in the canvas
Body.translate(table, {
    x: margin,
    y: margin,
});

World.add(world, table);

// utility function returning a circle for the ball(s)
// add a field for the category, to have the mouse cursor interact only with the starter white ball
const makeBall = (x, y, r, fillStyle, label = 'ball', category = 0x0002) =>
    Bodies.circle(x, y, r, {
        restitution: 1,
        friction: 0.3,
        label,
        collisionFilter: {
            category,
        },
        render: {
            fillStyle,
        },
    });

// utility function returning the sum of all numbers from 1 up to the input value
// used to color the balls in the triangular pattern with different hues around the color wheel
const triangularNumber = n => {
    const numbers = Array(n - 1)
        .fill()
        .map((number, index) => index + 1);
    return numbers.reduce((acc, curr) => acc + curr, 0);
};
/* utility function creating a pattern for the balls
accepting as input the number of rows, returning as many balls as to create the following pattern
  x x x
   x x
    x
*/
const makePattern = (rows, x, y, r) => {
    let columns = 1;
    const ballsPattern = [];
    for (let i = 0; i < rows; i += 1) {
        const ballsRow = Array(columns)
            .fill()
            .map((col, colIndex) =>
                makeBall(
                    x + ((colIndex - columns / 2) * r * 2 + r),
                    y - (columns - 1) * r * 2,
                    r,
                    `hsl(${(360 / triangularNumber(rows)) *
                    (columns + colIndex)}, 45%, 50%)`
                )
            );
        ballsPattern.push(...ballsRow);
        columns += 1;
    }
    return ballsPattern;
};

// balls included in the top section of the billiard
const balls = makePattern(5, width / 2 + margin, height / 3 + margin, ballSize);
World.add(world, [...balls]);

// ball included in the bottom section
// 指定不同的标签以区分球的行为
const ballX = width / 2 + margin;
const ballY = (height * 4) / 5;

const ball = makeBall(
    ballX,
    ballY,
    ballSize,
    'hsl(0, 0%, 90%)',
    'ball white',
    0x0001
);

// 球包含的约束
const constraint = Constraint.create({
    pointA: {
        x: ballX,
        y: ballY,
    },
    bodyB: ball,
    stiffness: 0.1,
});

World.add(world, [ball, constraint]);

// 添加鼠标约束
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, {
    mouse,
});
// 过滤鼠标约束覆盖的对象，防止玩家随意移动彩色变体
mouseConstraint.collisionFilter.mask = 0x0001;
World.add(world, mouseConstraint);

// 球与其中一个内袋发生碰撞后，增加标题中显示的得分
const scoreboard = document.querySelector('#score');
let score = 0;
// function updating the score with the input value
function handleScore(point) {
    score += point;
    scoreboard.textContent = score;
}

// function following the collisionStart event
function handleCollision(event) {
    const {
        pairs
    } = event;
    // 如果在球和口袋之间检测到碰撞，则循环通过对阵列并更新得分
    pairs.forEach(pair => {
        const {
            bodyA, bodyB
        } = pair;
        // String.includes allows to find if the label contains a certain string of text
        if (bodyA.label.includes('ball') && bodyB.label === 'pocket') {
            // if the ball is the white, starter ball, decrease the score and reset the position of the ball
            if (bodyA.label.includes('white')) {
                handleScore(-1);
                // set the velocity to 0 to stop the otherwise moving ball
                Body.setVelocity(bodyA, {
                    x: 0,
                    y: 0,
                });
                Body.setPosition(bodyA, {
                    x: ballX,
                    y: ballY,
                });
            } else {
                // else remove the scoring ball and increase the score
                handleScore(1);
                World.remove(world, bodyA);
            }
        }
        // repeat the logic for the opposite scenario
        if (bodyB.label.includes('ball') && bodyA.label === 'pocket') {
            if (bodyB.label.includes('white')) {
                handleScore(-1);
                Body.setVelocity(bodyB, {
                    x: 0,
                    y: 0,
                });
                Body.setPosition(bodyB, {
                    x: width / 2 + margin,
                    y: (height * 4) / 5,
                });
            } else {
                handleScore(1);
                World.remove(world, bodyB);
            }
        }
    });
}
Events.on(engine, 'collisionStart', handleCollision);

// body for the mouse events
const body = document.querySelector('body');
// boolean used to toggle the constraint on the white ball
let isConstrained = true;

// following a mouseup event remove the constraint
function removeConstraint() {
    // remove the constaint following a brief delay to have the ball move in the desired direction
    const timeoutID = setTimeout(() => {
        isConstrained = false;
        World.remove(world, constraint);
        clearTimeout(timeoutID);
    }, 25);
}
body.addEventListener('mouseup', removeConstraint);
body.addEventListener('mouseout', removeConstraint);

// following the collisionActive event, and only if the constraint is not already present, locate the white ball and add the constraint on top of the ball
function handleCollisionActive() {
    if (isConstrained) {
        return false;
    }
    // if the white ball is slow enough reset the constraint on the ball
    if (Math.abs(ball.velocity.x) <= 0.2 && Math.abs(ball.velocity.y) < 0.2) {
        isConstrained = true;
        const {
            x, y
        } = ball.position;
        constraint.pointA.x = x;
        constraint.pointA.y = y;
        World.add(world, constraint);
    }
}
Events.on(engine, 'collisionActive', handleCollisionActive);

Engine.run(engine);
Render.run(render);

<main>
    <header>
        <h1>
            Play ball
        </h1>

        <h2>
            Score:
            <mark id="score">0</mark>
        </h2>
    </header>
</main>
<script src='https://unpkg.com/matter-js@0.14.2/build/matter.min.js'></script>

@import url("https://fonts.googleapis.com/css?family=Quicksand:500,700&display=swap");
*,
*:before,
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    color: hsl(260, 2%, 5%);
    background: hsl(55, 30%, 95%);
    font-family: "Quicksand", sans-serif;
}
main {
    max-width: 400px;
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
}
/* display the headings in a row */

main header {
    padding: 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
h1 {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    position: relative;
}
/* with pseudo elements draw a pool-inspired graphic with a #8 ball
when the heading is hovered on apply a silly transition moving the stick and ball upwards
*/

h1:before,
h1:after {
    position: absolute;
    left: 100%;
    transform: translate(-50%, 0);
}
h1:after {
    bottom: 100%;
    content: "8";
    font-weight: inherit;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #3d3c3f;
    background: radial-gradient(circle at 50% 50%, hsl(25, 70%, 94%) 40%, transparent 42%), hsl(260, 2%, 25%);
    /* transition and delay applied as the :hover state is removed
    specify different values as the hover state occurs
    */
    
    transition: transform 0.5s ease-in-out;
    transition-delay: 0s;
}
/* translate the ball as the stick reaches its new vertical position */

h1:hover:after {
    transform: translate(-50%, -8px);
    transition-delay: 0.45s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.5);
}
h1:before {
    content: "";
    bottom: 0%;
    height: 100%;
    width: 5px;
    background: linear-gradient(to bottom, hsl(25, 70%, 70%) 4px, transparent 4px), hsl(260, 2%, 25%);
    transform: translate(-50%, 0);
    transition: transform 0.5s ease-in-out;
    transition-delay: 0.1s;
}
h1:hover:before {
    transform: translate(-50%, -2px);
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.6, -1.25, 0.735, 0.045);
}
h2 {
    font-size: 1rem;
    font-weight: 500;
}
h2 mark {
    font-weight: 700;
    background: hsl(25, 70%, 70%);
    padding: 0.2rem 0.5rem;
}
canvas {
    width: 100%;
}