1
\$\begingroup\$

I have a code snippet which I wish to improve to increase my program's FPS, but as a beginner in JavaScript, I do not know how. I know the problem, which is the fact my counter mechanism used to delay attacks is causing lag. I just don't know how to change my code to minimize this lag. I am looking for helpful criticism and code examples to improve my code.

I am going to provide the entire function my code snippet is in so you can relate to it. (I have been told this will help debuggers elsewhere.)

The function to optimize:

var updateMobs = function() { // Called in a loop at 30 FPS

    for (var b = 0; b < mobsBlue.length; b++) { // The length of both lists is at max 60
        BM = mobsBlue[b]
        BM.x = BM.x - BM.object.speed

        doCollision(BM, redBase, BM)
        doCollision(BM, debugPlayer, BM)
        if (BM.x < 0){
            mobsBlue.splice(br, 1)
        }
        BM.Draw(ctx, false)

    }
    for (var r = 0; r < mobsRed.length; r++) {
        RM = mobsRed[r]
        RM.x = RM.x + RM.object.speed

        doCollision(RM, blueBase, RM)
        doCollision(RM, debugPlayer, RM)
        if (RM.x > 1350){
            mobsRed.splice(r, 1)
        }
        RM.Draw(ctx, false)


        for (var br = 0; br < mobsBlue.length; br++) {
            BM = mobsBlue[br]

            if (doCollision(RM, BM, collisionNull) == true) { // ATTACKING
                BM.x = BM.x + BM.object.speed
                RM.x = RM.x - RM.object.speed

                if (BM.object.attackTime == 500 || RM.object.attackTime == 500) {
                    if (BM.object.armourType == 'light') {
                        BM.object.health = BM.object.health - RM.object.lightDamage
                    } 
                    if (BM.object.armourType == 'heavy') {
                        BM.object.health = BM.object.health - RM.object.heavyDamage
                    }
                    if (RM.object.armourType == 'light') {
                        RM.object.health = RM.object.health - BM.object.lightDamage
                    }
                    if (RM.object.armourType == 'heavy') {
                        RM.object.health = RM.object.health - BM.object.heavyDamage

                    }
                    if (BM.object.health <= 0) {
                        mobsBlue.splice(br, 1)
                    }
                    if (RM.object.health <= 0) {
                        mobsRed.splice(r, 1)

                    }
                    BM.object.attackTime = 0
                    RM.object.attackTime = 0

                }
                BM.object.attackTime = BM.object.attackTime + 1
                RM.object.attackTime = RM.object.attackTime + 1

            }



            BM.Draw(ctx, false)
            RM.Draw(ctx, false)
        }


    }
}

The doCollision and moveOutside functions:

var doCollision = function(rect1, rect2, objectToMove) {
    if (rect1.x + rect1.w > rect2.x &&
        rect1.x < rect2.x + rect2.w &&
        rect1.y + rect1.h > rect2.y &&
        rect1.y < rect2.y + rect2.h) {
        if (objectToMove === rect1) {
            moveOutside(objectToMove, rect2);
            return true
        } else if (objectToMove === rect2) {
            moveOutside(objectToMove, rect1);
            return true
        }
        return true
    };
};

var moveOutside = function(rectToMove, otherRect) {
    // Determine if the overlap is due more to x or to y,
    // then perform the appropriate move

    var moveOverOtherX = rectToMove.x + rectToMove.w - otherRect.x;
    var otherOverMoveX = otherRect.x + otherRect.w - rectToMove.x;

    var moveOverOtherY = rectToMove.y + rectToMove.h - otherRect.y;
    var otherOverMoveY = otherRect.y + otherRect.h - rectToMove.y;

    var minOver = Math.min(moveOverOtherX, otherOverMoveX, moveOverOtherY, otherOverMoveY);

    if (minOver == moveOverOtherX) {
        rectToMove.x = otherRect.x - rectToMove.w;
    } else if (minOver == otherOverMoveX) {
        rectToMove.x = otherRect.x + otherRect.w;
    } else if (minOver == moveOverOtherY) {
        rectToMove.y = otherRect.y - rectToMove.h;
    } else {
        rectToMove.y = otherRect.y + otherRect.h;
    };
};

I am looking for more answers.

\$\endgroup\$
  • \$\begingroup\$ Could you show us doCollision() as well? \$\endgroup\$ – 200_success Apr 7 '15 at 17:36
  • \$\begingroup\$ added doCollision and the related moveOutside \$\endgroup\$ – Colourfit Apr 7 '15 at 17:59
1
\$\begingroup\$

It is not a good way, but I think object comparison is very heavy. I suggest that you change the type of parameter, i.e. objectToMove (true means rect1, and false means rect2). Logical operations are light.

I also suggest that you change the if with minOver and others to switch-case (some other where comparing the same subject too).

\$\endgroup\$
  • \$\begingroup\$ The first idea i cannot do, and the second idea dosent make sense to me... I am looking for more awnsers \$\endgroup\$ – Colourfit Apr 8 '15 at 18:41
  • \$\begingroup\$ I suggest you the second because Switch-Case is comparing value (i.e. minOver) at only once, but If is comparing at the number of If were written. \$\endgroup\$ – Lein Matsumaru Apr 9 '15 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.