Discussion :

[sybess]

Bonjour,

Je suis en train de développer un site web.

Cependant, j'aimerais faire quelque chose mais je ne sais pas du tout comment m'y prendre.

Voici ce que je veux faire :

En fait, sur ma page web, il y aura une zone (assez grande)

Dans cette zone, il y a des formes de différentes couleurs qui sont disposées mais celles ci ne se chevauchent pas. Les formes seraient des rectangles de différentes tailles qui s'encastreraient comme dans une puzzle.

L'utilisateur va configurer la forme qu'il veut et va l'ajouter dans la zone.

J'aimerais que l'utilisateur, avec un drag and drop, puisse déposer sa forme dans la zone.

Cependant, (à partir de là, je ne vois pas comment faire) l'utilisateur ne peux pas déposer sa forme sur une forme déjà existante.

De là, il y a 2 solutions

La première est de simplement bloquer le drop si la forme est sur une forme déjà présente. (avec une gestion de collision)

La deuxième, ma préférée, est de faire en sorte de déplacer les formes déjà présentes dans la zone, en les décalant sur les côtés (toujours sans qu'elles ne se chevauchent) afin de toujours laisser une zone libre pour que l'utilisateur puisse déposer sa forme.

J'espère que je suis assez clair.

N'hésitez pas à me demander pour plus de précision.

En sachant, que je préférerais faire la seconde solution.

J'ai déjà pensé utiliser les librairies javascript déjà présentes :

https://draggabilly.desandro.com/ (pour le drag and drop)

https://interactjs.io/ (pour le drag and drop)

https://konvajs.org/docs/sandbox/Col...Detection.html (pour la gestion de collision pour la solution 1)

Auriez vous une idée de comment faire la solution 2 ?

Je vous remercie par avance de votre réponse.

Cordialement

Sybess

[Showie]

Salut,

Y a du boulot mais le projet est sympa.

Les formes que tu souhaites déplacer sont elle de forme approchante ou complétement différentes ? (genre étoile, rectangle, triangle, ...)

Sinon tu peux commencer par la solution 1 car la solution 2 n'est qu'une évolution de la solution 1 et dois aussi passer par le contrôle des collisions avant de proposer un alignement sur arrête.

En gros, dans la solution 1, tu détectes la collision au moment ou tu drop.

Dans la solution 2, tu testes la collision au moment ou tu bouge ta souris.
Puis tu appliques une limite de déplacement alignée sur les points de collision.

[sybess]

Bonjour,

Merci pour votre réponse.
Les formes que je déplace sont des rectangles aussi.
Je ne comprend pas votre phrase : "Puis tu appliques une limite de déplacement alignée sur les points de collision." ?
Comment faire pour gérer toutes les formes présentes dans la zone et les faire déplacer comme il faut ?

Cordialement
Sybess

[Showie]

Avec des rectangles c'est super facile.
Les hits box rectangulaires sont les plus simples à calculer.

en gros, c'est le fonctionnement des sprites pour un jeu.
regarde ce tutoriel https://jeux.developpez.com/tutoriel...es-2d-simples/


dans ton cas tu calcules si il y a collision.
- Si non mouvement libre
- Si oui tu cherches en quel point.
par exemple, la forme A est en place c'est un carré de 100px positionné en x=200px et y=400px.
tu essaie de mettre la forme B un carré de 50px en position x=175px et y=400px;
il y a collision en x car la forme B va de 175px à 225px cela dépasse les limites de A.
tu refuse l affichage de B à cette position mais tu l'affiches aux limites de A.
X de B = limite en X de A - taille X de B = 200px - 50px = 150px.
Tu affiche B en position x=150px et y=400px;

c'est plus clair ?

[sybess]

Oui j'ai bien compris.
Cependant, c'est pas tout à fait ce que j'aimerais faire.
J'aimerais plutôt que ce soit A qui se déplace pour laisser la place à B. Et par la suite si A se déplace, il déplacerait aussi les éventuels rectangles d'à côté.
Est ce que cela est possible ?

[Showie]

Oui c'est possible (en vrai presque tout est possible les limitations sont plus en termes de performance)

Au moment ou tu détectes la collision tu laisse B se dessiner normalement mais tu dois
- soit déplacer A aux limites de B
- soit effacer A puis le redessiner aux limites de B

Tout dépend de la méthode utiliser.
Tu travail dans un canvas ?

La question qui peux se poser c'est de savoir si le mouvement de tous les blocs ne sera pas trop lourd à l affichage mais je pense que jusqu'a 5 blocs ça ne pose aucun problème.

[Mat.M]

J'aimerais que l'utilisateur, avec un drag and drop, puisse déposer sa forme dans la zone.

pour faire un drag & drop tu n'as pas besoin de bibliothèques additionnelles et de construire une usine-à-gaz

Un drag & drop qu'est-ce que c'est ? un drag & drop c'est maintenir le bouton gauche de la souris donc tant que ce bouton est maintenu enfoncé il faut déplacer la forme que tu veux à l'écran.
Une fois que le bouton est relaché eh bien tu vas comparer le rectangle délimitant la forme déplacée ( ce que l'on appelle une "bouding box") avec celui qui de l'emplacement où laisser la forme.
Mettons si la distance entre les centres des deux formes est faible la forme déplacée ira se placer au bon endroit

Le but de l’algo récursif est justement de ne pas avoir à connaître à l’avance où se trouvent les espaces vides

pas besoin forcément d'un algorithme récursif...
il suffit de rechercher dans une liste de formes et tester par le biais d'un booléen si la forme est vide..