Besoin d'aide jeu du morpion

**narcis60floyjo** · 28/02/2008, 13h09

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 :

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
 
<!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>

**d-Rek** · 28/02/2008, 14h41

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

Code HTML :

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

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 :

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
<!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>

**narcis60floyjo** · 28/02/2008, 15h14

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 ++

Besoin d'aide jeu du morpion

JavaScript

Discussions similaires

Partager

Partager