Drag'n'Drop mini-game with several features

Phaser 3
1

Good afternoon. I have a task to make a mini-game with drag’n’drop. The codepen link shows an example of a base (3 squares of different colors):

I need some advice. I know how to do the drag itself. But I can’t think of how to do the following yet:

  • Limit the dragging area (so that the square does not go off the screen). As I understand it, for this, when dragging, I need to check the distance to the edges of the screen. And if the distance is less than the size of the square, then block dragging, right?
  • How do I swap squares? For example, I grab and drag the first square (blue in codepen). If it overlaps the next square (for example, aqua), then they should swap places. For example, like when you change the order of the music in a playlist
  • Determining the correct order. In the mini-game, you need to arrange the squares in a certain order, for example, gold, aqua and blue. What is the best way to check the order of these squares when you finish dragging? For example, the player dragged the blue square to the place of the gold one and then you need to check whether the order is correct
2

Hi, I’m a big noob too, but here are just some ideas that come up when thinking about it.

Non-physics version:
I would define three zones where the squares snap into (A, B and C with an X-coordinate each). you could create an array (indexofzones[]) and push a square in each zone.

you can then get the the position of each square with an indexnumber.

when you change the X of a square (for example increase it by dragging it to the right) you can then reorder the arrayitems accordingly.

physics version:
I just checked all the physics examples the other day, there are a lot of things that might be relevant for you. Not sure if you are familiar with physics (I m not at all) but there might be a more smooth / haptical way of doing it.

good luck!

1 Like
3

Oh I also found this post: Test intersection of two game objects (Phaser 3). maybe it’s helpful too

1 Like
4

Thank you, this is very useful information