如何在Matter.js中实现展示两个指定数值之间的随机数

核心随机数生成代码 #

Matter.js 未内置专门的随机数工具，直接封装原生Math方法即可实现两个数值区间的随机数生成：

// 生成[min, max)区间的浮点数随机数
function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

// 如果需要整数随机数，使用下方变体即可
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min);
}

代码放置位置说明 #

根据你的使用场景选择放置位置：

• 静态随机值场景（如初始化物体的位置、大小、初始速度等仅需生成一次的随机值）：将随机数调用逻辑直接写在Matter.Engine.create()前后的初始化代码段即可，不需要放入事件回调。
• 动态随机值场景（如碰撞后生成随机速度、定时生成随机参数的物体等运行时需要动态计算的随机值）：将逻辑放入对应的Matter.js事件回调中，常用回调如下：
  • 碰撞触发的随机计算：放入Matter.Events.on(engine, 'collisionStart', function(event) { /* 随机逻辑 */ })
  • 每帧更新时的随机计算：放入Matter.Events.on(engine, 'beforeUpdate', function(event) { /* 随机逻辑 */ })

完整使用示例 #

以下是初始化物体时随机生成X轴坐标的示例：

// 提前定义随机数工具函数
function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

// 初始化引擎和渲染器
const engine = Matter.Engine.create();
const render = Matter.Render.create({
  element: document.body,
  engine: engine
});

// 生成矩形，X轴坐标在100~600区间随机
const box = Matter.Bodies.rectangle(
  getRandom(100, 600),
  100,
  50,
  50,
  { restitution: 0.8 }
);

// 添加物体到世界
Matter.Composite.add(engine.world, [box, Matter.Bodies.rectangle(400, 610, 800, 20, { isStatic: true })]);

// 启动引擎和渲染
Matter.Engine.run(engine);
Matter.Render.run(render);

内容的提问来源于stack exchange，提问作者Akshin