Comment faire pour régler mon problème de mélange aléatoire de sprites pour un slide puzzle en javascript ?
J’essaie de créer un slide puzzle en partant de zéro, pour le départ, j’ai une base de javascript qui fonctionne très bien pour placer mes 16 sprites ou je veux, dans l’ordre que je veux, au format demandé et après un délai d’attente de 5 secondes le mélange aléatoire se lance pendant 3 secondes.
Quel est le résultat attendu ?
Que la fin du mélange soit correct
Quel est le résultat actuel ?
A la fin du mélange, certains sprites disparaissent et d’autres se multiplient
Captures d’écran
Je ne peux poster qu’une seule photo alors désolé copier coller du code …
runtimeScene.setBackgroundColor(0,0,0);
// Créer et initialiser p1 à p16 une seule fois
let pieces = ;
for (let i = 1; i <= 16; i++) {
let piece = runtimeScene.createObject(“p” + i);
piece.setZOrder(1); // Définir l’ordre z à 1
piece.getVariables().get(“visible”).setNumber(0); // Cacher l’objet
pieces.push(piece);
runtimeScene.addObject(piece); // Ajouter l’objet à la scène
}
// Utiliser le tableau de pièces pour initialiser le tableau de puzzle
let tableau = [[pieces[0], pieces[4], pieces[8], pieces[12]], [pieces[1], pieces[5], pieces[9], pieces[13]], [pieces[2], pieces[6], pieces[10], pieces[14]], [pieces[3], pieces[7], pieces[11], pieces[15]]];
for (let i = tableau.length - 1; i >= 0; i–) {
for (let j = tableau[i].length - 1; j >= 0; j–) {
let sprite = tableau[j][i];
sprite.setX(i * 100 + 160); // Ajustez la valeur en fonction de la nouvelle taille de vos sprites
sprite.setY(j * 100 + 380); // Ajustez la valeur en fonction de la nouvelle taille de vos sprites
sprite.setWidth(100); // Définissez la largeur du sprite à 100px
sprite.setHeight(100); // Définissez la hauteur du sprite à 100px
sprite.getVariables().get(“visible”).setNumber(1); // Montrer l’objet
}
}
function melangerPuzzle(tableau) {
let total = tableau.length * tableau[0].length;
let zOrder = 0; // Initialiser l’ordre Z
for (let n = 0; n < total; n++) {
setTimeout(function() {
if (!melangeEnCours) {
return;
}
let i = Math.floor(Math.random() * tableau.length);
let j = Math.floor(Math.random() * tableau[i].length);
let i2 = Math.floor(Math.random() * tableau.length);
let j2 = Math.floor(Math.random() * tableau[i2].length);
let temp = tableau[i][j];
tableau[i][j] = tableau[i2][j2];
tableau[i2][j2] = temp;
tableau[i][j].setX(i * 101 + 160);
tableau[i][j].setY(j * 101 + 380);
tableau[i][j].setZOrder(zOrder++); // Ajuster l'ordre Z
tableau[i2][j2].setX(i2 * 101 + 160);
tableau[i2][j2].setY(j2 * 101 + 380);
tableau[i2][j2].setZOrder(zOrder++); // Ajuster l'ordre Z
}, n * 90); // Chaque mouvement est décalé de 85 millisecondes
}
}
let melangeEnCours = true;
// Attendez 5 secondes, puis mélangez le puzzle
setTimeout(function() {
melangerPuzzle(tableau);
}, 5000);
// Arrêtez de mélanger le puzzle après 3 secondes
setTimeout(function() {
melangeEnCours = false;
}, 8000);
NEW version et après plusieurs aperçu, elle a l’air fonctionnel !
ne crions pas victoire trop vite, je boucle le projet avant :o)
function melangerPuzzle(tableau) {
let total = tableau.length * tableau[0].length;
let zOrder = 1; // Réinitialiser l’ordre Z à 1 après chaque mélange
let melanges = total * 2; // Nombre de fois que le mélange sera effectué
for (let n = 0; n < melanges; n++) {
setTimeout(function() {
if (!melangeEnCours) {
return;
}
let i, j, i2, j2;
do {
i = Math.floor(Math.random() * tableau.length);
j = Math.floor(Math.random() * tableau[i].length);
i2 = Math.floor(Math.random() * tableau.length);
j2 = Math.floor(Math.random() * tableau[i2].length);
} while (i === i2 && j === j2); // S'assurer que nous n'échangeons pas un sprite avec lui-même
let temp = tableau[i][j];
tableau[i][j] = tableau[i2][j2];
tableau[i2][j2] = temp;
tableau[i][j].setX(i * 100 + 160);
tableau[i][j].setY(j * 100 + 380);
tableau[i][j].setZOrder(zOrder + n); // Ajuster l'ordre Z
tableau[i2][j2].setX(i2 * 100 + 160);
tableau[i2][j2].setY(j2 * 100 + 380);
tableau[i2][j2].setZOrder(zOrder + n + 1); // Ajuster l'ordre Z
}, n * 50);
}
}
let melangeEnCours = true;
// Attendez 5 secondes, puis mélangez le puzzle
setTimeout(function() {
melangerPuzzle(tableau);
}, 5000);
// Arrêtez de mélanger le puzzle après 3 secondes
setTimeout(function() {
melangeEnCours = false;
}, 8000);
et bien non toujours pas, je vais abondonner l’idée je crois :,)
