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 cercleTu plaisantes j'espère...?!!
<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>
, 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é...
<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>
switch (N) { case 0 : { posXPJ1 = 128; posYPJ1 = 115; } break ;
switch (N) { case 0 : posXPJ1 = 128; posYPJ1 = 115; break ;
Le break ne doit pas figurer dans le case comme vous l'avez
<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>
<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>
if (i1 == sX && j1 == sY){
Affichepion(3);
}
<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>
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.