gargoyle95 - Qwice

Comme promis voici une sorte de tuto pour faire un puzzle 5x5 Vivement que Qwice permette le partage direct du code des sujets😉😉 Je remet le lien du puzzle :https://qwice.com/Point/TcsgHrq5jW8nK

gargoyle95 - Qwice 2024

Comme promis voici une sorte de tuto pour faire un puzzle 5x5 Vivement que Qwice permette le partage direct du code des sujets😉😉 Je remet le lien du puzzle :https://qwice.com/Point/TcsgHrq5jW8nK8 Je vais considérer que vous savez faire des sujets interactifs. Il aurait été plus simple que je fasse une vidéo mais pas question que je parle :pJ'ai fait des captures écran, je vais dérouler mon "tuto" par image.L'ordre des action est important, les actions se lancent toutes seules, si vous modifiez une variable au mauvais moment le puzzle aura un comportement bizarre. Les variables sont au départ à vide, c'est pour ça que je teste <>1 et pas =0 pour le verrou par exemple.Image 1, vue globale: Pour commencer, il faut une image, et la couper en 25 morceaux. Le sujet interactif consiste en une scène avec 25 éléments visuels, 50 zones de clics (en gris, 2 par case blanche), et une scène de fin. J'ai appelé les pièces en fonction de leurs coordonnées X, Y en partant du haut : Pièce de la première ligne / première colonne =P11, etc.Le codage est assez simple, chaque pièce / élément visuel a le même code source, et la zone blanche où poser les pièces a 2 actions par case. Le boulot consiste à coder les premiers éléments et les copier coller en changeant les paramètres.Image 2, une pièce / élément visuel:Voici le contenu d'un élément visuel. Codez en un, puis copiez collez en modifiant les images et le code pour chaque pièce. Il y a deux images : la pièce, et la pièce entourée d'une bordure jaune pour indiquer qu'elle est sélectionnée. Ici il s'agit de la pièce 32 : 3e colonne, 2e ligne.1ere action : QUAND : Clic sur la pièce ET Verrou <>1 (Verrou est une variable qui empêche qu'on clique sur 2 pièces en même temps) ET Piece32Ok <>1 (Cette variable est à 1 quand la pièce est bien positionnée, une variable par pièce, agit comme un verrou pour la pièce)ALORS : Je met le verrou à 1, pour bloquer le clic sur une autre pièceJe change l'image de l'élément pour pour afficher la bordure de sélectionJe met "32" à la variable "Pièce". Cette variable indique quelle pièce est sélectionnée.Cette action doit être en "exécution parallèle"2e action :QUAND : le Verrou est désactivé (Verrou <>1)ALORS : Je remet l'image sans bordure.Cette action, comme toutes en fait, se lance toute seule, pas besoin de "l'appeler" via un clic.3e action :QUAND : PieceKo Vaut 32 (indique que la pièce est mal placée) Et CibleX vaut au moins 1 (CibleX est une variable pour déplacer la pièce, ici je teste qu'un ordre de mouvement est passé)ALORS : Je vide la variable pièce KO en la mettant à 0Je déplace la pièce selon les coordonnées contenues dans les variables CibleX et CibleY (voir image 3). J'ai calculé les positions en plaçant les pièces et en notant leurs coordonnées pour en déduire une formule.Je vide les variables Verrou, CibleX et Cible Y en les mettant à 0.C'est tout! Quand c'est fini copiez collez votre élément visuel et remplacer toutes les références à la pièce 32 par celle de la nouvelle pièce. changez aussi les imagesImage 4 : Les zones de clic sur la scèneIl y a 2 actions, un clic sur une case et c'est la bonne pièce, ou c'est la mauvaise pièce.1ere Action : QUAND : On clique sur la zone (ici zone 14), le verrou est à 1 (signifie qu'une pièce est sélectionnée), et que la pièce sélectionnée vaut 14 (la même que la zone, on a cliqué au bon endroit)ALORS : Je déplace la pièce. Ici pas de formule, il faut choisir la pièce "14" et mettre les coordonnées à la main (image 5).J'ajoute 1 à PiècesOk, le compteur de pièces bien placées.Je met 1 à PiecesOk14, pour verrouiller la pièce 14Je libère le verrou en le passant à 02e action :QUAND : Idem que la première action mais on a pas cliqué sur la bonne caseALORS : Je passe les coordonnées de la case aux variables CibleX et CibleY, et je met la valeur de la pièce à PieceKo. Ces données sont automatiquement gérées par la tuile qui va se déplacer toute seule (La 3e action de l'element visuel)Copier-coller ces 2 actions pour chaque case, penser à replacer les zones clic sur les bonnes casesImage 6 :La condition de fin, simple, si j'ai bien placé 25 pièces je passe à la scène de fin. J'y ai mis l'image complète.Image 7 :Comme je suis gentil je vous met mon fond, comme ça vous pourrez utiliser ma formule de calcul de coordonnées!