javascript - 2d html5 canvas collision, howto

Question

As the title suggests, I am having trouble with object collision... I am currently working on a 2d Html5 canvas game using JavaScript. I know how to keep the "player" object from going outside the width/height of the game canvas, and i know how to do something when the player collides with an object (such as a power up or enemy or whatever) but i just don't know how to make a "solid" object meaning when the player hits the solid object, the player just stops, and cannot go through the solid object.

This is what I have now (not all the code just what I feel is relevant, sorry if it's too much/too little.:

  var canvasPlayer = document.getElementById('canvasPlayer');
var ctxPlayer = canvasPlayer.getContext('2d');
var canvasWalls = document.getElementById('canvasWalls');
var ctxWalls = canvasWalls.getContext('2d');

function checkKeyDown(e) {
        var keyID = (e.keyCode) || e.which;
        if (keyID === 38 || keyID === 87)   { // up arrow OR W key
        if (!player1.isDownKey && !player1.isLeftKey && !player1.isRightKey) {
        player1.isUpKey = true;
        e.preventDefault();
        } }
        if (keyID === 39 || keyID === 68)   { //right arrow OR D key
        if (!player1.isDownKey && !player1.isLeftKey && !player1.isUpKey) {
        player1.isRightKey = true;
        e.preventDefault();
        } }
        if (keyID === 40 || keyID === 83)   {//down arrow OR S key
        if (!player1.isUpKey && !player1.isLeftKey && !player1.isRightKey) {
        player1.isDownKey = true;
        e.preventDefault();
        } }
        if (keyID === 37 || keyID === 65)   {//left arrow OR A key
        if (!player1.isDownKey && !player1.isUpKey && !player1.isRightKey) {
        player1.isLeftKey = true;
        e.preventDefault();
        }
        }
    }

    Walls.prototype.draw = function (){
        ctxWalls.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        this.checkHitPlayer();
        };
    Walls.prototype.checkHitPlayer = function() {
        if (this.drawX > player1.drawX &&
        this.drawX <= player1.drawX + player1.width &&
        this.drawY >= player1.drawY &&
        this.drawY < player1.drawY + player1.height) {
        player1.isUpKey = false;
        player1.isDownKey = false;
        player1.isRightKey = false;
        player1.isLeftKey = false;
            }
    }; 

This works... except when trying to go up or left, the player only moves maybe 2-3 pixels, so it takes 3 left or up arrows to go left or up. As well the player can move straight through the wall which is not what i want. Any help is much appreciated sorry if i included too much or not enough code. Oh, i also forgot to mention the game is a puzzle game, and I have it set-up so a player can only move one direction at a time until hitting a wall.

Answer 1

If you just want your player to stop when the reach a wall, you can apply some math:

For example: assume your player is a 10px by 10px rectangle and the right wall's X position is 200.

The X position of the right side of the rectangle is calculated like this:

var playerRightSide = player.x + player.width;

You can test if the player has reached the wall like this:

if( playerRightSide >= 200 )

If the user tries to push their player beyond the wall, you would hold the player to the left of the wall using the players X position.

if( playerRightSide >= 200 ) { player.x = 190; }  

The 190 is the wall's X position (200) minus the player's width (10).

Read further if you're interested in doing more advanced collision testing.

Many basic game collisions can be classified into 3 types:

• Circle versus Circle collision
• Rectangle versus Rectangle collision
• Rectangle versus Circle collision

Here’s an illustration of how to detect each of these common collisions.

Assume you define a circle like this:

var circle1={
    x:30,
    y:30,
    r:10
};

Assume you define a rectangle like this:

var rect1={
    x:20,
    y:100,
    w:20,
    h:20
};

You can detect Circle vs Circle collisions like this...

...Using this Circle vs Circle collision-test code:

    // return true if the 2 circles are colliding
    // c1 and c2 are circles as defined above

    function CirclesColliding(c1,c2){
        var dx=c2.x-c1.x;
        var dy=c2.y-c1.y;
        var rSum=c1.r+c2.r;
        return(dx*dx+dy*dy<=rSum*rSum);
    }

You can detect Rectangle vs Rectangle collisions like this...

...Using this Rectangle vs Rectangle collision-test code:

    // return true if the 2 rectangles are colliding
    // r1 and r2 are rectangles as defined above

    function RectsColliding(r1,r2){
        return !(r1.x>r2.x+r2.w || r1.x+r1.w<r2.x || r1.y>r2.y+r2.h || r1.y+r1.h<r2.y);
    }

You can detect Rectangle vs Circle collisions like this...

...Using this Rectangle vs Circle collision-test code:

    // return true if the rectangle and circle are colliding
    // rect and circle are a rectangle and a circle as defined above

    function RectCircleColliding(rect,circle){
        var dx=Math.abs(circle.x-(rect.x+rect.w/2));
        var dy=Math.abs(circle.y-(rect.y+rect.y/2));

        if( dx > circle.r+rect.w2 ){ return(false); }
        if( dy > circle.r+rect.h2 ){ return(false); }

        if( dx <= rect.w ){ return(true); }
        if( dy <= rect.h ){ return(true); }

        var dx=dx-rect.w;
        var dy=dy-rect.h
        return(dx*dx+dy*dy<=circle.r*circle.r);
    }

For example, you can use these collision tests to respond to a player touching a power-up cube:

    // create a circular player object
    // that's located at [30,30] and has a radius of 10px

    var player={x:30,y:30,r:10};


    // create a rectangular power-up at position [200,30]

    var powerup={x:200, y:30, w:20, h:20};


    // Let's say the user keys the player to coordinate [200,35] 
    // (touching the power-up)

    player.x = 220;
    player.y = 35;


    // you can test if the circular player is touching the rectangular power-up

    if( RectCircleColliding(powerup,player)  ) {

        // the player has collided with the power-up, give bonus power!

        player.power += 100;

    }

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/u6t48/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();

        ctx.fillStyle="lightgray";
        ctx.strokeStyle="skyblue";

        // top collision circle vs circle
        var circle1={x:30,y:30,r:10};
        var circle2={x:70,y:40,r:10};
        var circle3={x:100,y:30,r:10};
        var direction1=1;

        // middle collision rect vs rect
        var rect1={x:20,y:100,w:20,h:20};
        var rect2={x:50,y:110,w:20,h:20};
        var rect3={x:90,y:100,w:20,h:20};
        var direction2=1;

        // bottom collision rect vs circle
        var circle4={x:30,y:200,r:10};
        var rect4={x:50,y:205,w:20,h:20};
        var circle5={x:100,y:200,r:10};
        var direction3=1;


        function drawAll(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            drawCircle(circle1);
            drawCircle(circle2);
            drawCircle(circle3);
            drawCircle(circle4);
            drawCircle(circle5);
            drawRect(rect1);
            drawRect(rect2);
            drawRect(rect3);
            drawRect(rect4);
        }

        function drawCircle(c){
            ctx.beginPath();
            ctx.arc(c.x,c.y,c.r,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

        function drawRect(r){
            ctx.beginPath();
            ctx.rect(r.x,r.y,r.w,r.h);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

        // return true if the 2 circles are colliding
        function CirclesColliding(c1,c2){
            var dx=c2.x-c1.x;
            var dy=c2.y-c1.y;
            var rSum=c1.r+c2.r;
            return(dx*dx+dy*dy<=rSum*rSum);
        }

        // return true if the 2 rectangles are colliding
        function RectsColliding(r1,r2){
            return !(r1.x>r2.x+r2.w || r1.x+r1.w<r2.x || r1.y>r2.y+r2.h || r1.y+r1.h<r2.y);
        }

        // return true if the rectangle and circle are colliding
        function RectCircleColliding(rect,circle){
            var dx=Math.abs(circle.x-(rect.x+rect.w/2));
            var dy=Math.abs(circle.y-(rect.y+rect.h/2));

            if( dx > circle.r+rect.w/2 ){ return(false); }
            if( dy > circle.r+rect.h/2 ){ return(false); }

            if( dx <= rect.w ){ return(true); }
            if( dy <= rect.h ){ return(true); }

            var dx=dx-rect.w;
            var dy=dy-rect.h
            return(dx*dx+dy*dy<=circle.r*circle.r);
        }

        var fps = 15;
        function animate() {
            setTimeout(function() {
                requestAnimFrame(animate);

                // circle vs circle
                circle2.x = circle2.x+direction1;
                if( CirclesColliding(circle2,circle1) || CirclesColliding(circle2,circle3)  ){ 
                    direction1=-direction1; 
                }

                // rect vs rect
                rect2.x = rect2.x+direction2;
                if( RectsColliding(rect2,rect1) || RectsColliding(rect2,rect3) ){
                    direction2=-direction2;
                }

                // rect vs circle
                rect4.x = rect4.x+direction3;
                if( RectCircleColliding(rect4,circle4) || RectCircleColliding(rect4,circle5) ){
                    direction3=-direction3;
                }

                drawAll();

            }, 1000 / fps);
        }

        animate();

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>