Page Title

Mouse

Wooo! 👏🎊 You've made it to part 4! Today we will talk about my least favourite subject, collision detection. I honestly cannot count the amount of Q/A posts I have posted about this troubling subject. Let's start off simple with the mouse element!

Thank you Airree for clarifying this! The mouse is an insanely useful topic and feature of computers. After all, 2000s kids would surely remember playing Cookie Clicker all day surely? That game solely focuses on mouse and mouse events! How do we do this? Our first step is to invite the mouse in. At the moment we have a static webpage. To invite our mouse all we need to do use event-listeners!

Using window.addEventListener() we can use mousemove and touchmove to gain access to the mouse. Like this



window.addEventListener("mousemove", (e)=>{
    
})

Now we have invited the mouse in our website we now need to make a mouse object to store our values in. Let's make an empty object and then add to it within our event listener. Oops! And while we are at it let's make it compatible for touchscreen users too using "touchmove".


let Mouse = {};

window.addEventListener("mousemove", (e)=>{
    
})


window.addEventListener("touchmove", (e)=>{
    
})

Using our parameter "e" we can gain access to the mouse location, all we need to do now is assign it to our object. With mousemove, the location is specified as e.clientX and e.clientY. If we assign these values to our Mouse object we have PC users sorted. Let's do that


let Mouse = {};

window.addEventListener("mousemove", (e)=>{
    Mouse.x = e.clientX;
    Mouse.y = e.clientY;
})

Touchmove is slightly different. All registered touches on a touchscreen is saved as an array in RAM. So all we need to do now is find the clientX and clientY of our first touch!


window.addEventListener("touchmove", (e)=>{
    Mouse.x = e.touches[0].clientX;
    Mouse.y = e.touches[0].clientY;
})

Combining it with mouse events such as click and pressed you can check to see if the mouse has click on a particular shape. This is very useful for clicker games.

AABB (Axis Aligned Bounding Box)

By far the most complex thing I've taught, AABB is a type of collision detection used for rectangles. It is very useful, long to execute, but extremely accurate. In later episodes I will walk you through your first game. I won't reveal it now, but yes, it will involve rectangular collisions.

I like to think of AABB as confined. If the collision goes greater than the left, less than the right, less than the bottom and greater than the top there is a collision. Of course you could use Pythagorean Theorem like last time, but this is a lot more accurate. By confined I mean that you are creating an imaginary area of which your rectangle collides with. If this side is greater than so and so etc. You are gradually making a box of which the rectangle is to touch. r1 will reference the first rectangle and r2 will reference the second rectangle.


if (r1.x + r1.w >= r2.x - r2.w){
    
}

If we add the width of r1 to r1.x we get to the Right side. If we subtract instead of add we get to the left side. So this part of the code is testing to see if the right side is greater than the left side. Now we will do the same thing as we did then except change our operators around


if (r1.x - r1.w < r2.x + r2.w){
    
}

Here is a diagram that I drew.

if the rectangle collides with any of the blue sides it returns true. Which is correct! 👍. Although if a rectangle touches the red boxes it also returns true! That's not right! To fix it we must do the same thing for the y axis.


if (r1.y + r1.w > r2.y - r1.w && r1.y - r1.w < r2.y + r2.w){
    
}

Putting it all together


if (r1.x + r1.w > r2.x - r2.w && r1.x - r1.w < r2.x + r2.w && r1.y + r1.h > r2.y - r2.w && r1.y - r1.h < r2.y + r2.h){
    //COLLISION
}

Debugging

Here is some tips to help you with debugging! One way is console logging. You can do this by making a function like print() in Python.


function print(string){
    console.log(string);
}

Try putting it in if statements


let Mouse = {};

window.addEventListener("touchmove", (e)=>{
    Mouse.x = e.touches[0].clientX;
    Mouse.y = e.touches[0].clientY;
})

let dir;

let WIDTH = cvs.width;
let HEIGHT = cvs.height;

class Square{
    constructor(x, y, w, h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.col = "black";
        
        this.show = () => {
            c.beginPath();
            c.strokeStyle = this.col;
            c.strokeRect(this.x, this.y, this.w, this.h);
            c.stroke();
        }
        
        this.mouse = () => {
            this.x = Mouse.x;
            this.y = Mouse.y;
        }
    }
}


function collisionCheck(character, platform){
               var vectorX = (character.x +(character.w/2)) - (platform.x +(platform.w/2)); 
               var vectorY = (character.y +(character.h/2)) - (platform.y +(platform.h/2));  
         var halfWidths = (character.w/2) +(platform.w/2);   
           var halfHeights = (character.h/2) +(platform.h/2);
         var collisionDirection = null;  
     if(Math.abs(vectorX) < halfWidths &&Math.abs(vectorY) < halfHeights){     
                var offsetX = halfWidths -Math.abs(vectorX); 
                    var offsetY = halfHeights - Math.abs(vectorY);     
                if(offsetX < offsetY){         
                if (vectorX > 0){                 collisionDirection = "left";     character.x += offsetX;           
                        
                        }
             else {                 collisionDirection ="right";             //    character.x -= offsetX;     
                     }     
                 } 
             else {     
                     if (vectorY > 0){
                                      collisionDirection ="top";                 character.y += offsetY;         
                                          }
              else{  
                              collisionDirection ="bottom";                        character.y -= offsetY;
                                   
                      }     
                  } 
                  }
   return collisionDirection;
               }


r1 = new Square(0, 0, 70, 70);
r2 = new Square(WIDTH/2, HEIGHT/2, 70, 70);


function draw(){
    requestAnimationFrame(draw);
    c.clearRect(0, 0, WIDTH, HEIGHT);
    
    r1.show();
    r1.mouse();
    
    r2.show();
    
    dir = collisionCheck(r1, r2);
    
    if (dir == "top"){
        print("top")/
    }
    
    else if (dir == "bottom"){
        print("bottom");
    }
    
    
    else if (dir == "left"){
        print("left");
    }
    
    else if (dir == "right"){
        print("right"):
    }
}

Can you find print? 😉

Debugger

Did you know there is a keyword in Javascript literally called debugger? Well there is and I never see it used! In most IDEs (any language) if you click on the number of the line, a stop sign appears. This halts the program. This helps because if you have 10 errors all at once. Instead of commenting and uncommenting every line. If you put debugger in, before and after a faulty if statement. You will gradually get to know why and where the error is. Try it, write debugger in the Javascript section. It is purple!


if (!hit){
    debugger
}

else {
    console.log("hit");
}

Canvas Tutorial Part 4

Mouse

AABB (Axis Aligned Bounding Box)

Debugging

Debugger

Canvas Tutorial | Part 4