Как я могу заставить мои красные клетки отталкивать голубых клеток? ⇐ Javascript

[Anonymous]

Как я могу достичь этого, без изменения поведения в коде, а скорее массив сил. Я хочу, чтобы они двигались, а не просто сражались в 1 месте.class Sprite {

constructor(posX, posY) {
this.posX = posX;
this.posY = posY;
this.vx = 0;
this.vy = 0;
this.element = document.createElement("div");
this.element.classList.add("sprite");
document.getElementById("game-container").appendChild(this.element);
this.element.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
}
updatePosition() {
this.posX += this.vx;
this.posY += this.vy;
this.element.style.left = `${this.posX}px`;
this.element.style.top = `${this.posY}px`;
}
}

let sprites = [];
const colors = ['red', 'blue']
const forces = [
[0.1, -1],
[1.2, 0.1]
];

//console.log(forces)
const attractionStrength = 0.2
const minDist = 5;
const maxDist = 300;
const damping = 0.9;

for (let step = 0; step < 500; step++) {
sprites.push(new Sprite(Math.random() * window.innerWidth, Math.random() * window.innerHeight));
}

function updateSprites() {
for (let i = 0; i < sprites.length; i++) {
let sprite = sprites;
for (let j = i + 1; j < sprites.length; j++) {
let target = sprites[j];
let dx = target.posX - sprite.posX;
let dy = target.posY - sprite.posY;
let dist = Math.sqrt(dx * dx + dy * dy) + 1e-6;
if (dist < maxDist) {
let spriteColorIndex = colors.indexOf(sprite.element.style.backgroundColor);
let targetColorIndex = colors.indexOf(target.element.style.backgroundColor);
if (spriteColorIndex !== -1 && targetColorIndex !== -1) {
let force = forces[spriteColorIndex][targetColorIndex] / dist * attractionStrength;
let fx = (dx / dist) * force;
let fy = (dy / dist) * force;
sprite.vx += fx;
sprite.vy += fy;
target.vx -= fx;
target.vy -= fy;
}
}
if (dist < minDist) {
sprite.posX -= (dx / dist) * (minDist - dist);
sprite.posY -= (dy / dist) * (minDist - dist);
}
}
sprite.vx *= damping;
sprite.vy *= damping;
sprite.posX += sprite.vx;
sprite.posY += sprite.vy;
if (sprite.posX < 0) sprite.posX += window.innerWidth;
if (sprite.posX > window.innerWidth) sprite.posX -= window.innerWidth;
if (sprite.posY < 0) sprite.posY += window.innerHeight;
if (sprite.posY > window.innerHeight) sprite.posY -= window.innerHeight;
sprite.updatePosition();
}
requestAnimationFrame(updateSprites);
}

updateSprites();< /code>
.sprite {
width: 5px;
height: 5px;
position: absolute;
border-radius: 50%;
}< /code>





Magnet Sprites




< /code>
< /div>
< /div>
< /p>
В этом массиве: < /p>
const forces = [
[0.1, -1],
[1.0, 0.1]
];
< /code>
Я пробую это, но они просто сражаются в 1 месте, вместо того, чтобы плавно двигаться по экрану, как я хочу. Я испортил отталкивание, значения и другие функции в коде, но ничто не работает, как другие симуляции, которые я видел в Интернете.


Подробнее здесь: https://stackoverflow.com/questions/795 ... blue-cells