How can detect if the letters are dropped in rect(400x350)?

[AlexPhaser]

Hi All,

I'm creating a basic game. The functionality of the game is, once the page is loaded one objects will appear on the canvas like (apple, cat, dog etc...) on the left side and a bunch of letters will appear on the right side. The user will have to drag and drop the letters in a rect area(bucket). Once the user dragged matched letters with the object within bucket then next object will appear in the same area.

I'm facing following challenges:

1. How can detect if the letters are dropped in rect(400x350)?

2. How can I validate the letters with the object?

3. How can I load multiple letters images using (game.load.image()) method?

Please help me.

 

Thanks
Alex

 

 

 

[drhayes]

1. As the user drags, you know the bounds of the letter they're dragging and the target rect. Just keep checking intersection on those rects, maybe using Phaser.Rectangle#intersects.

2. Make a property on the letter sprite that has the letter in it. You can use that property to see what letter the player is dragging.

3. Not sure what you're asking here. You're saying loading an L or H or Q image multiple times? Or maybe you could stick the letters in an atlas or a font file?

[AlexPhaser]

@drhayes -  Thanks very much!!

[AlexPhaser]

On 5/19/2016 at 6:56 PM, drhayes said:

1. As the user drags, you know the bounds of the letter they're dragging and the target rect. Just keep checking intersection on those rects, maybe using Phaser.Rectangle#intersects.

2. Make a property on the letter sprite that has the letter in it. You can use that property to see what letter the player is dragging.

3. Not sure what you're asking here. You're saying loading an L or H or Q image multiple times? Or maybe you could stick the letters in an atlas or a font file?

 

Hi,

Could you please check it which I have created so far. 

http://dothejob.in/kids-game/phaser-demo2/

Still, I'm not able to  detect if the letters are dropped in rect(400x350)?

Could you please me on this? 

here is the js file. http://dothejob.in/kids-game/phaser-demo2/js/game.js

 

Thanks
 

 

 

 

[drhayes]

Looks like it's working to me. The overlap happened, the sprite.key was added to the word. What's not working?