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

100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 16 sept. 2014 à 14:42 - Dernière réponse : 100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention
- 5 nov. 2014 à 04:49
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

24 réponses

Meilleure réponse
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 20 sept. 2014 à 18:04
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.

Merci jordane45 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 93 internautes ce mois-ci

Commenter la réponse de jordane45
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 16 sept. 2014 à 16:25
0
Merci
Bonjour,

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


jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 16 sept. 2014 à 18:03
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
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - Modifié par jordane45 le 17/09/2014 à 16:58
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.
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 17 sept. 2014 à 16:56
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
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 17 sept. 2014 à 17:03
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
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - Modifié par jordane45 le 18/09/2014 à 12:14
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.
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 18 sept. 2014 à 12:04
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
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 18 sept. 2014 à 12:10
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
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 18 sept. 2014 à 12:12
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?
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 18 sept. 2014 à 12:14
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
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 18 sept. 2014 à 12:17
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 ;

100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 19 sept. 2014 à 12:04
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.
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 19 sept. 2014 à 14:25
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
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 18 sept. 2014 à 12:27
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!!
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 18 sept. 2014 à 12:34
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
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 18 sept. 2014 à 12:33
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
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 19 sept. 2014 à 14:42
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
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 19 sept. 2014 à 21:11
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
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 19 sept. 2014 à 21:29
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
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 20 sept. 2014 à 10:57
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
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 20 sept. 2014 à 18:56
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).

100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 20 sept. 2014 à 19:28
Félicitation Jordane45!
Merci,
Commenter la réponse de jordane45
100genial100 12 Messages postés mardi 16 septembre 2014Date d'inscription 5 novembre 2014 Dernière intervention - 5 nov. 2014 à 04:49
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

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.