javascript中的许多弹跳球

我已经试着让它工作了一段时间，但我碰到了一个障碍，无法让这些球从彼此和墙壁上弹起。我试图制作一个病毒模拟器，不同的球有不同的特性，决定了它们相互接触时的感染几率。以下是我正在使用的代码：

molecular.js：

class Molecule {
    constructor(_i, _max_rad){
        this.moleculeIndex = _i;
        this.rad = random(min_rad, _max_rad);
        this.position = createVector(random(this.rad,width-this.rad),random(this.rad, height-this.rad));
        this.velocity = createVector(random(-2,5),random(-2,5));
        this.bounce = false;
    }

    render() {

        noStroke();

        if (this.bounce) {
                let dx = this.position.x - molecules[moleculeIndex].position.x;
                let dy = this.position.y - molecules[moleculeIndex].position.y;
                let dist = Math.sqrt(dx * dx + dy * dy);

                let normalX = dx / dist;
                let normalY = dy / dist;

                let midpointX = (this.position.x.x + molecules[moleculeIndexmoleculeIndex].position.x) / 2;
                let midpointY = (this.position.x.y + molecules[moleculeIndex].position.y) / 2;

                let dVector = (this.velocity.x - molecules[moleculeIndex].velocity.x) * normalX;
                dVector += (this.velocity.y - molecules[moleculeIndex].velocity.y) * normalY;

                let dvx = dVector * normalX;
                let dvy = dVector * normalY;

                this.velocity.x -= dvx;
                this.velocity.y -= dvy;

                molecules[moleculeIndex].velocity.x += dvx;
                molecules[moleculeIndex].velocity.y += dvy;
            }

        push();
        translate(this.position.x,this.position.y)
        ellipse(0,0,this.rad*2,this.rad*2);
        pop();
    }

    step() {
        this.position.add(this.velocity);
    }

    checkEdges(){

        if(this.position.x < this.rad || this.position.x > width-this.rad){
            this.velocity.x = this.velocity.x * -1;
        }

        if(this.position.y < this.rad || this.position.y > height-this.rad){
            this.velocity.y = this.velocity.y * -1;
        }
    }
}

类分子{
构造函数（_i，_max_rad）{
这个分子指数=_i；
this.rad=随机（最小rad，最大rad）；
this.position=createVector（随机（this.rad，width this.rad），随机（this.rad，height this.rad））；
this.velocity=createVector（随机（-2,5），随机（-2,5））；
this.bounce=false；
}
render（）{
仰泳（）；
如果（这个反弹）{
设dx=this.position.x-分子[moleculeIndex].position.x；
设dy=this.position.y-分子[分子指数].position.y；
设dist=Math.sqrt（dx*dx+dy*dy）；
设normalX=dx/dist；
设normalY=dy/dist；
设中点x=（this.position.x.x+moleculeindex.moleculeindex.position）/2；
设中点y=（this.position.x.y+moleculeIndex.position.y）/2；
设dVector=（this.velocity.x-分子[分子指数].velocity.x）*normalX；
dVector+=（this.velocity.y-分子[分子指数].velocity.y）*常态；
设dvx=dVector*normalX；
设dvy=dVector*normalY；
这个.velocity.x-=dvx；
这个.velocity.y-=dvy；
分子[分子指数].速度.x+=dvx；
分子[分子指数].速度.y+=dvy；
}
推（）；
平移（this.position.x，this.position.y）
椭圆（0,0，this.rad*2，this.rad*2）；
pop（）；
}
步骤（{
this.position.add（this.velocity）；
}
checkEdges（）{
if（this.position.x宽度this.rad）{
this.velocity.x=this.velocity.x*-1；
}
if（this.position.y高度this.rad）{
this.velocity.y=this.velocity.y*-1；
}
}
}

Sketch.js：

let molecules = [];
let numOfMolecules = 100;

let min_rad = 10;
let max_rad = 50;

let row = 5;
let col = 5;
let gridHeight;
let gridWidth;

let moleculeKey;
let tempArray;
let intersectCount;
let numchecks;

let displayMolecules = true;
let draw_grid = true;
let display_info = true;


function setup() {
    createCanvas(window.innerWidth, window.innerHeight); //create canvas size of screen
    background(150, 178, 164);

    createMolecules();

}

function createMolecules() {
    molecules = [];
    for (let i = 0; i < numOfMolecules; i++) {
        molecules.push(new Molecule(i, max_rad));
    }
}

function draw() {
    background(150, 178, 164);

    gridWidth = window.innerWidth / col;
    gridHeight = window.innerHeight / row;

    splitIntoGrids();
    checkIntersections();
    drawGrid();
    renderGrid();
    resetBalls();
}

function splitIntoGrids() {
    moleculeKey = [];
    for (let i = 0; i < row; i++) {
        moleculeKey.push([]);
        for (let j = 0; j < col; j++) {
            moleculeKey[i].push([]);
            molecules.forEach(molecule => {
                if ((molecule.position.x + molecule.rad > j * gridWidth) &&
                    (molecule.position.x - molecule.rad < j * gridWidth + gridWidth) &&
                    (molecule.position.y + molecule.rad > i * gridHeight) &&
                    (molecule.position.y - molecule.rad < i * gridHeight + gridHeight)) {
                    moleculeKey[i][j].push(molecule.moleculeIndex);
                }
            });
        }
    }
}

/*  Splits into grids and counts the molecules in each grid.
 *  Also checks molecules when overlapping between two cells
 *  Stores molecules in an array, to track the location of each molecule
 */
function checkIntersections() {
    intersectCount = 0;
    numchecks = 0;

    for (let i = 0; i < moleculeKey.length; i++) {
        for (let j = 0; j < moleculeKey[i].length; j++) {

            // if a cell contains more than one molecule, store the molecules into temporary array
            if (moleculeKey[i][j].length > 1) {
                tempArray = moleculeKey[i][j];

                // loops through each molecule in the temporary array
                for (let k = 0; k < tempArray.length; k++) {
                    for (let l = k + 1; l < tempArray.length; l++) {
                        // calculate distance of the molecules between each other
                        let distanceMolecules = p5.Vector.sub(molecules[tempArray[k]].position, molecules[tempArray[l]].position);

                        let vectorLength = distanceMolecules.mag();
                        numchecks++;

                        //checks if molecules are intersecting
                        if (vectorLength < molecules[tempArray[k]].rad + molecules[tempArray[l]].rad) {
                            molecules[tempArray[k]].bounce = true;
                            molecules[tempArray[l]].bounce = true;
                            intersectCount++;
                        }
                    }
                }
            }
        }
    }
}

function drawGrid() {
    if (draw_grid) {
        for (let i = 0; i < row; i++) {
            for (let j = 0; j < col; j++) {
                stroke(255);
                noFill();
                rect(j * gridWidth, i * gridHeight, gridWidth, gridHeight);

                fill(255);
                textSize(12);
                text(moleculeKey[i][j].length, j * gridWidth + 10, i * gridHeight + gridHeight - 10);
            }
        }
    }
}

function resetBalls() {
    for (let i = 0; i < moleculeKey.length; i++) {
        for (let j = 0; j < moleculeKey[i].length; j++) {
            if (moleculeKey[i][j].length > 1) {
                tempArray = moleculeKey[i][j];
                //console.log(tempArray);
                for (let k = 0; k < tempArray.length; k++) {
                    for (let l = k + 1; l < tempArray.length; l++) {
                        let distanceMolecules = p5.Vector.sub(molecules[tempArray[k]].position, molecules[tempArray[l]].position);
                        let vectorLength = distanceMolecules.mag(); //get the length of vector
                        //checks if molecules are not intersecting
                        if (!vectorLength < molecules[tempArray[k]].rad + molecules[tempArray[l]].rad) {
                            //change back color
                            molecules[tempArray[k]].bounce = false;
                            molecules[tempArray[l]].bounce = false;
                        }
                    }
                }
            }
        }
    }
}

function renderGrid() {
    molecules.forEach(molecule => {
        if (displayMolecules) {
            molecule.render();
        }
        molecule.checkEdges();
        molecule.step();
    });
}

let分子=[]；
设numf=100；
设min_rad=10；
设max_rad=50；
设row=5；
设col=5；
让网格高度；
让网格宽度；
让分子键；
让tempArray；
让我们算数；
让纽切克；
让我们假设这是真的；
让draw_grid=true；
让显示_info=true；
函数设置（）{
createCanvas（window.innerWidth，window.innerHeight）；//创建屏幕的画布大小
背景（150178164）；
创造分子（）；
}
函数createMolecules（）{
分子=[]；
for（设i=0；i{
if（（molecular.position.x+molecular.rad>j*网格宽度）&&
（molecular.position.x-molecular.radi*gridHeight）&&
（molecular.position.y-molecular.rad1）{
tempArray=moleclekey[i][j]；
//循环通过临时阵列中的每个分子
for（设k=0；k