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?