jeu de pions en javascript

projetpion · 04/04/2011, 08h57

Bonjour tout le monde,
comme vous le savez je suis entrain de créer un jeu de pions en javascript. Par contre mon code est un peu désordonné, mal structuré et cela par manque d'expérience. J'ai essayé de le réecrire en insérant un boucle for mais ça ne marche pas. Je voudrai profiter de votre expérience pour bien insérer le boucle for dans le code. Merci d'avance
Voici le code source:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
<head>
<title>JEU DE PIONS A DISTANCE - LP SAR </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="spectateur.css" />
</head>
<body bgcolor="#C4D7ED" text="#000000">
 
 
  <script type="text/javascript" src="jquery-1.3.1.min/jquery-1.3.1.min.js"></script>
  <script type="text/javascript">
 
 
 var cpt = 1;
	var commence = 0;
	var timer;
	function changer(elt_id,imageFile){  		$(elt_id).attr("src",imageFile);  	}
/*******cette fonction permet  d'affecter la couleur jaune ou bleu quand on clique dessus *********/
	function affecte(elt_id,couleur){
		elt_id = "#i"+elt_id;
		switch(couleur){
			case  1  : imageFile = "bleu.gif" 	;break; // image pion jaune
			case -1  : imageFile = "jaune.gif" 	;break; // image pion bleu
			case  0  : imageFile = "blanc.gif"	;
		}
 
 
			changer(elt_id,imageFile);  // permet de récupérer l'id de l'image qui doit etre affecter
	}
/**** cette fonction en Ajax utilise la méthode POST pour envoyer la requête à l'url lire_case.php******/	
	function lecture(){ 
		$.ajax({
			type: "POST",
			url: "lire_cases.php",
			data: "cpt="+cpt,
			success: function(msg){
				if(msg[1]=='e')	alert( msg + ": l'ordre à échoué" );// 'e' est le premier caractère du mot erreur contenu dans les msgs d'erreur; Alert=printf
				else{
					eval(msg); //Evalue et exécute le code javascript contenu dans msg.
 
				}
			}
		});
	}
 
/********** cette fonction permet de gérer le démmarage et l'arrêt du timer ******/
	function start_stop(){
		if( commence == 0 ) {
			commence =1;
			timer = setInterval("lecture()", 5500);
			document.getElementById("bouton").value="pause"; 
		}else{
			commence =0;
			clearInterval(timer);
			document.getElementById("bouton").value="lecture";
		}
	}
 
 
	//Création des lignes qui vont etre utilisées dans le plateau final
	var lig=new Array;    lig[0]="A1"; lig[1]="A2"; lig[2]="A3"; lig[3]="A4"; lig[4]="A5"; lig[5]="A6"; lig[6]="A7"; lig[7]="A8"; lig[8]="A9"; lig[9]="A10";
	var lig1=new Array;   lig1[0]="B1"; lig1[1]="B2"; lig1[2]="B3"; lig1[3]="B4"; lig1[4]="B5"; lig1[5]="B6"; lig1[6]="B7"; lig1[7]="B8"; lig1[8]="B9"; lig1[9]="B10"; 
	var lig2=new Array;   lig2[0]="C1"; lig2[1]="C2"; lig2[2]="C3"; lig2[3]="C4"; lig2[4]="C5"; lig2[5]="C6"; lig2[6]="C7"; lig2[7]="C8"; lig2[8]="C9"; lig2[9]="C10";
	var lig3=new Array;   lig3[0]="D1"; lig3[1]="D2"; lig3[2]="D3"; lig3[3]="D4"; lig3[4]="D5"; lig3[5]="D6"; lig3[6]="D7"; lig3[7]="D8"; lig3[8]="D9"; lig3[9]="D10";
	var lig4=new Array;   lig4[0]="E1"; lig4[1]="E2"; lig4[2]="E3"; lig4[3]="E4"; lig4[4]="E5"; lig4[5]="E6"; lig4[6]="E7"; lig4[7]="E8"; lig4[8]="E9"; lig4[9]="E10";
	var lig5=new Array;   lig5[0]="F1"; lig5[1]="F2"; lig5[2]="F3"; lig5[3]="F4"; lig5[4]="F5"; lig5[5]="F6"; lig5[6]="F7"; lig5[7]="F8"; lig5[8]="F9"; lig5[9]="F10";
	var lig6=new Array;   lig6[0]="G1"; lig6[1]="G2"; lig6[2]="G3"; lig6[3]="G4"; lig6[4]="G5"; lig6[5]="G6"; lig6[6]="G7"; lig6[7]="G8"; lig6[8]="G9"; lig6[9]="G10";
	var lig7=new Array;   lig7[0]="H1"; lig7[1]="H2"; lig7[2]="H3"; lig7[3]="H4"; lig7[4]="H5"; lig7[5]="H6"; lig7[6]="H7"; lig7[7]="H8"; lig7[8]="H9"; lig7[9]="H10";
	var lig8=new Array;   lig8[0]="I1"; lig8[1]="I2"; lig8[2]="I3"; lig8[3]="I4"; lig8[4]="I5"; lig8[5]="I6"; lig8[6]="I7"; lig8[7]="I8"; lig8[8]="I9"; lig8[9]="I10";
	var lig9=new Array;   lig9[0]="J1"; lig9[1]="J2"; lig9[2]="J3"; lig9[3]="J4"; lig9[4]="J5"; lig9[5]="J6"; lig9[6]="J7"; lig9[7]="J8"; lig9[8]="J9"; lig9[9]="J10";
 
 
 
	//Création du plateau final auquel on attribue chaque ligne afin d'obtenir un tableau dimensionnel 
	var plateau=new Array;   plateau[0]=lig; plateau[1]=lig1;   plateau[2]=lig2;   plateau[3]=lig3;   plateau[4]=lig4;   plateau[5]=lig5; plateau[6]=lig6;   plateau[7]=lig7; plateau[8]=lig8;   plateau[9]=lig9;         
 
	document.write("<center><br>"); //Centrage du plateau
 
	for(var i= 0; i < 99; i++){
		function X(i){;
		var xhr_object = null; //Initialisation de la variable xhr_object
 
 
	if(window.XMLHttpRequest) // Firefox, Google Chrome, d’Opera, de Safari 
	   xhr_object = new XMLHttpRequest(); // l'objet xhr reçoit l'outil de requete propre à Firefox
	else if(window.ActiveXObject) // Internet Explorer utilise window.ActiveXObject  dans le cas d'une requete
	   xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); // Donc si c'est le cas l'objet xhr reçoit l'outil de requete propre à Internet Explorer
	else { // XMLHttpRequest non support? par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); //Sinon le navigateur utilisé ne supporte aucune de ces 2 méthodes de requetes
	   return; 
	} 
	document.write("<img id=\"i\" src='blanc.gif' onclick=X(i) width=50 height=50 height="+plateau[x][y]+">"); 
	document.write("<img id=\"i\" src='noir.gif' onclick=X(i) width=50 height=50 height="+plateau[y][x]+">"); 
 
	Alert(i);
 
 
</script>
 
 
<div  style="left:50px; top:200px; position:absolute" >	
 
  <input type="submit" name="Submit" value="lecture" id="bouton" onClick="start_stop();"></input>
 
  </div>
 
		<div id="bandeau"  style="left:50px; top:200px; position:absolute"  ></div>
 
  </body>
</html>

RomainVALERI · 04/04/2011, 09h56

Epargne nos yeux fatigués s'il te plait

entoure chaque extrait de code avec des balises [code][/code] sinon ça fait

En attendant, cette petite factorisation en passant ^^ A la place de ceci :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
var lig=new Array; lig[0]="A1"; lig[1]="A2"; lig[2]="A3"; lig[3]="A4"; lig[4]="A5"; lig[5]="A6"; lig[6]="A7"; lig[7]="A8"; lig[8]="A9"; lig[9]="A10";
var lig1=new Array; lig1[0]="B1"; lig1[1]="B2"; lig1[2]="B3"; lig1[3]="B4"; lig1[4]="B5"; lig1[5]="B6"; lig1[6]="B7"; lig1[7]="B8"; lig1[8]="B9"; lig1[9]="B10";
var lig2=new Array; lig2[0]="C1"; lig2[1]="C2"; lig2[2]="C3"; lig2[3]="C4"; lig2[4]="C5"; lig2[5]="C6"; lig2[6]="C7"; lig2[7]="C8"; lig2[8]="C9"; lig2[9]="C10";
var lig3=new Array; lig3[0]="D1"; lig3[1]="D2"; lig3[2]="D3"; lig3[3]="D4"; lig3[4]="D5"; lig3[5]="D6"; lig3[6]="D7"; lig3[7]="D8"; lig3[8]="D9"; lig3[9]="D10";
var lig4=new Array; lig4[0]="E1"; lig4[1]="E2"; lig4[2]="E3"; lig4[3]="E4"; lig4[4]="E5"; lig4[5]="E6"; lig4[6]="E7"; lig4[7]="E8"; lig4[8]="E9"; lig4[9]="E10";
var lig5=new Array; lig5[0]="F1"; lig5[1]="F2"; lig5[2]="F3"; lig5[3]="F4"; lig5[4]="F5"; lig5[5]="F6"; lig5[6]="F7"; lig5[7]="F8"; lig5[8]="F9"; lig5[9]="F10";
var lig6=new Array; lig6[0]="G1"; lig6[1]="G2"; lig6[2]="G3"; lig6[3]="G4"; lig6[4]="G5"; lig6[5]="G6"; lig6[6]="G7"; lig6[7]="G8"; lig6[8]="G9"; lig6[9]="G10";
var lig7=new Array; lig7[0]="H1"; lig7[1]="H2"; lig7[2]="H3"; lig7[3]="H4"; lig7[4]="H5"; lig7[5]="H6"; lig7[6]="H7"; lig7[7]="H8"; lig7[8]="H9"; lig7[9]="H10";
var lig8=new Array; lig8[0]="I1"; lig8[1]="I2"; lig8[2]="I3"; lig8[3]="I4"; lig8[4]="I5"; lig8[5]="I6"; lig8[6]="I7"; lig8[7]="I8"; lig8[8]="I9"; lig8[9]="I10";
var lig9=new Array; lig9[0]="J1"; lig9[1]="J2"; lig9[2]="J3"; lig9[3]="J4"; lig9[4]="J5"; lig9[5]="J6"; lig9[6]="J7"; lig9[7]="J8"; lig9[8]="J9"; lig9[9]="J10";
 
var plateau=new Array; plateau[0]=lig; plateau[1]=lig1; plateau[2]=lig2; plateau[3]=lig3; plateau[4]=lig4; plateau[5]=lig5; plateau[6]=lig6; plateau[7]=lig7; plateau[8]=lig8; plateau[9]=lig9;

...tu peux écrire cela :

Code javascript :

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

1
2
3
4
5
6
7
var lettres = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
var ligne, plateau = [];
for (var i =0; i < 10; ++i) {
	ligne = [];
	for (var  j = 0; j < 10; ++j) ligne.push(lettres[i] + (i + 1));
	plateau.push(ligne);
}

projetpion · 04/04/2011, 11h13

J'ai modifié le code il marche très bien mais l'affichage n'est pas terrible (voir fichier joint). Je recherche la solution pour une bonne affichage j'ai essayé avec <br/> et ça me fait une case par ligne par térrible.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
<head>
<title>JEU DE PIONS A DISTANCE </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="spectateur.css" />
</head>
<body bgcolor="#C4D7ED" text="#000000">
 
 
  <script type="text/javascript" src="jquery-1.3.1.min/jquery-1.3.1.min.js"></script>
  <script type="text/javascript">
 
 
 var cpt = 1;
	var commence = 0;
	var timer;
	function changer(elt_id,imageFile){  		$(elt_id).attr("src",imageFile);  	}
/*******cette fonction permet  d'affecter la couleur jaune ou bleu quand on clique dessus *********/
	function affecte(elt_id,couleur){
		elt_id = "#i"+elt_id;
		switch(couleur){
			case  1  : imageFile = "bleu.gif" 	;break; // image pion jaune
			case -1  : imageFile = "jaune.gif" 	;break; // image pion bleu
			case  0  : imageFile = "blanc.gif"	;
		}
 
 
			changer(elt_id,imageFile);  // permet de récupérer l'id de l'image qui doit etre affecter
	}
/**** cette fonction en Ajax utilise la méthode POST pour envoyer la requête à l'url lire_case.php******/	
	function lecture(){ 
		$.ajax({
			type: "POST",
			url: "lire_cases.php",
			data: "cpt="+cpt,
			success: function(msg){
				if(msg[1]=='e')	alert( msg + ": l'ordre à échoué" );// 'e' est le premier caractère du mot erreur contenu dans les msgs d'erreur; Alert=printf
				else{
					eval(msg); //Evalue et exécute le code javascript contenu dans msg.
 
				}
			}
		});
	}
 
/********** cette fonction permet de gérer le démmarage et l'arrêt du timer ******/
	function start_stop(){
		if( commence == 0 ) {
			commence =1;
			timer = setInterval("lecture()", 5500);
			$('#bouton').val('pause');
 
		}else{
			commence =0;
			clearInterval(timer);
			$('#bouton').val('lecture');
 
		}
	}
 
 
	//Création des lignes qui vont etre utilisées dans le plateau final
	var lettres = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
	var ligne, plateau = [];
	for (var i =0; i < 10; ++i) {
	ligne = [];
	for (var  j = 0; j < 10; ++j) ligne.push(lettres[i] + (i + 1));
	plateau.push(ligne);
}
 
 
 
	document.write("<center><br>"); //Centrage du plateau
 
 
	for(var i= 0; i < 10; ++i){
		for(var j= 0; j < 10; ++j){
 
		function X(i){
			function X(j){
				var xhr_object = null; //Initialisation de la variable xhr_object
 
				if(window.XMLHttpRequest) // Firefox, Google Chrome, d’Opera, de Safari 
					xhr_object = new XMLHttpRequest(); // l'objet xhr reçoit l'outil de requete propre à Firefox
				else if(window.ActiveXObject) // Internet Explorer utilise window.ActiveXObject  dans le cas d'une requete
					xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); // Donc si c'est le cas l'objet xhr reçoit l'outil de requete propre à Internet Explorer
				else { // XMLHttpRequest non support? par le navigateur 
					alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); //Sinon le navigateur utilisé ne supporte aucune de ces 2 méthodes de requetes
		return; 
		} 
 
 
	}
	}
		if(((i+j)%2)== 0) {
			document.write("<img id=\"i1\" src='noir.gif' onclick=X() width=50 height=50 height="+plateau[i+1]+">");
			 }	
		else {
			document.write("<img id=\"i2\" src='blanc.gif' onclick=X() width=50 height=50 height="+plateau[j+1]+">"); 
 
	//document.write("<img src='blanc.gif' onclick=X(i) width=50 height=50 height="+plateau[i][j]+">");
	//document.write("<img src='noir.gif' onclick=X(j) width=50 height=50 height="+plateau[i][j]+">");
			}
		}
	}
 
 
</script>
 
 
<div  style="left:50px; top:200px; position:absolute" >	
 
  <input type="submit" name="Submit" value="lecture" id="bouton" onClick="start_stop();"></input>
 
  </div>
 
		<div id="bandeau"  style="left:50px; top:200px; position:absolute"  ></div>
 
  </body>
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email