Discussion :

[Azumii]

Bonsoir,
Débutante en développement web, j'essaye de coder un Morpion sur mon site internet. Pour cela j'utilise Javascript. J'ai commencé par créer et afficher le plateau de jeu. Ensuite, j'aimerais que dès qu'un utilisateur "clique" sur une case du plateau, savoir quelle case il a choisi. Après quelques recherches sur internet, j'ai trouvé le moyen d'afficher les coordonnées du "clique de souris". Ce qui donne:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var xMousePos=0;
var yMousePos=0;
document.onmousemove= function(e) {
	xMousePos= e.clientX + window.pageXOffset;
	yMousePos= e.clientY + window.pageYOffset;
};
function update(e) { 
	var x= xMousePos - canvasPlateau.offsetLeft;
	var y= yMousePos - canvasPlateau.offsetTop;
        alert("x =" + x + ", y = " +y);
};
canvasPlateau.onclick=update;

Le problème est que j'arrive à afficher les coordonnées x et y, mais pas à les récupérer dans une variable pour pouvoir ensuite les exploiter ( selon les coordonnées de la souris sur le plateau je pourrai déterminer quelle case a été choisi). J'ai cru comprendre qu'il fallait utiliser "AJAX", mais je n'en suis pas sûre.
Ainsi, j'aimerais que vous m'orientez sur la manière de le faire (peut être existe t'il une manière plus simple que de passer par les coordonnées ).

Merci.

[sekaijin]

pourquoi ne pas mettre le onclick sur la case et non sur le plateau ?

Ainsi la case cliqué est simplement this.
A+JYT

[Azumii]

Merci.

Je clique sur le plateau, car c'est le seul "objet" ( enfin canvas ) que j'ai. Pour dessiner les cases j'ai simplement tracé des lignes. Faudrait-il que je crée des "canvas" pour mes cases? Pour ensuite utiliser onclick dessus?

Pour que ce que je dis soit un peu plus clair, voici mon code:

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
var canvasPlateau= document.getElementById("morpion_plateau");
var convasPlateauContext;
var plateauLongueur = 400;
var plateauLargeur = 400;
var dessinerPlateau = function() {
	// canvasPlateauContext.fillStyle = couleurPlateau;
	var img= new Image();
	img.src = 'bois.png';
	img.onload= function() {
		canvasPlateauContext.fillRect(100, 100, plateauLongueur, plateauLargeur);
		canvasPlateauContext.drawImage(img,0,0, plateauLongueur, plateauLargeur);
		canvasPlateauContext.beginPath();
		canvasPlateauContext.lineWidth=4;
		canvasPlateauContext.moveTo(133,0);
		canvasPlateauContext.lineTo(133,400);
		canvasPlateauContext.moveTo(266,0);
		canvasPlateauContext.lineTo(266,400);
		canvasPlateauContext.moveTo(0,133);
		canvasPlateauContext.lineTo(400,133);
		canvasPlateauContext.moveTo(0,266);
		canvasPlateauContext.lineTo(400,266);
		canvasPlateauContext.fill();
		canvasPlateauContext.stroke();
	}
}
var initialisation = function() {
	canvasPlateau.width = plateauLongueur;
	canvasPlateau.height = plateauLargeur;
	document.body.appendChild(canvasPlateau); 
	canvasPlateauContext = canvasPlateau.getContext('2d');
	dessinerPlateau();
}

[ryan]

Yop,

Une alternative à canvas, c'est le SVG, où chaque objet garde une possibilité de clic.

[NoSmoking]

Bonjour,
pour récupérer les positions X/Y d'un click, ou autre, dans un CANVAS

Code :

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

1
2
3
4
5
6
function getPositionClick(e) {
  var x, y,
      rect = canvas.getBoundingClientRect();
  x = e.clientX - rect.left;
  y = e.clientY - rect.top;
}

[Azumii]

NoSmoking, ton code équivaut plus au moins au mien. Mon problème est que j'aimerais utiliser les variables x et y trouvés dans une autre fonction. En effet, j'aimerais que mon code puisse faire ceci:
Dès que l'utilisateur clique sur le plateau:

• je récupère les coordonnées de la souris
• selon les coordonnées je détermine sur quelle case l'utilisateur a cliqué
• je vérifie si la case est occupée, si non je met une croix ou un rond, selon le joueur, sur la case

Ce qui donne:

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
 
var posX=0;
var posY=0;
function getPositionClick(e) {
  rect = canvas.getBoundingClientRect();
  posX = e.clientX - rect.left;
  posY = e.clientY - rect.top;
}
 
function principale ()
{
canvasPlateau.onclick=getPositionClick; // dès qu'on clique sur le canvas on lance la fonction getPositionClick
// et la j'aimerais utiliser les coordonnées x et y trouvés précédemment 
dessinerCroix(x,y) // par exemple j'aimerais dessiner une croix à l'endroit ou l'utilisateur a cliqué et ce dès qu'un utilisateur clique sur le canvas plateau, sauf que ça ne marche pas
}

Ryan, merci pour cette alternative, même s'il est vrai que je préférerai apprendre à utiliser "canvas". Cependant, créer un canvas par case alourdira certainement mon code inutilement.. Ou bien devrais-je créer un canvas pour toutes les cases?

[ryan]

Yop!

L'action d'ajouter quelque chose sur le canvas fait suite à un clic, c'est donc dans la fonction getPositionClick() que tu dois ajouter le code qui va dessiner une croix ou un cercle.

[yahiko]

Oui, ou carrément renommer getPositionClick() par un nom plus parlant comme handleClick()

Code :

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

canvasPlateau.onclick=handleClick;

avec une fonction handleClick() qui pourrait être la suivante :

Code :

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

1
2
3
4
5
6
function handleClick() {
  var pos = getPositionClick();
 
  // affichage
  // ...
}

[NoSmoking]

Comme plus ou moins expliqué par tous il te faut gérer cela dans la fonction placé sur l'événement onclick de ton CANVAS.

Code :

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

1
2
3
4
5
6
7
8
9
10
canvasPlateau.onclick = function(e){
  var x, y,
      rect = this.getBoundingClientRect();
  x = e.clientX - rect.left;
  y = e.clientY - rect.top;
  // maintenant les variables sont disponibles
  dessinerCroix(x,y);
  // on met ici le reste des fonctions
  // etc ...
};

[Azumii]

Merci à tous , grâce à vous j'ai enfin réussi à faire ce que je voulais