Discussion :

[Victofu]

Bonjour !

J'essaye de coder un morpion en JS et HTML mais je rencontre quelques difficultés

La grille de jeu est représentée par ce tableau :

Code html :

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
<table id="grille">
	<tr>
		<td id="A1" onclick="placerSigne()"><img src="Rond.png"></td>
		<td id="B1" onclick="placerSigne()"></td>
		<td id="C1" onclick="placerSigne()"></td>
	</tr>
	<tr>
		<td id="A2" onclick="placerSigne()"></td>
		<td id="B2" onclick="placerSigne()"></td>
		<td id="C2" onclick="placerSigne()"></td>
	</tr>
	<tr>
		<td id="A3" onclick="placerSigne()"></td>
		<td id="B3" onclick="placerSigne()"></td>
		<td id="C3" onclick="placerSigne()"></td>
	</tr>
</table>

Les id correspondent aux coordonnées de chacune des cases.

Chacune des cases exécute donc la fonction placerSigne() :

Code :

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

1
2
3
function placerSigne(){
	if(tourJoueur1 == true){}
	else{}

Oui je sais, elle ne fais rien ^^

J'aimerais que cette fonction place une image (la croix) si tourJoueur1 est true et sinon (else) place une autre image (le rond).
Cependant je ne parvient pas correctement à mettre une image dans une case, car cela modifie la taille des cases dans le tableau.

De plus je ne sais pas comment placer l'image dans la case qui exécute la fonction (celle que l'utilisateur a cliqué) car elles exécutent toute la même fonction. Je sais que cela est possible sans créer une fonction différente par case mais je ne réussi pas à le faire.

Merci beaucoup !

[Kennel sébastien]

Bonjour Victofu,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function placerSigne(id) {
    var source = 'Rond.png';
 
    if (tourJoueur1 === true) {
        source = 'Croix.png';
    }
 
    var image_ = '<img src="' + source + '" alt="" />';
 
    document.getElementById(id).innerHTML = image_;
}

[Victofu]

Merci pour ta réponse, ton code marche à la perfection !

Pourrais tu simplement m'expliquer pourquoi mettre une triple = au lieu de simplement deux ?

[Kennel sébastien]

C'est pour le typage

« true » ne sera pas égal à « 'true' ».

[Victofu]

D'accord !

Merci beaucoup