Browser freezes whenever more than one object of a custom class is created-CodePudding

I've been tinkering around with JavaScript classes (In this case, I made one called dropCoin), and I am attempting to make 'coins' and have them push each other around. however, the instant a second coin is about to be created, the tab freezes. I can't find an answer for this anywhere, so I hope someone has an answer as to why setInterval is breaking like this?

Note: The problem is not directly from the large physics calculation block, I was having this problem before I added it. However, it may be causing some issues as well? Another note: it is not from the duration of the setInterval, I have set it to over 5 seconds before and the browser still hangs.

var mCoinArray = [];
var tiers = [{set:'1',val:5}]; //Unused ATM, will be important later
var dropTier = 0;
var CPMachine = $('#CPBox');
var dropTimer = 0;
var dropTime = 40; //This is in frames, game runs ~20FPS
//end variable init
class dropCoin {
    constructor(pos,x,y,tier) {
        this.pos = pos;
        this.x = x   80;
        this.y = y;
        this.physX = this.x   30;
        this.physY = this.y   30;
        this.xAccel = 0;
        this.yAccel = 0;
        this.tier = tier;
        this.visual = $("<div class='coin'></div>");
        this.visual.appendTo(CPMachine);
        this.visual.css('top',this.y);
        this.visual.css('left',this.x);
        setTier(this.pos,dropTier);
    }
    recalc(x,y,ax,ay) {
        this.x = x - 30;
        this.y = x - 30;
        this.physX = x;
        this.physY = y;
        this.xAccel = ax;
        this.yAccel = ay;
        this.visual.css('top',this.y);
        this.visual.css('left',this.x);
    }
    deleteMe() {
        mCoinArray[this.pos] = undefined;
    }
}
function generateCoin(x,y) {//430x, 240y maximum values
    let MApos = 0;
    let whiler = true;
    while(whiler) {
        let i = 0;
        if (mCoinArray[i] == undefined) {
            whiler = false;
            MApos = i;
        } else { i  ; }
    }
    mCoinArray[MApos] = new dropCoin(MApos,x,y,dropTier);
}
function setTier(mIndex, tier) { //{background: "url(CoinSheetT[#]L.png) n60 n60"} n = 0, 1, or 2
    let set = (Math.floor(tier / 9)).toString();
    tier = tier % 9;
    switch(tier) {
        case 0:
            $(mCoinArray[mIndex]).css({background: "url(CoinSheetT"   set   "L.png) 0 0"})
            break;
        case 1:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 60 0"})
            break;
        case 2:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 120 0"})
            break;
        case 3:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 0 60"})
            break;
        case 4:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 60 60"})
            break;
        case 5:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 120 60"})
            break;
        case 6:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 0 120"})
            break;
        case 7:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 60 120"})
            break;
        case 8:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 120 120"})
            break;
    }
}
var gameLoop = setInterval(function(){
    dropTimer  ;
    if (dropTimer >= dropTime) {
        dropTimer = 0;
        generateCoin(Math.floor(Math.random() * 431),Math.floor(Math.random() * 241));
    }
    for (i=0;i<mCoinArray.length;i  ) { // PHYSICS
        let targX = mCoinArray[i].physX;
        let targY = mCoinArray[i].physY;
        let targAcX = mCoinArray[i].xAccel;
        let targAcY = mCoinArray[i].yAccel;
        let checkX = [];
        let checkY = [];
        let dist;
        for (j=0;j<mCoinArray.length;j  ) {
            if (j != i) {
                if (j < i) {
                    checkX[j] = mCoinArray[j].physX;
                    checkY[j] = mCoinArray[j].physY;
                } else {
                    checkX[j-1] = mCoinArray[j].physX;
                    checkY[j-1] = mCoinArray[j].physY;
                }
            }
        }//physics equation; y = -4.27494(x)^0.36907   15
        let resAcX = (targAcX * 1)/5;
        let resAcY = ((targAcY * 1)/5) - 5;
        for (j=0;j<checkX.length;j  ) {
            let distance = Math.sqrt(Math.pow(checkX[j] - targX,2)   Math.pow(checkY[j] - targY,2));
            let angle = Math.atan2(checkY[j] - targY, checkX[j] - targX);
            let power = Math.pow(-4.27494 * distance, 0.36907)   15;
            if (power < 0) {
                power = 0;
            }
            resAcX  = Math.cos(angle) * power;
            resAcY  = Math.sin(angle) * power;
        }
        let resX = targX   resAcX;
        let resY = targY   resAcY;
        mCoinArray[i].recalc(resX, resY, resAcX, resAcY);
    } // End Physics
}, 50);

CodePudding user response：

You are reinitializing i to zero within your while loop, so it will not increment as you are expecting it to, and you get caught in an infinite loop.

Make sure that the initialization happens outside your loop, so that you do not constantly reset it.

// i should be initialized here so the incrementing works
// let i = 0;
while(whiler) {
    let i = 0; // infitie loop caused by reinitializing i to zero every iteration
    if (mCoinArray[i] == undefined) {
        whiler = false;
        MApos = i;
    } else { i  ; }
}