// matter.js modules
let Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint;
// Game variables
let engine;
let world;
let renderer;
// Table variables
let table;
let pocketSize = 50;
let tableWidth = 500;
let tableHeight = 250;
// Ball arrays
let reds = [];
let colours = [];
let pockets = [];
// Cue variables
let cueBall;
let cue;
let cueLength = 100;
let aiming = false;
// Game state
let consecutiveColours = 0;
function setup() {
// Canvas
createCanvas(800, 600);
// Engine
engine = Engine.create();
// Renderer
renderer = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 600,
wireframes: false
}
});
// Table body
table = Bodies.rectangle(width / 2, height / 2, tableWidth, tableHeight, {
isStatic: true
});
World.add(world, table);
// Table walls
World.add(world, [
Bodies.rectangle(width / 2, 50, width, 100, {isStatic: true}),
Bodies.rectangle(width / 2, height - 50, width, 100, {isStatic: true}),
Bodies.rectangle(50, height / 2, 100, height, {isStatic: true}),
Bodies.rectangle(width - 50, height / 2, 100, height, {isStatic: true})
]);
// Pockets
let pocketOpts = { isStatic: true, isSensor: true };
pockets.push(Bodies.rectangle(width / 2, 50, pocketSize, pocketSize, pocketOpts));
// Add other 5 pockets
// Red balls
for(let i = 0; i < 15; i++) {
let ball = Bodies.circle(random(tableWidth / 4, tableWidth * 3 / 4),
random(100, tableHeight - 50), 15,
{ friction: 0.05,
restitution: 0.5
});
World.add(world, ball);
reds.push(ball);
}
// Coloured balls
let colourOptions = { friction: 0.05, restitution: 0.5 };
colours.push(Bodies.circle(tableWidth / 4, tableHeight / 2, 15, colourOptions));
colours.push(Bodies.circle(tableWidth * 3/4, tableHeight / 2, 15, colourOptions));
// Cue ball
cueBall = Bodies.circle(tableWidth / 2, tableHeight - 30, 15,
{ friction: 0.05,
restitution: 0.8});
World.add(world, cueBall);
// Mouse control
let mouse = Mouse.create(renderer.canvas);
let mConstraint = MouseConstraint.create(engine, { mouse: mouse });
World.add(world, mConstraint);
// Run renderer
Render.run(renderer);
}
function draw() {
// Background
background(0, 128, 0);
// Table
stroke(128);
strokeWeight(2);
fill(100, 50, 0);
rect(table.position.x - tableWidth / 2,
table.position.y - tableHeight / 2,
tableWidth,
tableHeight);
// Balls
for(let i = 0; i < reds.length; i++) {
drawBall(reds[i]);
}
for(let i = 0; i < colours.length; i++) {
drawBall(colours[i], 10);
}
// Cue ball
drawBall(cueBall);
// Cue
if (aiming) {
drawCue();
}
// Collision messages
checkCueCollisions();
// Update physics
Engine.update(engine);
// Remove pocketed reds
reds = reds.filter(red => !red.isSensor);
}
// Ball function
function drawBall(ball, r = 15) {
push();
noStroke();
fill(255);
circle(ball.position.x, ball.position.y, r * 2);
pop();
}
// Cue rendering
function drawCue() {
let x = mouseX;
let y = mouseY;
if (!onTable(x, y)) {
x = cue.position.x;
y = cue.position.y;
}
push();
stroke(128);
strokeWeight(10);
line(x, y, x - cueLength * cos(cue.angle),
y - cueLength * sin(cue.angle));
pop();
}
// Cue ball shot
function keyPressed() {
if (keyCode === ENTER) {
aiming = true;
cue = Bodies.rectangle(cueBall.position.x, cueBall.position.y, 100, 10);
World.add(world, cue);
}
}
// Collision messages
function checkCueCollisions() {
// Implement collisions with balls and cushions
}
// Helper functions
function onTable(x, y) {
return x >= 0 && x <= width &&
y >= 100 && y <= height - 100;
}
This is the code I have for a snooker game using the matter.js engine. I spent the last couple hours trying to figure out where the error is. Image attached is the error I got attempting to simulate the game. Could someone help me attempt to figure out the error? Only other script I have is the matter.js script
Expected the code to simulate, got this error insteadenter image description here
