Jeu du Taquin

**NicolasaloiN** · 03/05/2017, 15h38

Bonjour,

Je suis en Terminale S option ISN et dans le but du projet je dois coder le jeu du taquin en Javascool.
Je charge donc une image, créé le "petit carré vide" qui permettra de bouger les cases, crée un "tableau" sur l'image qui semble fonctionné car lorsque je clique sur une partie de l'image il me dit son numéro.
Cependant je n'arrive pas a "mélanger les images" pour que le jeu puisse commencer... Voici le programme :

---------------------------------------------------------------------------------------------------------------------------------------------------------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
static int numCase;
static int rgb[];
static int [][] rouge = new int [500][500];
static int [][] vert = new int [500][500];
static int [][] bleu = new int [500][500];
 
void main (){
	// chargement de l'image
		load("http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg",false);
	//dessin du carré noir en bas à droite
		carre(375,375);
	//scan de l'image en tableau
	for (int y = 0; y < 500; y ++) {
		for (int x = 0; x < 500; x ++) {
			int rgb[] = getPixelColor(x,y);
			rouge[x][y] = rgb[0];
			vert[x][y] = rgb[1];
			bleu[x][y] = rgb[2];
		}
	}
	//génération de l'odre des cases
	int [] tab = new int [15];
	for (int i = 0; i < 15; i ++) {
		int result=random(1,16);
		while (result==tab[0]||result==tab[1]||result==tab[2]||result==tab[3]||result==tab[4]||result==tab[5]||result==tab[6]||result==tab[7]||result==tab[8]||result==tab[9]||result==tab[10]||result==tab[11]||result==tab[12]||result==tab[13]||result==tab[14]){
				result=random(1,16);
			}
			tab[i]=result;
	}
	//déclaration runnable détection position clic
	setRunnable(new Runnable() { public void run() {
		int posX,posY,posXcase,posYcase;
		posX=getX();
		posY=getY();
		//test runnable
		//*println("X=" + posX + "Y=" + posY);
		//numéro case image
		//position x case
		if(posX<375){
			if (posX<250){
				if (posX<125){
					posXcase=1;
				}
				else{
				posXcase=2;
				}
			}
			else{
			posXcase=3;
			}
		}
		else{
		posXcase=4;
		}
		//position y case
		if(posY<375){
			if (posY<250){
				if (posY<125){
					posYcase=1;
				}
				else{
				posYcase=2;
				}
			}
			else{
			posYcase=3;
			}
		}
		else{
		posYcase=4;
		}
	//test posCase
	//*println("posXcase =" + posXcase + "posYcase =" + posYcase);
	if(posYcase==1){
		if(posXcase==1){
			numCase=1;
		}
		else if(posXcase==2){
			numCase=2;
		}
		else if(posXcase==3){
			numCase=3;
		}
		else{
			numCase=4;
		}
	}
	else if(posYcase==2){
		if(posXcase==1){
			numCase=5;
		}
		else if(posXcase==2){
			numCase=6;
		}
		else if(posXcase==3){
			numCase=7;
		}
		else{
			numCase=8;
		}
	}
	else if(posYcase==3){
		if(posXcase==1){
			numCase=9;
		}
		else if(posXcase==2){
			numCase=10;
		}
		else if(posXcase==3){
			numCase=11;
		}
		else{
			numCase=12;
		}
	}
	else if(posYcase==4){
		if(posXcase==1){
			numCase=13;
		}
		else if(posXcase==2){
			numCase=14;
		}
		else if(posXcase==3){
			numCase=15;
		}
		else{
			numCase=16;
		}
	}
	//test numCase
	println(numCase);
	}});
	int melangerTableau;
}
 
void carre(int x, int y){
	for(int i=0; i<125; i++){
		for(int k=0; k<125; k++){
			setPixel(x+k, y+i, 5, 5, 5);
		}
	}
}
void melangerTableau(int t[]) {
    for (int i = 0; i < t.length; i++) 
      t[i] = i;
    for (int i = 0; i < t.length; i++) {
        int r = (int) random(0, t.length);
        int tmp = t[i];
        t[i] = t[r];
        t[r] = tmp;
    }
}

----------------------------------------------------------------------------------------------------------------------------------------------------

Merci d'avance pour votre aide !!!

**joel.drigo** · 03/05/2017, 16h55

Salut,

Je vois deux parties de code qui mélangent :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
void melangerTableau(int t[]) {
    for (int i = 0; i < t.length; i++) 
      t[i] = i;
    for (int i = 0; i < t.length; i++) {
        int r = (int) random(0, t.length);
        int tmp = t[i];
        t[i] = t[r];
        t[r] = tmp;
    }
}

Ici on passe un tableau en paramètre, on le remplit de valeur de 0 à sa taille -1, puis on mélanger aléatoirement ces valeurs. Mais cette méthode ne semble pas être utilisée, alors qu'elle fonctionne relativement bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
int [] tab = new int [15];
	for (int i = 0; i < 15; i ++) {
		int result=random(1,16);
		while (result==tab[0]||result==tab[1]||result==tab[2]||result==tab[3]||result==tab[4]||result==tab[5]||result==tab[6]||result==tab[7]||result==tab[8]||result==tab[9]||result==tab[10]||result==tab[11]||result==tab[12]||result==tab[13]||result==tab[14]){
				result=random(1,16);
			}
			tab[i]=result;
	}

En revanche, cet horrible "machin", lui, est exécuté. Il fonctionne aussi, mais c'est une abomination. Tous ces tests, c'est une bon moyen de se prendre la tête et de risquer les erreurs.
Toutefois il y a une lègère différence avec le code précédent. Les cases du tableau sont remplies avec des valeurs de 1 à 15, et non de 0 à 15 (il n'y a pas grand chose à faire pour le modifier et l'utiliser éventuellement, ou simplement utiliser des valeurs de 0 à 15, et non de 1 à 16.
En résumé, ce code parcourt un tableau de 15 cases, pour chaque case tire un nombre entre 1 et 15 (inclus), tant que ce nombre est déjà dans l'une des cases du tableau (sauf la dernière), et le stocke dans le tableau. On se retrouve donc bien avec un tableau de nombres de 1 à 15, mélangés.

Si la question concerne l'image en elle-même, le problème vient peut-être du fait que tu as une seule image, donc difficile de mélanger une seule image. Et si on parlait plutôt de 15 images ? Peut-être en découpant l'image unique actuelle. Alors ce qui va poser un premier problème tout de même, c'est que 15 n'est pas un carré. Je sais bien que dans le jeu du hibou taquin il y a toujours un trou, une case en moins dans le carré, mais c'est tout de même une case dans un tableau, qui pourrait être la valeur 0 par exemple. Du coup, çà donnerait tout son sens à la méthode mélanger, et l'utiliser pour mélanger un tableau de 16 cases, tel que le 0 représente le trou, éviterait d'avoir cette double boucle horrible avec tous ces tests en dur...
Maintenant, la problématique de découpage de l'image est (un peu) plus complexe. Je ne connais pas Javascool, et donc ne sait pas s'il y a une méthode toute faite pour faire ça. En Java, ce serait très simple, avec une BufferedImage. Mais je ne sais pas si tu peux utiliser une BufferedImage ou pas. Il semble que ton programme actuelle charge l'image dans le fond de la fenêtre si je comprend bien. Et donc il semble à priori que le but soit de partir de cette image chargée dans le fond et de mélanger ses pixels(ça risque d'être particulièrement lent mais bon). Il faut donc faire correspondre les cases et les pixels. Visiblement, au début du programme on charge les pixels dans 3 tableaux : on peut donc le faire sur ces tableaux, et ensuite récrire les pixels depuis les tableaux dans le fond.
Tu as un tableau contenant des numéros de cases de 1 à 15 (ce serait plus simple de 0 à 15, mais peu importe, ça ne change pas grand chose, ). Pour passer du numéro de la case aux coordonnées du point haut gauche d'une portion de l'image, c'est x portion image = x de la case * largeur en pixels d'une case, et y portion image = y de la case * hauteur en pixels d'une case. Pour le reste, c'est facile, pour parcourir tous les pixels.
Maintenant, il faut donc déterminer le x de la case, et le y de la case, avec un numéro de case. La formule, là aussi est simple. y de la case = numéro de la case / nombre de cases en largeur, et
x de la case est le reste de la même division.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
int i= ... un numéro de case ... de 0 à 16 exclus
int yc = i/4; // dans un carré de 16 cases, donc 4x4, on divise par 4 pour avoir le y de la case
int  xc= i%4; // reste de la division pour le x

Et la largeur et la hauteur d'une case en pixels d'un bout d'image (d'une case en pixels), et la largeur de l'image divisée par 4, et est exactement la même pour toutes les cases, tant que la largeur de l'image est un multiple de 4 (comme 500, la taille des tableaux rouge, vert et bleu justement... ).
Pour manipuler ça de manière intuitive, cela peut être intéressant de faire des fonctions, un fonction qui échange dans un tableau la case i et les case j, une fonction qui échange donc le xci,yci correspondant à i et le xcj et xcj correspondant à j, puis le x et y dans le tableau de pixels, si on applique cette suite de fonction au tableau rouge, vert et bleu, on saura échanger 2 portions d'images.

Dernier point à soulever : si on part du tableau de cases mélangées, et qu'on déplace la case i en tab[i], on va écraser la case tab[i], et, comme on ne l'a peut-être pas encore déplacé à sa destination finale, on va perdre cette portion. Donc, il faut bien penser à inverser les deux portions, ce qui va être encore plus lent, ou alors utiliser un autre tableau, de même taille. Ainsi, on aurait deux fois trois tableaux pour l'image (ça prendrait plus de mémoire, mais irait plus vite). Par exemple rougecopie pour rouge, vertcopie pour vert, bleucopie pour bleu

en résumé, pour toutes les cases i de tab, copier les pixels rouge, vert et bleu dans un nouveau tableau, tels que leur position de départ soit F(i] et celle d'arrivée (la copie) soit F(tab[i]), avec F(x) définie comme suite : ximg = (xc*500/4), xc = x % 4, et yimg = ( yc * 500/4 ), yc = x/4. pareil que x soit i ou tab[i], ximg et yimg étant les coordonnées d'une case dans les tableau rouge, vert, bleu, et rougecopie, verscopie et bleucopie.

Jeu du Taquin

avec Java

Discussions similaires

Partager

Partager