Dragging Image to Target Area

Getting Started Newbie Questions
#1

Hi all,

Like most here I’m new, excited and going into a whole new world with a very little knowledge and hope that you pro’s out there can throw me a little wisdom to help me past my first stumbling block.

My Goal:

To create a very simple quiz for kids.

Currently I have 4 questions i.e. How many apples? How many oranges?

I have 9 numbers they can drag each number around the screen

I’m trying to make it so when they drag the correct answer to the correct question it triggers an image to show the kids they have got it right.

I’m not sure if on-collision is the right way to go and I’ve not had any luck getting that working yet! I don’t need physics physics on the game just touch & drag into the right spot on the screen.

Later i’ll try to make this add to a score and when all questions are correct move to the next set of questions BUT one baby step at a time for now :slight_smile:
Thanks guys, hope you can help :slight_smile:
[import]uid: 13654 topic_id: 5230 reply_id: 305230[/import]

#2

Well I am about to write a simple hitTest function for detecting when images are overlapping; I need it for my game and I’ll post that function on the forum.

That said, this can be done by simply checking the distance between images:
http://developer.anscamobile.com/forum/2010/11/17/math-helper-functions-distancebetween-and-anglebetween

Although I need to be checking the actual boundaries of the images, for the situation you described it should be fine to simply detect in a circle around each spot. [import]uid: 12108 topic_id: 5230 reply_id: 17417[/import]

#3

Thanks for your replay jhocking,

I’ve taken a look at the link, had a quick play but not having much luck at the moment, to be honest i’m not 100% sure how to get that working?

Seeing a working sample of something would help me understand better, if anyone knows of anything on code exchange or in one of the sample files can you let me know please.

Thanks again jhocking! [import]uid: 13654 topic_id: 5230 reply_id: 17461[/import]

#4

Anyone got anything they can show to help me with the please…

Fast example:

Number1.png uses touch and can be dragged around the screen, when released over Answer1.png (or over a x & y position) it shows star.png…?

I’ve got all the touch, graphics etc… in place just cant figure out how to create and run a function to make the magic happen.

Thanks Guys! [import]uid: 13654 topic_id: 5230 reply_id: 17574[/import]

#5

Well here’s some code off the top of my head:

local number = display.newImage("number.png")  
local answer = display.newImage("answer.png")  
local star = nil  
  
number.addEventListener("touch", number)  
  
function number:touch(event)  
 if event.phase == "moved"  
 number.x = event.x  
 number.y = event.y  
 elseif event.phase == "ended"  
 if distanceBetween(number, answer) \< 30 then  
 star = display.newImage("star.png")  
 end  
 end  
end

I’m at work so I can’t test if this actually works; think of this as pseudo-code giving you the general concept. [import]uid: 12108 topic_id: 5230 reply_id: 17578[/import]

#6

Here’s my hitTest function:

function hitTestObjects(obj1, obj2)  
 local left = obj1.contentBounds.xMin \<= obj2.contentBounds.xMin and obj1.contentBounds.xMax \>= obj2.contentBounds.xMin  
 local right = obj1.contentBounds.xMin \>= obj2.contentBounds.xMin and obj1.contentBounds.xMin \<= obj2.contentBounds.xMax  
 local up = obj1.contentBounds.yMin \<= obj2.contentBounds.yMin and obj1.contentBounds.yMax \>= obj2.contentBounds.yMin  
 local down = obj1.contentBounds.yMin \>= obj2.contentBounds.yMin and obj1.contentBounds.yMin \<= obj2.contentBounds.yMax  
 return (left or right) and (up or down)  
end

You call this function with two images. It returns true if the images are overlapping, and false if they aren’t. You can use this instead of the distanceBetween check in the code above; either way should work.

I posted this in Code Exchange because this is pretty handy for basic collision detection:
http://developer.anscamobile.com/code/flashs-hittestobject-emulated-using-contentbounds [import]uid: 12108 topic_id: 5230 reply_id: 17690[/import]

#7

Hey jhocking,

Your a star, thanks so much for your help with that, I now have it working with 4 questions, it can detect correct & incorrect answers and show congratulations box if all four are answers are correct.

Couldn’t have done it without your help!!! [import]uid: 13654 topic_id: 5230 reply_id: 17779[/import]