CODEWITHSUNDEEP
javascripthtmlcanvascollision-detection
Barrie Reader
Barrie Reader

Reputation: 10713

A Javascript and Canvas "engine", that is in need of collision detection

So, I have a little "move around and stuff" engine, which is very primative at the moment.

Every so often (timer based) another pixel (5x5) will appear on the screen - if you intersect with that pixel, I would like to fire an event. (To be fair, that pixel (5x5) needs to be a hella-lot bigger :/ ).

So, here is my JSFiddle (for you fiddlers): http://jsfiddle.net/neuroflux/q9APG/

And here is my javascript for the canvas:

var canvas, ctx;
var pixX = 0; //positions
var pixY = 0;
var endX = 0;
var endY = 0;
var youX = 5; //sizes
var youY = 5;
var dis = 1; //timings
var p = 0;

window.onload = function() {
    init();
}

function init() {
    canvas = document.getElementById('main');
    ctx = canvas.getContext('2d');
    setInterval(loop,40);
    var pixTimer = Math.floor((Math.random() * 1000) * 10) + 1;
    setInterval(addPixel, pixTimer);
    document.addEventListener('keydown',function(e) {
        runMove(e);
    });
}

function addPixel() {
    pX = Math.floor(Math.random() * 800) + 1;
    pY = Math.floor(Math.random() * 600) + 1;
    p++;
}

function loop() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillRect(pixX,pixY,youX,youY);
    ctx.fillText(pixX + ':' + pixY, 5, 500);
    if (p > 0) {
        for (var a = 0; a <= p; a++) {
            ctx.fillRect(pX,pY,5,5);
        }
    }
}

function runMove(e) {
    var canvas = document.getElementById('main');
    ky = e.keyCode;
    switch(ky) {
        case 37:
            endX = endX - dis;
            if (pixX == endX) {

            } else {
                if (pixX >= 0 && pixX < canvas.width) {
                    moveleft = setInterval(ml,10);
                    function ml() { pixX--; }
                } else {
                    pixX = 0;
                }
            }
            return false;
        case 38:
            endY = endY - dis;
            if (pixY == endY) {

            } else {
                if (pixY >= 0 && pixY < canvas.height) {
                    moveup = setInterval(mu,10);
                    function mu() { pixY--; }
                }
            }
            return false;
        case 39:
            endX = endX + dis;
            if (pixX == endX) {

            } else {
                if (pixX >= 0 && pixX < canvas.width) {
                    moveright = setInterval(mr,10);
                    function mr() { pixX++; }
                }
            }
            return false;
        case 40:
            endY = endY + dis;
            if (pixY == endY) {

            } else {
                if (pixY >= 0 && pixY < canvas.height) {
                    movedown = setInterval(md,10);
                    function md() { pixY++; }
                }
            }
            return false;
        case 80:
            growing = setInterval(grow,100);
            clearInterval(shrinking);
            function grow() {
                youX = youX + dis;
                youY = youY + dis;
            }
            return false;
        case 73:
            clearInterval(shrinking);
            clearInterval(growing);
            return false;
        case 79:
            shrinking = setInterval(shrink,100);
            clearInterval(growing);
            function shrink() {
                youX = youX - dis;
                youY = youY - dis;
            }
            return false;
        default:
            return false;
    }
}

I have already tried this, but got issues :( (nothing would fire): JSFiddle: http://jsfiddle.net/neuroflux/uF5kj/

Canvas Code: 

    var canvas, ctx;
        var pixX = 0; //positions
        var pixY = 0;
        var endX = 0;
        var endY = 0;
        var youX = 5; //sizes
        var youY = 5;
        var dis = 1; //timings
        var p = 0;
        var pixel = new Array();

        window.onload = function() {
            init();
        }

        function init() {
            canvas = document.getElementById('main');
            ctx = canvas.getContext('2d');
            setInterval(loop,40);
            var pixTimer = Math.floor((Math.random() * 1000) * 10) + 1;
            setInterval(addPixel, pixTimer);
            document.addEventListener('keydown',function(e) {
                runMove(e);
            });
        }

        function addPixel() {
            pX = Math.floor(Math.random() * 800) + 1;
            pY = Math.floor(Math.random() * 600) + 1;
            p++;
        }

        function loop() {
            ctx.clearRect(0,0,canvas.width,canvas.height);
            var bgImg = new Image();
            bgImg.src = 'bg.png';
                ctx.drawImage(bgImg,0,0,800,600);
            ctx.fillRect(pixX,pixY,youX,youY);
            ctx.fillText(pixX + ':' + pixY, 5, 500);
            if (p > 0) {
                for (var a = 0; a <= p; a++) {
                    pixel[a] = ctx.fillRect(pX,pY,5,5);
                }
            }
        }

        function checkIntersections() {
            for (var x = 0; x < pixel.length; x++) {
                    if (pixX == pixel[x].x) { alert(0) }
            }
        }

        function runMove(e) {
            var canvas = document.getElementById('main');
            ky = e.keyCode;
            switch(ky) {
                case 37:
                    endX = endX - dis;
                    if (pixX == endX) {

                    } else {
                        if (pixX >= 0 && pixX < canvas.width) {
                            moveleft = setInterval(ml,10);
                            function ml() { pixX--; }
                        } else {
                            pixX = 0;
                        }
                    }
                    return false;
                case 38:
                    endY = endY - dis;
                    if (pixY == endY) {

                    } else {
                        if (pixY >= 0 && pixY < canvas.height) {
                            moveup = setInterval(mu,10);
                            function mu() { pixY--; }
                        }
                    }
                    checkIntersections();
                    return false;
                case 39:
                    endX = endX + dis;
                    if (pixX == endX) {

                    } else {
                        if (pixX >= 0 && pixX < canvas.width) {
                            moveright = setInterval(mr,10);
                            function mr() { pixX++; }
                        }
                    }
                    checkIntersections();
                    return false;
                case 40:
                    endY = endY + dis;
                    if (pixY == endY) {

                    } else {
                        if (pixY >= 0 && pixY < canvas.height) {
                            movedown = setInterval(md,10);
                            function md() { pixY++; }
                        }
                    }
                    checkIntersections();
                    return false;
                case 80:
                    growing = setInterval(grow,100);
                    clearInterval(shrinking);
                    function grow() {
                        youX = youX + dis;
                        youY = youY + dis;
                    }
                    checkIntersections();
                    return false;
                case 73:
                    clearInterval(shrinking);
                    clearInterval(growing);
                    return false;
                case 79:
                    shrinking = setInterval(shrink,100);
                    clearInterval(growing);
                    function shrink() {
                        youX = youX - dis;
                        youY = youY - dis;
                    }
                    return false;
                default:
                    return false;
            }
        }

Upvotes: 1

Views: 757

Answers (2)

Simon Sarris
Simon Sarris

Reputation: 63812

Wait, so all you want is a function to see if two rectangles intersect?

Here's a bulletproof function for you:

// returns true if there is any overlap
// params: x,y,w,h of two rectangles
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
  if (w2 !== Infinity && w1 !== Infinity) {
    w2 += x2;
    w1 += x1;
    if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2) return false;
  }
  if (y2 !== Infinity && h1 !== Infinity) {
    h2 += y2;
    h1 += y1;
    if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2) return false;
  }
  return true;
}

Upvotes: 5

pimvdb
pimvdb

Reputation: 154818

You'd be better off with circles, since the distance can more easily be calculated (fixed radius). Say you set radius to 10, then if distance < 20 they are inside each other, i.e. there is collison.

// Pythagoras theorem to calculate distance between 2 points
function does_collide(x1, y1, x2, y2) {
    return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)) < 20;
}

Each time, calculate distance between user / object:

if(does_collide(pixX, pixY, pX, pY)) {
    ctx.fillText('collison!@', 0, 10);
    collison = true;
} else {
    collison = false;
}

At any time, the collison variable can be used for checking whether there is collison.

You can draw a circle using:

ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();

http://jsfiddle.net/q9APG/4/

Upvotes: 2

Related Questions