Overlap/collision code explanation (Zafeer Documentation) • 8 min read

%%raw

Home

Struggles

Progress

Trystan

Zafeer

Sean

Spencer

function checkForOverlap(object1,object2){
    var pos1 = object1.ReturnPosition().slice();
    var scale1 = object1.ReturnScale().slice();   
    var xRange1 = [pos1[0],pos1[0]+scale1[0]];
    var yRange1 = [pos1[1],pos1[1]+scale1[1]];
​
    var pos2 = object2.ReturnPosition().slice();
    var scale2 = object2.ReturnScale().slice();   
    var xRange2 = [pos2[0],pos2[0]+scale2[0]];
    var yRange2 = [pos2[1],pos2[1]+scale2[1]];
    
    if (xRange1[0]>=xRange2[0]){
        if (xRange1[0]<=xRange2[1]){
            if (yRange1[0]>=yRange2[0]){
                if (yRange1[0]<=yRange2[1]){
                    return true;
                }
            }
            if (yRange1[1]>=yRange2[0]){
                if (yRange1[1]<=yRange2[1]){
                    return true;
                }
            }
        }
    }
    if (xRange1[1]>=xRange2[0]){
        if (xRange1[1]<=xRange2[1]){
            if (yRange1[0]>=yRange2[0]){
                if (yRange1[0]<=yRange2[1]){
                    return true;
                }
            }
            if (yRange1[1]>=yRange2[0]){
                if (yRange1[1]<=yRange2[1]){
                    return true;
                }
            }
        }
    }
    return false;
}

Code Explanation

1. The checkForOverlap function takes two objects as input, object1 and object2.
2. For each object, it gets the position using the functions ReturnPosition and ReturnScale and keeps them in variables pos1, scale1, pos2, and scale2;
   • pos1 and pos 2 are the (x,y) of the top left of each object
   • scale1 and scale 2 are the length and width of each object
3. xRange is the range of coordinates the objects cover on the canvas (same with Yrange)
4. Xrange = [Pos1, scale1 + Pos1] or [ (x,y) of top left of object, top left of object + length and width of object ( length added to x, width added to y) ]
5. The function then checks if the x-coordinate ranges and y-coordinate ranges of the two objects overlap using if statements. If any of the conditions are met, it shows true, which means that there is a collision between the objects.
6. If there is no overlap between two objects, the function shows as false.

Overlap code implementation

   if (checkForOverlap(myCharacterObject, doorObject)) {
        console.log("Now press the P key");
    }

Code Explanation

This code takes the two objects (character and box) from The original code (Ctrl+Shift+I -> console), that were defined earlier.

1. Takes the collision code, and if presents as True, message is played
2. Now when the checkForOverlap sees the two objects of the Character and Object collide, (Using the Collision Code) it pastes the message “Now Press the P key” in the console. as seen in the following:
3. Now that I know the collision code works, I went on to add the sprite and interaction with the boxes.

Ekey

First it creates an object called ekey Interaction with Ekey: There is an event listener added to the window for the ‘keydown’ event. When the ‘E’ key is pressed (key code 69), it checks for the overlap between the main character and a BoxObject1 (Using Collision Code). If an overlap is detected, it alters the scale of the boxes, making it disappear.

Condition for Displaying the Ekey Sprite:

When the main character overlaps with the boxes, a variable named showEKeySprite is set to true. Frame Update Function:

• If this is true, Ekey sprite animation is updated.
• The Ekey sprite is drawn on the canvas using Ekey.draw()
• Within the frame() function, the code updates the Ekey sprite animation at a set frame rate using the condition currentFrame % Math.round(fps/2)==0.
• This calculation is used to control the frequency of sprite updates, giving the appearance of animation.

## Drawings I made used in game

Drawings I made not used in game

Resourcse I used:

• Youtube_Tutorial of Javscript
• Object_Oriented_Programming
• Chatgpt for explanations