I'm creating a simple web based game using the HTML5 canvas and JavaScript. I currently have some images displayed on the canvas, each representing items found in a fast food restaurant. I also have four 'description boxes', each labelled either asset, liability, ine or expenditure.

Each of the images belong to one of these description boxes, and the user is required to drag and drop each image to the correct description box.

I plan on checking if the user has dragged an image to the correct box by using the name of the JS variable holding the box image, and the HTML alt tag of each of the item images, i.e. img "chair" has alt tag "asset", and the description box for assets has the variable name "assetsDescriptionBox", so I would use an 'if' statement to detect if the image the user is dragging was dragged to the same area of the canvas as where the assets description box is being displayed, and if that image has the alt tag "asset", it would then disappear from the canvas (and be added to an array for use later in the game).

However, if the image the user was dragging didn't have the alt tag "asset", but had some other tag, i.e. "liability", then it would be redrawn on the canvas, back where it was originally drawn.

What I'm not sure about is how to implement this. I've had a look at collision detection, and it seems one way of doing it is to use the JS method getBoundingClientRect to get the 'outer limits' of an image, and then check if the outer limits of the two images overlap at all, and if they do, then do something. But, I'm not sure about how to use this method, and couldn't find anything particularly helpful when doing a quick Google search.

Does anyone know if this would be the best way to do this? If so, could you post an example of how to use the getBoundingClientRect method? Or if not, how else would you do it?

Edit 17/12/2012 @ 16:45

By the way, I'm using the KineticJS library (a copy I have saved locally to make one or two changes to) to add the drag and drop functionality, so I assume there would be something in the library that I need to alter/ add to in order to add the collision detection.

Anyone have any ideas?

Edit 01/01/2013 @ 12:35

Hi there, thanks for your answer- it certainly seems like that's what I want to do. I already have the images all displayed on the canvas, with four 'static' ones, that can't be dragged around the canvas- these are the ones I want to use as my 'drop zones', and it is possible to drag and drop the rest. I'm not quite sure how I would add the functionality your code provides to what I already have? If you go to the URL: users.aber.ac.uk/eef8/project/development/featureset2dev you will be able to see what I have already working.

To add the 'dropzone' feature to my description boxes, should I add them to the canvas with the line

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60); 

as you have done in your example?

I'm creating a simple web based game using the HTML5 canvas and JavaScript. I currently have some images displayed on the canvas, each representing items found in a fast food restaurant. I also have four 'description boxes', each labelled either asset, liability, ine or expenditure.

Each of the images belong to one of these description boxes, and the user is required to drag and drop each image to the correct description box.

I plan on checking if the user has dragged an image to the correct box by using the name of the JS variable holding the box image, and the HTML alt tag of each of the item images, i.e. img "chair" has alt tag "asset", and the description box for assets has the variable name "assetsDescriptionBox", so I would use an 'if' statement to detect if the image the user is dragging was dragged to the same area of the canvas as where the assets description box is being displayed, and if that image has the alt tag "asset", it would then disappear from the canvas (and be added to an array for use later in the game).

However, if the image the user was dragging didn't have the alt tag "asset", but had some other tag, i.e. "liability", then it would be redrawn on the canvas, back where it was originally drawn.

What I'm not sure about is how to implement this. I've had a look at collision detection, and it seems one way of doing it is to use the JS method getBoundingClientRect to get the 'outer limits' of an image, and then check if the outer limits of the two images overlap at all, and if they do, then do something. But, I'm not sure about how to use this method, and couldn't find anything particularly helpful when doing a quick Google search.

Does anyone know if this would be the best way to do this? If so, could you post an example of how to use the getBoundingClientRect method? Or if not, how else would you do it?

Edit 17/12/2012 @ 16:45

By the way, I'm using the KineticJS library (a copy I have saved locally to make one or two changes to) to add the drag and drop functionality, so I assume there would be something in the library that I need to alter/ add to in order to add the collision detection.

Anyone have any ideas?

Edit 01/01/2013 @ 12:35

Hi there, thanks for your answer- it certainly seems like that's what I want to do. I already have the images all displayed on the canvas, with four 'static' ones, that can't be dragged around the canvas- these are the ones I want to use as my 'drop zones', and it is possible to drag and drop the rest. I'm not quite sure how I would add the functionality your code provides to what I already have? If you go to the URL: users.aber.ac.uk/eef8/project/development/featureset2dev you will be able to see what I have already working.

To add the 'dropzone' feature to my description boxes, should I add them to the canvas with the line

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60); 

as you have done in your example?

• javascript
• html5-canvas
• collision-detection
• kineticjs

• 1 getBoundingClientRect works on a dom element. On your canvas, your image is just pixels and does not have a DOM element associated to it, so this function wouldn't work. You need to keep track of the bounding box of the image so that you can detect which image was clicked on and by keeping track of bounding boxes of the target you can also figure out which place it was dropped on (doesn't the kineticjs lib have something for that?). Basically, keep track of all bounding boxes for interactive objects and collision detection is just figuring out which bounding boxes overlap – Damp Commented Dec 17, 2012 at 17:21

1 Answer 1

I'd say the best way to go about doing this is keeping track of each object's X/Y position along with width and height; using a simple rectangular collision function like this one takes two objects and checks if their bounding boxes overlap.

function collides(a, b)
{
    if (a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y) return true;
}

If I was going about this, I might set it up with an object that has a drop zone object attached to it, so that image could only trigger one drop zone, instead of checking the alt tag, using pure JS.

function Image(x, y, w, h, i, dx, dy, dw, dh)
{
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
    this.image = i;
    this.dropzone = new DropZone(dx, dy, dw, dh);
}

function DropZone(x, y, w, h)
{
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
}

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60);

Then you'd have a loop that updated the co-ordinates of the dragged image when you moved it. Note that you can't have click handlers on drawn sprites inside the canvas, only on the canvas itself; you check whether the mouse co-ordinates are inside the drawn sprites.

The other way of going about this, of course, is using the HTML5 drag and drop API, although I have no experience on how to use that it may be more suitable for your needs.

http://www.html5rocks./en/tutorials/dnd/basics/