Posez votre question Signaler

Déplacer un rectangle en javascipt [Résolu]

Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
 - - Dernière réponse : 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
 - 5 nov. 2014 à 04:49
Javascript / DHTML Posez votre question Signaler
Bonjour à tous,

Je travaille sur une application qui utilise beaucoup des rectangles coloriés et j'ai transposé cette application qui était au départ en java pur en javascript (partie cliente) et là je suis entrain de vouloir déplacer un rectangle quand on clique dessus mais je n'y arrive pas.

Est-ce que quelqu'un peut-il m'aider?

Merci d'avance.

Cordialement.
Afficher la suite 

Votre réponse

Répondre au sujet

15 réponses

Meilleure réponse
Signaler Commenter la réponse de jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362
1
Merci
C'est tout le fichier canvas que je t'ai donné!
Ben je ne pouvais pas le deviner ... vu que dans ton code tu as laissé : 
<script src="canvas.js"></script>


Je ne comprend rien à ton code, qu'est-ce qu'il est censé faire?,
Ben c'est TON CODE ... que j'ai juste corrigé et sur lequel j'ai ajouté des "console.log" pour savoir ce qu'il faisait... ( il faut regarder la "console" de ton navigateur pour les voir.)


S'il te plait on va faire simple, conçois un petit programme en JS qui me permettra de déplacer sur une ligne un petit carré ou petit cercle
Tu plaisantes j'espère...?!!

Pour rappel..

Merci de garder à l'esprit que CodeS-SourceS est une communauté d'entraide ( Sur le thème des langages de programmation )

Toutes les réponses sur le forum sont assurées par des bénévoles
qui donnent de leur temps libre pour aider à résoudre les problèmes.

A noter également que nous ne faisons pas dans le "tout cuit" et ne sommes pas là pour remplacer votre moteur de recherches...
... Soit tu trouves ton bonheur dans la partie source du site, soit à l'aide de ton moteur de recherche favori.

Ici, nous aidons volontiers sur des sujets techniques précis.

Je t'invite à lire avec attention le contenu du lien suivant :charte-de-commentcamarche-net : conseils-d-ecriture

Ainsi que celui concernant l'utilisation de la coloration syntaxique :
Utilisation des Balises de code

Merci donc de reformuler ta demande en respectant ces quelques points.

Quelques points essentiels à retenir :
- On ne pose qu' UNE question par discussion
- Le titre de la question doit refléter le souci rencontré ( Help.. SOS.. Urgent.. n'apporte aucune information utile !)
- Lorsque votre question est résolue.. merci de clore le sujet (lien Marquer comme résolu se trouvant sous le titre de votre question).
- Une question obtiendra de meilleurs réponses si elle est correctement rédigée, que les explications sont clairs et qu'éventuellement vous postez le code qui pose problème.
- Si vous avez un message d'erreur..... MARQUEZ LE (dans son intégralité).

Merci.

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 121 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
Signaler Commenter la réponse de jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362
0
Merci
Bonjour,

As tu regardé du côté de jquery et le draggable ?
http://jqueryui.com/draggable/


Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362 -
Tiens.... voici un exemple un peu plus poussé :
3 rectangles pouvant être déplacés à l'intérieur d'une zone

http://jsfiddle.net/jordane45/s9ovp7fd/
Commenter la réponse de jordane45
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
Bonjour jordane45,

je te remercie pour tes réponses, en fait j'ai crée une petite fonction en javascript qui me récupère les coordonnées de la souris et je voudrais que quand on clique sur un rectangle de petite dimension, ce dernier se déplace d'une unité, voici comment j'ai procédé: 
<script>
function Bougerectangle(e) {
 
 sX = e.pageX;
 sY = e.pageY;
 
 for(i1 = getPosXPJ1(); i1<getPosXPJ1() + 15; i1++)
  {
  for(j1 = getPosYPJ1();  j1<getPosYPJ1() + 20; j1++)
   {
   if (i1 ==  sX && j1 == sY) 
          {
    Affichepion(3);  
          }
  }
  }
 
  }
 
document.onclick=Bougerectangle;
</script>

La fonction Affiche(x) est à Affiche(2) et donc en principe quand on clique sur le rectangle, ce dernier se déplace d'une case.
Par contre ce exercice a été fait correctement en java.

Cordialement.
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362 -
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Commenter la réponse de 100genial100
Signaler Commenter la réponse de jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362
0
Merci
, en fait j'ai crée une petite fonction en javascript qui me récupère les coordonnées de la souris et je voudrais que quand on clique sur un rectangle de petite dimension, ce dernier se déplace d'une unité
...
Et tes rectangles... c'est quoi ? ... des éléments HTML ?
Tu pourrais nous en dire un peu plus ???

Surtout que le code que tu nous as donné.. semble faire appel à d'autres fonctions
(getPosXPJ1() ,getPosYPJ1() , Affichepion(3)...) que tu ne nous as pas donné...!!!!




Commenter la réponse de jordane45
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
Bonjour jordane45,

Excuse moi, c'est vrai j'ai pas été complet dans l'annonce, voici le code complet, je voudrai qu'en cliquant sur un carré jaune il saute d'une case à la suivante: 

<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script src="canvas.js"></script>

<script>
var ctx
var posXPJ1
var posYPJ1
var X
var Y
var N
var i1,j1
function initialiser(){
contexte = document.getElementById('monCanvas').getContext('2d')
}

function plateformeludonic(){
contexte.beginPath()

contexte.fillStyle = 'white'; 
contexte.fillRect(110,101,100,115);
contexte.strokeRect(120,108,30,35);//cadre interieur noir (cadre jaune)
contexte.strokeRect(170,108,30,35);
contexte.strokeRect(120,175,30,35);
contexte.strokeRect(170,175,30,35);

contexte.lineWidth = 1 ; 
contexte.stroke();
}


function Affichepion(N){
 
 switch (N)
    { 
      case 0 :
        {
         posXPJ1 = 128; 
         posYPJ1 = 115;                
        }
              
         break ;
          
        case 1 :
              
          {
              posXPJ1 = 178;
              posYPJ1 = 115;
          } 
          
          break ;
            
         case 2 :
              
          {           
              posXPJ1 = 178; 
              posYPJ1 = 182;              
          }
          
          break ;
             
         case 3 :       
                       
          {           
              posXPJ1 = 127;
              posYPJ1 = 182;              
          }
         
          break ;
             
          case 4 : 
                       
          {           
              posXPJ1 = 247; 
              posYPJ1 = 212;              
          }
          
          break ;
          
         }
  
}

function getPosXPJ1(){
   return posXPJ1;
}

function getPosYPJ1(){
   return posYPJ1;
}

function Deplacepion(X,Y){
 contexte.beginPath()
 
contexte.fillStyle = 'yellow';//pion jaune_1
contexte.fillRect(X,Y,15,20);
contexte.strokeRect(X,Y,15,20);
 
 contexte.lineWidth = 1 ; 
 contexte.stroke();
}

function Bougepion(e) {
 
 sX = e.pageX;
 sY = e.pageY;
 
 for(i1 = getPosXPJ1(); i1<getPosXPJ1() + 15; i1++)
  {
  for(j1 = getPosYPJ1();  j1<getPosYPJ1() + 20; j1++)
   {
   if (i1 ==  sX && j1 == sY) 
          {
    Affichepion(3);  
          }
  }
  }
 
  }
 
document.onclick=Bougepion;
</script>

</head>
<body onload =
'initialiser();
plateformeludonic();
Affichepion(0);
Deplacepion(getPosXPJ1(),getPosYPJ1());
Bougepion(e)'>

<canvas id='monCanvas' width='600px' height=600px'>
</canvas>
</body>
</html>


EDIT : Ajout des balises de code (encore !! ) !
jordane.
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362 -
Dis donc..... ça fait plusieurs fois que je te demande d' UTILISER LES BALISES DE CODE !

Donc... merci d' EDITER ton message et de les mettre !!!!!!!!

Pour rappel :
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362 -
Ah.. et puis.... ce serait bien aussi de nous donner le fichier:
"canvas.js"

...; où au moins ..de nous dire où le trouver .....
Commenter la réponse de 100genial100
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
Stp que je reprenne l'envoi du code? mais est-ce qu'un bout de code va te renvoyer au contexte du problème?
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362 -
Ben.. disons que pour essayer de comprendre ton code et pour pouvoir le tester.... il nous faut toutes les billes.......
Commenter la réponse de 100genial100
Signaler Commenter la réponse de jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362
0
Merci
Pour ce qui est de ton souci...
je pense déjà que tu as un souci avec le switch....
c'est quoi ces accolades que tu as mis dans les CASE ?? 

 switch (N)
    { 
      case 0 :
        {
         posXPJ1 = 128; 
         posYPJ1 = 115;                
        }
              
         break ;


La syntaxe c'est : 
 switch (N)
    { 
      case 0 :
         posXPJ1 = 128; 
         posYPJ1 = 115;                             
         break ;

Signaler Commenter la réponse de 100genial100
100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
 -
Bonjour jordane45,

Ce code fonctionne à moitié, la syntaxe avec le switch est bien faite seulement que l'action de la souris n'est pas prise en compte lors du clique sur le rectangle.

Le break ne doit pas figurer dans le case comme vous l'avez fais sinon les coordonnées du rectangle ne seront pas incrémentées et donc votre rectangle ne fera pas de mouvement (l'illusion du mvt), il restera sur place.

Cordialement.
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362 -
Le break ne doit pas figurer dans le case comme vous l'avez

.... je n'ai jamais vu une autre syntaxe que celle que je t'ai donné...
http://www.w3schools.com/js/js_switch.asp

Je ne sais pas où tu as trouvé celle là.. mais mon navigateur m'indique des erreurs si j'essai de l'utiliser !!!



On en revient à ma première remarque.... comment veux tu qu'on teste ton code... si on a pas TOUTES les fonctions que tu peux y utiliser....
Que contient ton fichier canvas.js ???
Commenter la réponse de jordane45
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
J'essai de suivre tes indications
Mon code est en dessous: 



<html>
<head>
<title>Test</title>
<script src="canvas.js"></script>

<script>
var ctx
var posXPJ1
var posYPJ1
var X
var Y
var N
var i1,j1

function initialiser(){
contexte = document.getElementById('monCanvas').getContext('2d')
}

    function plateformeludonic(){
      contexte.beginPath()

      contexte.fillStyle = 'white'; 
      contexte.fillRect(110,101,100,115);
      contexte.strokeRect(120,108,30,35);//cadre interieur noir (cadre jaune)
      contexte.strokeRect(170,108,30,35);
      contexte.strokeRect(120,175,30,35);
      contexte.strokeRect(170,175,30,35);

      contexte.lineWidth = 1 ; 
      contexte.stroke();
   }


   function Affichepion(N){
	
	switch (N)
    { 
      case 0 :
        {
         posXPJ1 = 128; 
         posYPJ1 = 115;                
        }
              
         break ;
          
        case 1 :
              
          {
              posXPJ1 = 178;
              posYPJ1 = 115;
          } 
          
          break ;
            
         case 2 :
              
          {           
              posXPJ1 = 178; 
              posYPJ1 = 182;              
          }
          
          break ;
             
         case 3 :       
                       
          {           
              posXPJ1 = 127;
              posYPJ1 = 182;              
          }
         
          break ;
             
          case 4 : 
                       
          {           
              posXPJ1 = 247; 
              posYPJ1 = 212;              
          }
          
          break ;
          
         }
		
}



     function getPosXPJ1()
      {
	      return posXPJ1;
      }

         function getPosYPJ1()
          {
	        return posYPJ1;
          }

      function Deplacepion(X,Y)
        {
	   contexte.beginPath()
	
           contexte.fillStyle = 'yellow';//pion jaune_1
           contexte.fillRect(X,Y,15,20);
           contexte.strokeRect(X,Y,15,20);
	
	   contexte.lineWidth = 1 ; 
	   contexte.stroke();
       }

    function Bougepion(e) 
    {
	
	sX = e.pageX;
	sY = e.pageY;
	
	for(i1 = getPosXPJ1(); i1<getPosXPJ1() + 15; i1++)
	 {
	        for(j1 = getPosYPJ1();  j1<getPosYPJ1() + 20; j1++)
                  {
		     if (i1 ==  sX && j1 == sY) 
                       {
			 Affichepion(3);		
                       }
                  }
	 }
	
    }
	
                      document.onclick=Bougepion;
                     </script>
                   </head>
          <body onload =
      'initialiser();
    plateformeludonic();
  Affichepion(0);
 Deplacepion(getPosXPJ1(),getPosYPJ1());
Bougepion(e)'>

<canvas id='monCanvas' width='600px' height=600px'>
</canvas>
</body>
</html>


J'espère que cette fois ça va!!
Signaler Commenter la réponse de jordane45
jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362 -
Oui bravo... tu as réussi à poster du code en utilisant la coloration syntaxique....

Bon.. c'est une bonne chose.
Maintenant tu sauras le faire lorsque tu poseras tes nouvelles questions...

Mais bon.. entre temps je t'ai aussi répondu concernant ton éventuel BUG dans ton code...
http://codes-sources.commentcamarche.net/forum/affich-10035338-deplacer-un-rectangle-en-javascipt#11
Commenter la réponse de 100genial100
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
je voudrai qu'en cliquant sur le carré jaune il saute d'une case à la suivante. Les fonctions "Affiche", "Déplace" et "Bouge" pion servent à cela.

Par contre ce exercice a été fait avec succès en java mais j'ai du mal à transposer cela dans une applet, si tu connais quelqu'un qui s'y connait merci de m'en parler.

Cordialement.
Commenter la réponse de 100genial100
Signaler Commenter la réponse de jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362
0
Merci
Voici le code modifié...

Je ne peux pas le tester dans sa totalité n'ayant pas le fichier canva.js....

J'ai ajouté des "cosole.log" afin de voir ce qui se passe pendant le fonctionnement du code... 


<html>
<head>
<title>Test</title>
<script src="canvas.js"></script>

<script>
var ctx
var posXPJ1
var posYPJ1
var X
var Y
var N
var i1,j1

function initialiser(){
console.log("initialisation");
contexte = document.getElementById('monCanvas').getContext('2d')
}

function plateformeludonic(){
      contexte.beginPath()
      contexte.fillStyle = 'white'; 
      contexte.fillRect(110,101,100,115);
      contexte.strokeRect(120,108,30,35);//cadre interieur noir (cadre jaune)
      contexte.strokeRect(170,108,30,35);
      contexte.strokeRect(120,175,30,35);
      contexte.strokeRect(170,175,30,35);

      contexte.lineWidth = 1 ; 
      contexte.stroke();
   }


   function Affichepion(N){
	console.log("Affiche Pion :"+N);
	switch (N)
    { 
      case 0 :
         posXPJ1 = 128; 
         posYPJ1 = 115;                            
         break ;
          
      case 1 :
          posXPJ1 = 178;
          posYPJ1 = 115;
          break ;
            
      case 2 :
		  posXPJ1 = 178; 
          posYPJ1 = 182;                      
          break ;
             
      case 3 :       
          posXPJ1 = 127;
          posYPJ1 = 182;              
          break ;
             
      case 4 : 
          posXPJ1 = 247; 
          posYPJ1 = 212;              
          break ;
    }
	console.log("posXPJ1 =" + posXPJ1);
	console.log("posYPJ1 =" + posYPJ1);
}



function getPosXPJ1() {
    return posXPJ1;
 }

function getPosYPJ1() {
  return posYPJ1;
 }

 function Deplacepion(X,Y) {
  console.log("Deplacepion X :"+X + "  Y:"+Y);
  contexte.beginPath()
  contexte.fillStyle = 'yellow';//pion jaune_1
  contexte.fillRect(X,Y,15,20);
  contexte.strokeRect(X,Y,15,20);
  contexte.lineWidth = 1 ; 
  contexte.stroke();
 }

function Bougepion(e) {
	console.log("Bougepion");
	sX = e.pageX;
	sY = e.pageY;
	console.log(e);

	for(i1 = getPosXPJ1(); i1<getPosXPJ1() + 15; i1++){
		for(j1 = getPosYPJ1();  j1<getPosYPJ1() + 20; j1++){
		   console.log("i1 = " + i1 + " sX="+sX + "| j1=" + j1 + " sY="+sY);
		   if (i1 ==  sX && j1 == sY){
         	 Affichepion(3);		
           }
        }
	}
	
 }
	
document.onclick=Bougepion;
</script>
</head>
 <body onload ='initialiser();plateformeludonic(); Affichepion(0);Deplacepion(getPosXPJ1(),getPosYPJ1());Bougepion(e)'>

<canvas id='monCanvas' width='600px' height=600px'>
</canvas>
</body>
</html>



Commenter la réponse de jordane45
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
Bonsoir jordane45,

Je ne comprend rien à ton code, qu'est-ce qu'il est censé faire?, mon problème c'est que les actions de la souris ne sont pas prises en compte par le programme de telle sorte qu'en cliquant sur un rectangle jaune, il se déplace d'une unité. Normalement puisque: 


 if (i1 ==  sX && j1 == sY){
         	 Affichepion(3);		
           }


En principe en cliquant sur le rectangle jaune de la première case, ce dernier doit se déplacer de deux cases et se retrouver à la deuxième ligne et deuxième colonne.
Mon code fonction puisque j'arrive à le tester seulement les actions de la souris ne sont pas encore prises en compte.

Cordialement.
Commenter la réponse de 100genial100
Signaler Commenter la réponse de jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362
0
Merci
Bon...
On ne vas pas s' en sortir comme ça. ..
Donnes nous le contenu de ton fichier canvas !

Quand à la prise en compte de la souris. ..mon code (le tien corrigé) le fait très bien !
Bref... arrête de nous dire ce que tu veux obtenir (on avais compris à force que tu nous le répète) et donne nous ce qu'on te demande. ...

Commenter la réponse de jordane45
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
Bonjour jordane45,

C'est tout le fichier canvas que je t'ai donné!
S'il te plait on va faire simple, conçois un petit programme en JS qui me permettra de déplacer sur une ligne un petit carré ou petit cercle (de la taille de l'exemple que j'ai donné) qui se déplace d'un pas à chaque fois que l'on clique dessus.

Merci jordane45.
Commenter la réponse de 100genial100
Signaler Commenter la réponse de jordane45
Messages postés
24610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 février 2019
 362
0
Merci
Bon.... vu que je n'aime pas laisser une discussion sans avoir fourni de réponse... voilà :


Tu as oublié 3 choses dans TON code :
1 - Les coordonnées de la souris sont celles du DOCUMENT.. et non celles sur le Canvas...

2 - Tu n'efface pas le précédent rectangle

3 - Tu n'affiche pas le nouveau...


Voici un code qui fait ce que tu demandes....
(Normalement j'aurais du te laisser chercher !!... mais bon..)

A toi maintenant de l'améliorer selon tes besoins. 

<html>


<style>

#myDiv{
 border-width:1px;
 border-style:solid;
 border-color:black;
 }
</style>

<body>
<script type="text/javascript">
function initialiser(){
console.log("initialisation");
contexte = document.getElementById('monCanvas').getContext('2d')
}

function plateformeludonic(){
      contexte.beginPath()
      contexte.fillStyle = 'white'; 
      contexte.fillRect(110,101,100,115);
      contexte.strokeRect(120,108,30,35);//cadre interieur noir (cadre jaune)
      contexte.strokeRect(170,108,30,35);
      contexte.strokeRect(120,175,30,35);
      contexte.strokeRect(170,175,30,35);

      contexte.lineWidth = 1 ; 
      contexte.stroke();
   }

     function Affichepion(N){
	console.log("Affiche Pion :"+N);
	switch (N)
    { 
      case 0 :
         posXPJ1 = 128; 
         posYPJ1 = 115;                            
         break ;
          
      case 1 :
          posXPJ1 = 178;
          posYPJ1 = 115;
          break ;
            
      case 2 :
		  posXPJ1 = 178; 
          posYPJ1 = 182;                      
          break ;
             
      case 3 :       
          posXPJ1 = 127;
          posYPJ1 = 182;              
          break ;
             
      case 4 : 
          posXPJ1 = 247; 
          posYPJ1 = 212;              
          break ;
    }
	console.log("posXPJ1 =" + posXPJ1);
	console.log("posYPJ1 =" + posYPJ1);
}



function getPosXPJ1() {
    return posXPJ1;
 }

function getPosYPJ1() {
  return posYPJ1;
 }
 function Deplacepion(X,Y) {
  console.log("Deplacepion X :"+X + "  Y:"+Y);
  contexte.beginPath()
  contexte.fillStyle = 'yellow';//pion jaune_1
  contexte.fillRect(X,Y,15,20);
  contexte.strokeRect(X,Y,15,20);
  contexte.lineWidth = 1 ; 
  contexte.stroke();
 }
 
 
 
function Bougepion(sX,sY) {
	console.log("Bougepion");
	console.log (" --- > sX = " + sX + " sY="+sY);
	console.log (" --- > getPosXPJ1 = " + getPosXPJ1() + " getPosYPJ1="+getPosYPJ1());
	if (sX>=getPosXPJ1() && sX<=getPosXPJ1()+15 && sY>=getPosYPJ1() && sY<=getPosYPJ1()+15){
			 contexte.clearRect(getPosXPJ1(),getPosYPJ1(),15,20);
         	 Affichepion(3);
			 Deplacepion(getPosXPJ1(),getPosYPJ1());	
           }
        
 }
 
 function moveRect(e){
    console.log(e);
	var x;
	var y;
	var gcanevas = document.getElementById('monCanvas');
	if (e.pageX || e.pageY) { 
	  x = e.pageX;
	  y = e.pageY;
	}
	else { 
	  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
	  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
	} 
	x -= gcanevas.offsetLeft;
	y -= gcanevas.offsetTop;
	console.log(" x= "+x+"  Y="+y);
	Bougepion(x,y);
 }

</script>

<center>
<div id="myDiv" style="width:400px">
	<canvas id='monCanvas' width='200px' height=400px'>
	</canvas>
	<script type="text/javascript">
	initialiser();
	plateformeludonic();
	Affichepion(0);
	Deplacepion(getPosXPJ1(),getPosYPJ1());
	document.onclick = moveRect;
	
	</script>
</div>
</center>
</body>
</html>



PS: Merci de penser à marquer la discussion en RESOLU ( lien se trouvant en haut... sous le titre de ta question).

Signaler Commenter la réponse de 100genial100
100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
 -
Félicitation Jordane45!
Merci,
Commenter la réponse de jordane45
Signaler Commenter la réponse de 100genial100
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Dernière intervention
5 novembre 2014
0
Merci
Bonjour Jordane45,

Tu as du constater un long moment d'absence, c'est pour des raison de santé, je ne peux dons plus fournir le même rendement, je voudrais te faire une proposition: je te propose 500 dollars pour m'aider à intégrer le module dont tu m'a apporté ton aide dans un projet beaucoup plus général. Si tu es d'accord contacte moi.
Stp, c'est urgent.
Commenter la réponse de 100genial100

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.