1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

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

Signaler
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
 -
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
 -
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.
A voir également:

15 réponses

Réponse 1 / 15
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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.

Réponse 2 / 15
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
Bonjour,

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


Signaler
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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/
Réponse 3 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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
Réponse 4 / 15
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
, 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é...!!!!




Réponse 5 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
Ah.. et puis.... ce serait bien aussi de nous donner le fichier:
"canvas.js"

...; où au moins ..de nous dire où le trouver .....
Réponse 6 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
Ben.. disons que pour essayer de comprendre ton code et pour pouvoir le tester.... il nous faut toutes les billes.......
Réponse 7 / 15
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
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
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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 ???
Réponse 8 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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
Réponse 9 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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.
Réponse 10 / 15
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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>



Réponse 11 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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.
Réponse 12 / 15
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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. ...

Réponse 13 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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.
Réponse 14 / 15
Messages postés
32518
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
 348
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
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
Félicitation Jordane45!
Merci,
Réponse 15 / 15
Messages postés
12
Date d'inscription
mardi 16 septembre 2014
Statut
Membre
Dernière intervention
5 novembre 2014
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.
Répondre Posez votre question