CODEWITHSUNDEEP
javascriptcanvascollision
František Štrba
František Štrba

Reputation: 1

Multiple collision in canvas

I am trying to make unblock me game. I have array of objects and I made boundaries collision. But now I am stuck with collision between objects. I made cycle over objects in array but it stops on the last one. How can I make collision check on each object everytime I move with my selected object? Full code here: http://foxfcb.sweb.cz/ I am newbie in programming so please be patient.

canvas.addEventListener('mousemove', function (e) {

    ...

        var shapes = myState.shapes;
        var l = shapes.length;

        for (var i = 0; i < l; i++) {

            var shape = myState.shapes[i];
            var selection = myState.selection;

            // collision between objects
            if (selection.x < (shape.x + shape.w) && (selection.x + selection.w) > shape.x &&
                selection.y < (shape.y + shape.h) && (selection.y + selection.h) > shape.y) {
                myState.valid = true; //stop
            }
            // boundaries collision
            else if (myState.selection.x < 0 || myState.selection.y < 0 || myState.selection.x + myState.selection.w > 600 || myState.selection.y + myState.selection.h > 600) {
                myState.valid = true; //stop
            }

            else {
                myState.valid = false;  //moving

            }
        }

    }

Upvotes: 0

Views: 1158

Answers (1)

Blindman67
Blindman67

Reputation: 54039

You are resetting the valid flag when you check other objects.

So here is your collision detection as a function. Notice I set state = false once before the loop and if there is a collision I break out of the loop as there is no point detecting other collisions as the flag is either true or false. You were setting the flag back to false on all but the last object if you detected a collision.

var textCollision = function(){
    var shapes, l, shape, selection, i;
    shapes = myState.shapes;
    l = shapes.length;
    myState.valid = false; // assume no collision 
    for (i = 0; i < l; i++) {
        shape = myState.shapes[i];
        selection = myState.selection;
        if (selection.x < (shape.x + shape.w) && (selection.x + selection.w) > shape.x &&
            selection.y < (shape.y + shape.h) && (selection.y + selection.h) > shape.y) {
            myState.valid = true; //stop
            // there is no point testing any others as it will make no dif
            break; // step out of the for loop.
        }
        // boundaries collision
        else if (myState.selection.x < 0 || myState.selection.y < 0 || myState.selection.x + myState.selection.w > 600 || myState.selection.y + myState.selection.h > 600) {
            myState.valid = true; //stop
            // there is no point testing any others as it will make no dif
            break; // step out of the for loop.
        }
    }

}

Break.

Break is a javascript reserved token and is used to break out of loops and switches.

For loop

for(i = 0; i < 10; i++){
    if(i === 2){
        break;  // exit the loop at 2
    }
}

While loop

while(i < 10){
    if(i === 2){
        break; // exit out of the while loop
    }
}

Also does the same on do{ }While() loops.

Break only exits the current loop;

for(j = 0; j < 10; j++){  // j loop
    for(i = 0; i < 10; i++){ // i loop
        if(i === 2){
            break;  // exit the i loop at 2
        }
    }
    // the break moves execution to the first line after the loop it is in 
    // the j loop continues as normal
}

Break is also used in switch statements 

function num(i){
    switch(i){
    case 1:
       console.log("one");
       // no break token so execution continues inside the switch
    case 2:
       console.log("two");
    }
}
num(1); // outputs "one" "two"

To prevent this use break

function num(i){
    switch(i){
    case 1:
       console.log("one");
       break;  // break out of the switch

    case 2:
       console.log("two");
       // no point having a break here as it is at the end anyways
    }
    // break moves execution to here
}
num(1); // outputs "one"

Upvotes: 1

Related Questions