javascript 带有吸引力与排斥力的粒子生命游戏

实现带有吸引力和排斥力的粒子生命游戏，需要借助于物理引擎库，例如Matter.js或者Box2D等。这里我们以Matter.js为例，来实现一个简单的带有吸引力和排斥力的粒子生命游戏。

首先需要引入Matter.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>

然后创建画布并初始化Matter.js引擎：

// 创建画布
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 初始化Matter.js
const engine = Matter.Engine.create();
const render = Matter.Render.create({
  canvas: canvas,
  engine: engine,
  options: {
    width: canvas.width,
    height: canvas.height,
    wireframes: false
  }
});

// 运行引擎
Matter.Engine.run(engine);
Matter.Render.run(render);

接着创建粒子对象和吸引力/排斥力对象：

// 创建粒子对象
function Particle(x, y, r, color) {
  this.body = Matter.Bodies.circle(x, y, r, {
    restitution: 0.8,
    friction: 0.5,
    frictionAir: 0.01,
    render: {
      fillStyle: color
    }
  });
  Matter.World.add(engine.world, this.body);
}

// 创建吸引力/排斥力对象
function Force(x, y, strength, isAttract) {
  const vector = isAttract ? Matter.Vector.neg({ x, y }) : { x, y };
  Matter.Events.on(engine, 'beforeUpdate', () => {
    for (const body of engine.world.bodies) {
      if (!Matter.Body.isStatic(body)) {
        const force = Matter.Vector.sub(vector, body.position);
        const distance = Matter.Vector.magnitude(force);
        const direction = Matter.Vector.normalise(force);
        const magnitude = strength / Math.max(distance, 1) ** 2;
        const impact = Matter.Vector.mult(direction, magnitude);
        Matter.Body.applyForce(body, body.position, impact);
      }
    }
  });
}

在这里，我们使用Matter.js提供的物理引擎来创建粒子和吸引力/排斥力对象。粒子对象使用圆形刚体来表示，自定义了一些物理属性，例如弹性、摩擦力等，同时使用render属性来设置渲染效果。

吸引力/排斥力对象使用Matter.js提供的事件机制，在引擎更新之前，计算出每个粒子受到的吸引力/排斥力，并施加在粒子上。

接着在页面加载完成时，生成一些粒子和吸引力/排斥力对象：

// 创建粒子
for (let i = 0; i < 100; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const r = Math.random() * 20 + 5;
  const color = `hsl(${Math.random() * 360}, 50%, 50%)`;
  new Particle(x, y, r, color);
}

// 创建吸引力/排斥力
new Force(canvas.width / 2, canvas.height / 2, 10000, true);
new Force(canvas.width / 2, canvas.height / 2, 5000, false);

在这里我们生成了100个随机位置、大小和颜色的粒子，并创建了一个吸引力和一个排斥力对象。通过调整吸引力和排斥力的位置和强度，可以得到不同的粒子运动效果。

最后在每一帧中，更新粒子的位置：

Matter.Events.on(engine, 'afterUpdate', () => {
  for (const body of engine.world.bodies) {
    if (body.circleRadius) {
      ctx.beginPath();
      ctx.arc(body.position.x, body.position.y, body.circleRadius, 0, Math.PI * 2);
      ctx.fillStyle = body.render.fillStyle;
      ctx.fill();
    }
  }
});

在这里我们使用Matter.js提供的事件机制，在引擎更新之后，遍历所有粒子，获取粒子的位置和半径，并使用Canvas API来绘制粒子。

综上，以上是一个简单的带有吸引力和排斥力的粒子生命游戏的示例代码。你可以通过调整粒子的物理属性和吸引力/排斥力的位置和强度，来实现不同的粒子效果。