Besoin d'aide jeu du morpion

Version imprimable

Bonjour à vous tous.

Voilà, je présente ce que je veux faire.
J'aimerais afficher l'image du joueur actuel en dessous du tableau de jeu de morpion, mais je n'arrive pas à le faire. J'ai plusieurs tentatives mais aucun résultat.

Si quelqu'un pouvait m'aider, ça serait sympa.
Merci d'avance.

Voici mon code (que dois-je rajouter ?) :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Jeu du Morpion</title>
 
<script type="text/javascript" language="javascript">
<!--
	var tab = new Array(false,false,false,false,false,false,false,false,false);
	var tab2 = new Array("0","0","0","0","0","0","0","0","0");
	var croix = "croix.gif";
	var rond = "rond.gif";
	var cpt = 0;
	var i = 0;
 
 
function initialisation()
{
	var i=0;
 
	while (i<9)
	{
		document.images[i].src="vide.gif";
		tab[i]=false;
		tab2[i]="0";
		i++;
	}			
 
}
 
function verifier(a,b,c)
{
	if (tab2[a]=="1" && tab2[b]=="1" && tab2[c]=="1")
	{
	window.alert("Croix gagne !");
	return initialisation();
	}
 
	if (tab2[a]=="2" && tab2[b]=="2" && tab2[c]=="2")
	{
	window.alert("Rond gagne !");
	return initialisation();
	}
}
 
function gagnant()
{
	var verif = false;
 
	if (verifier(0,1,2) || verifier(3,4,5) || verifier(6,7,8) || verifier(0,3,6) || verifier(1,4,7) || verifier(2,5,8) || verifier(0,4,8) || verifier(2,4,6))
	return true;
 
}
 
function joue(n)
{	
	if (tab[n]==false)
		{
		if (cpt%2==0)
			{
			document.images[n].src = croix;
			tab2[n]="1";
 
			}
		else
			{
			document.images[n].src = rond;
			tab2[n]="2";
 
			}
		tab[n]=true;
		}
	else
	{
		window.alert("Impossible");
		cpt--;
	}
	cpt++;
 
	gagnant();
 
}
 
 
 
//-->
</script>
 
      <style type="text/css">
	body { text-align : center }
	td.bord {border-top : 2px solid black ; border-bottom : 2px solid black}
	td.bord2 {border-right : 2px solid black ; border-left : 2px solid black}
	td.bord3 {border-right : 2px solid black ; border-left : 2px solid black ; border-top : 2px solid black ; border-bottom : 2px solid black}
</style>
 
</head>
<body>
 
<h2>Jeu du Morpion !</h2> 
 
<table align="center" border="0" cellspacing="0">
 
<tr> 	<td href="#" onClick="return joue(0)" ><img src="vide.gif"> 
	<td class="bord2" href="#" onClick="return joue(1)"><img src="vide.gif"> 
	<td href="#" onClick="return joue(2)"><img src="vide.gif">
 
<tr> 	<td class="bord" href="#" onClick="return joue(3)"><img src="vide.gif"> 
	<td class="bord3" href="#" onClick="return joue(4)"><img src="vide.gif"> 
	<td class="bord" href="#" onClick="return joue(5)"><img src="vide.gif">
 
<tr> 	<td href="#" onClick="return joue(6)"><img src="vide.gif"> 
	<td class="bord2" href="#" onClick="return joue(7)"><img src="vide.gif"> 
	<td href="#" onClick="return joue(8)"><img src="vide.gif">
 
<tr>	<td>
<tr>	<td>
<tr>	<td>
<tr>	<td>
<tr>	<td>
 
<tr>	<td colspan="2" align="center"> Joueur Actuel :
	<!-- suite -->
	<td>
 
</table>
 
 
</body>
</html>

Hum déjà il faut que tu fermes tes balises tr et td.

Code:

1
2
3
4
5
6
7
<table>
	<tr>
		<td>....</td>
		<td>....</td>
		<td>....</td>
	</tr>
</table>

Bon allez.. Je te l'ai fait.
Have fun !
PS : j'ai ajouté le cas du match nul

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jeu du Morpion</title>
<script type="text/javascript">
var tab = new Array();
var tab2 = new Array();
for(var i=0; i<9; i++){
	tab.push(false);
	tab2.push(0);
}
var croix = "croix.gif";
var rond = "rond.gif";
var cpt = 0;
var i = 0;
var joueur1='narcis60floyjo';
var joueur2='d-Rek';
 
function initialisation(){
	var i=0;
	while(i<9){
		document.images[i].src="vide.gif";
		tab[i]=false;
		tab2[i]="0";
		i++;
	}
}
 
function verifier(a,b,c){
	var the_end=true;
	for(var i=0; i<9; i++){
		if(tab2[i]==0){the_end=false; break;}
	}
	if(the_end){
		alert("Match nul");
		toReturn=initialisation();
	}else{
		var toReturn=false;
		if (tab2[a]==1 && tab2[b]==1 && tab2[c]==1){
			window.alert("Croix gagne !");
			toReturn=initialisation();
		}else if(tab2[a]==2 && tab2[b]==2 && tab2[c]==2){
			window.alert("Rond gagne !");
			toReturn=initialisation();
		}
	}
	return toReturn;
}
 
function gagnant(){
	var verif = false;
	return (verifier(0,1,2) || verifier(3,4,5) || verifier(6,7,8) || verifier(0,3,6) || verifier(1,4,7) || verifier(2,5,8) || verifier(0,4,8) || verifier(2,4,6))?true:false;
}
 
function joue(n){
	if(!tab[n]){
		if(cpt%2==0){
			document.images[n].src = croix;
			tab2[n]=1;
			document.getElementById('player').innerHTML='Joueur Actuel : '+joueur2;
		}else{
			document.images[n].src = rond;
			tab2[n]=2;
			document.getElementById('player').innerHTML='Joueur Actuel : '+joueur1;
		}
		tab[n]=true;
	}else{
		window.alert("Impossible");
		cpt--;
	}
	cpt++;
	gagnant();
}
 
window.onload=function(){
	document.getElementById('player').innerHTML='Joueur Actuel : '+joueur1;
}
</script>
<style type="text/css">
body{text-align:center;}
td.bord{border-top:2px solid black; border-bottom:2px solid black;}
td.bord2{border-right:2px solid black; border-left:2px solid black;}
td.bord3{border-right:2px solid black; border-left:2px solid black; border-top:2px solid black; border-bottom:2px solid black;}
</style>
</head>
<body>
<h2>Jeu du Morpion !</h2>
<table align="center" border="0" cellspacing="0">
	<tr>
		<td href="#" onClick="return joue(0)" ><img src="vide.gif"></td>
		<td class="bord2" href="#" onClick="return joue(1)"><img src="vide.gif"></td>
		<td href="#" onClick="return joue(2)"><img src="vide.gif"></td>
	</tr>
	<tr>
		<td class="bord" href="#" onClick="return joue(3)"><img src="vide.gif"></td>
		<td class="bord3" href="#" onClick="return joue(4)"><img src="vide.gif"></td>
		<td class="bord" href="#" onClick="return joue(5)"><img src="vide.gif"></td>
	</tr>
	<tr>
		<td href="#" onClick="return joue(6)"><img src="vide.gif"></td>
		<td class="bord2" href="#" onClick="return joue(7)"><img src="vide.gif"></td>
		<td href="#" onClick="return joue(8)"><img src="vide.gif"></td>
	</tr>
</table>
<br><br>
<div id="player">Joueur Actuel :</div>
</body>
</html>

28/02/2008, 16h14
narcis60floyjo

Merci beaucoup !

Ca marche. Ca fait bien les changements du joueur actuel. Mais moi je voulais qu'on voit la croix ou le rond. Mais je pense pouvoir modifier le code tout seul.

Merci quand même !!

A ++