Question

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, income 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?

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.com/en/tutorials/dnd/basics/