完整代码
index.ts
import * as Matter from “matter-js”;
import { createBall, createMainBall, createWall } from “./tool”;
// 创建引擎和渲染器
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
var engine = Engine.create({
gravity: { x: 0, y: 0 }, // 关闭重力效果
});
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 400,
wireframes: false,
},
});
var mainball = createMainBall(engine);
createBall(engine);
createWall(engine);
// createWall(engine);
// createWall(engine);
export function hitBall() {
let ball = mainball;
// 施加一个向右的力
var forceMagnitude = 0.1;
var force = { x: forceMagnitude, y: 0 };
Matter.Body.applyForce(ball, ball.position, force);
}
//@ts-ignore
window[“hitBall”] = hitBall;
// 启动引擎
Engine.run(engine);
// 启动渲染器
Render.run(render);
tools.ts
import * as Matter from “matter-js”;
// 创建引擎和渲染器
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
export function createMainBall(engine: Matter.Engine) {
// 创建母球
var cueBall = Bodies.circle(100, 200, 20, {
restitution: 0.8, // 调整回弹系数以控制球的弹跳
});
World.add(engine.world, cueBall);
return cueBall;
}
export function createBall(engine: Matter.Engine) {
// 创建被打击的球
var ballRadius = 15;
var objectBalls: Matter.Body[] = [];
var numRows = 6;
var startX = 500;
var startY = 200;
for (var row = 0; row < numRows; row++) {
var ballsInRow = row + 1;
var rowStartX = startX;
var rowStartY = startY - row * ballRadius;
for (var i = 0; i < ballsInRow; i++) {
var x = rowStartX + (row - numRows / 2) * ballRadius * 2;
var y = rowStartY + i * ballRadius * 2;
var ball = Bodies.circle(x, y, ballRadius, {
restitution: 0.8, // 调整回弹系数以控制球的弹跳
});
objectBalls.push(ball);
}
}
// 将所有物体添加到世界中
World.add(engine.world, [...objectBalls]);
}
/**
*
-
@param engine
*/
export function createWall(engine: Matter.Engine) {
// 创建一个静态矩形刚体
var staticRect = Bodies.rectangle(-10000, -450, 30000, 1000, {
isStatic: true,
restitution: 1, // 调整回弹系数以控制球的弹跳
});var staticRectBanner = Bodies.rectangle(0, 850, 30000, 1000, {
isStatic: true,
restitution: 1, // 调整回弹系数以控制球的弹跳
});var leftWall = Bodies.rectangle(-4950, 0, 10000, 1000000, {
isStatic: true,
restitution: 1, // 调整回弹系数以控制球的弹跳
});
var rightWall = Bodies.rectangle(800, 0, 100, 1000000, {
isStatic: true,
restitution: 1, // 调整回弹系数以控制球的弹跳
});
World.add(engine.world, staticRect);
World.add(engine.world, staticRectBanner);
World.add(engine.world, leftWall);
World.add(engine.world, rightWall);
}