current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am developing a simple game in HTML5 and javascript. the game is as simple as this:

  • the game should instruct the player to put certain objects in certain places in the canvas, e.g: put the apple inside the box or, put the apple beside the box.

  • When the player drag the object and drop it in any place in the canvas

  • the game should evaluate his action and decide whether he placed the right object in the right place or not.

    My question is: how can I test where the user placed an object according to another object? i.e: how can I know that the user put the object beside the box or below the box or even inside the box?

the only ideas that came across my mind are:

  • to draw a transparent Image() in canvas and use its boundaries as a drop area
  • or create a <div> in the places that the player should put the object in, and whenever an object collides with this area I should test the user's action. However, I can't create a <div> inside a canvas and didn't succeed in creating a transparent Image(). any ideas ?
share|improve this question
    
You would have some sort of coordinate system to place the object right? You can detect mouse positions during the drag & drop to know where the new object is dropped, compare that with the positions of your boxes and you should be able to evaluate the relative position of the apple to the boxes. –  user1600124 Aug 26 at 6:34

2 Answers 2

up vote 0 down vote

Use the x, y, width and height of each object to check whether they overlap:

function getOverlapArea(aX, aY, aW, aH, bX, bY, bW, bH) {
    var overlapX = Math.max(0, Math.min(aX + aW, bX + bW) - Math.max(aX, bX));
    var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
    return overlapX * overlapY;
}

var apple = { x: 100, y: 100, width: 100, height: 100 };
var box = { x: 200, y: 200, width: 100, height: 100 };

var overlap = getOverlapArea(apple.x, apple.y, apple.width, apple.height, box.x, box.y, box.width, box.height);

if(overlap > 0) {
    // do something
}
share|improve this answer
    
your answer works perfectly in detecting collision between two objects. but what if I want to know whether a is to the left of b for example? –  user2058563 Aug 26 at 13:01
    
Simple answer is: isToLeft = a.x < b.x –  imcg Aug 26 at 13:11
up vote 0 down vote accepted

I used imcg's answer for collision and modified it a little bit to cover the onRight and onLeft cases as following:

var overlap = getOverlapArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
    if(overlap >0)
    {
        console.log("overlapping");
    }
    else {
    var toTheLeft = getOverlapToLeftArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
        if (toTheLeft > 0) {
        console.log("to the left");
        } 
        else {
                var toTheRight = getOverlapToRightArea(shape1.x, shape1.y, shape1.w, shape1.h, shape2.x, shape2.y, shape2.w, shape2.h);
            if (toTheRight > 0) {
                console.log("to the right");
            }
            else
            {
                console.log("nothing");
            }

    }

in the first if statement above, I checked for overlapping just like imcg answered.

In the following function (getOverlapToLeftArea) I added +20 px to the x assuming that if shape1 is distant from shape2 by more than 20 px then it's considered too far, but if shape1 distant from shape2 by 20px or less then shape1 is to the left of shape2. 

function getOverlapToLeftArea(aX, aY, aW, aH, bX, bY, bW, bH) {
    var overlapX = Math.max(0, Math.min(aX + aW + 20, bX + bW) - Math.max(aX + 20 , bX));
    var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
    return overlapX * overlapY;
}

the same concept goes for getOverlapToLeftAreaexcept that I subtract -20 pxfrom x as following:

function getOverlapToRightArea(aX, aY, aW, aH, bX, bY, bW, bH) {
    var overlapX = Math.max(0, Math.min(aX + aW - 20, bX + bW) - Math.max(aX - 20 , bX));
    var overlapY = Math.max(0, Math.min(aY + aH, bY + bH) - Math.max(aY, bY));
    return overlapX * overlapY;
}

that worked like charm for me. and if I would like to check if shape1 is above/Under shape2 I would have to add/subtract 20px from y

Thank you imcg :) and I hope my answer help you all.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.