Boucle For en Javascript

Sujet résolu

24 septembre 2018 à 12:04:32

Hey !

J'ai un code avec un carré et un cercle.

Le cercle doit bouger tout seul d'un angle à l'autre à partir de la variable "e".

J'arrive à le faire en modifiant manuellement la variable "e" mais je n'arrive pas à utiliser l'incrémentation for ou autre.

Voici le code :

window.onload = function()                       
{
	{
		var canvas = document.getElementById('mon_canvas');	
			if(!canvas)
			{
				alert("Impossible de recuperer le canvas");
				return;
			}
		var context = canvas.getContext('2d');
			if(!context)
			{
				alert("Impossible de recuperer le context du canvas");
				return;
			}
		var myInterval = setInterval(animate, 1000/1);	
		
		var x=10;	
		var y=10;	
		var a=1;	
		var b=1;	
		var W=300;	
		var H=300;  
		var R=10;   

		var e=1;
	}

switch(e)
	{
		case(e=1):
			x=10;
			y=10;
			break;
		case(e=2):
			x=290;
			y=10;
			break;
		case(e=3):
			x=290;
			y=290;
			break;
		case(e=4):
			x=10;
			y=290;
			break;
	}
			
function animate()
	{	   
	// Rectangle
		context.fillStyle = "rgb(99, 8, 4)"; 
		context.fillRect(0, 0, W, H);
	// Balle
		context.beginPath();
		context.fillStyle = "rgb(255, 255, 0)"; 
		context.arc(x,y,R, 0, Math.PI*2); 
		context.fill();					 
		context.closePath();
  	

	}
}

et l'HTML pour ceux qui veulent essayer :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>JavaMesCouilles</title>
    <script src="balle.js"></script>
	</head>
	<body>
		<canvas id="mon_canvas" width="300" height="300"></canvas>
	</body>
</html>

Le principe serait d'ajouter +1 à chaque case mais je n'y arrive pas..

Merci d'aider un pauvre débutant en galère

Je suis tout, et rien.

GabRay

24 septembre 2018 à 13:41:01

Bonjour, je n'ai pas compris ou est-ce que tu veux ajouter une boucle ?

ox223252

24 septembre 2018 à 16:55:01

c'est relativement simple :

setInterval ( function ( )
{
    animate ( );
    x += 10;
    y += 10;
}, 300);

tu avais juste oublié de changer x et y, mais pas besoin d'avoir de boucle

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

SpaceIn

24 septembre 2018 à 17:18:08

J'ajouterais que pour ce que tu veux faire, il est conseillé d'utiliser requestAnimationFrame à la place de setInterval :

https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame

MrWarso

25 septembre 2018 à 13:26:36

ox223252 a écrit:

c'est relativement simple :
setInterval ( function ( )
{
    animate ( );
    x += 10;
    y += 10;
}, 300);
tu avais juste oublié de changer x et y, mais pas besoin d'avoir de boucle

Merci mais du coup je ne comprend pas où je dois mettre ceci, ton code permet bien de bouger d'un angle à l'autre mon rond automatiquement ?

Je suis tout, et rien.

ox223252

25 septembre 2018 à 14:30:00

oui et non ici l'animation va se déplacer du haut à gauche vers le bas à droite sans jamais s'arrêter, il faut modifier la gestion de x et y pour pouvoir faire exactement ce que tu veux (ici c'est juste pour l'exemple).

Quand à savoir tu peux le placer juste après annimate().

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

MrWarso

26 septembre 2018 à 8:53:52

Avec ce code ma balle bouge en diagonal de 10 en 10 mais j'arrive pas à la faire aller d'un angle à l'autre :/

edit : Mince j'avais mal lu, alors oui j'ai bien comprit comment ça fonctionnait mais comment l'arrêter pour la faire partir dans un autre sens ?

-
Edité par MrWarso 26 septembre 2018 à 9:08:58

Je suis tout, et rien.

ox223252

26 septembre 2018 à 12:04:17

as tu déjà fais console.log( canvas ) ? ça te donne plein de petit truc tel que offsetTop / width / height / ...

var sens = 1;
setInterval ( function ( )
{
    animate ( );
    x += 10 * sens;
    y += 10 * sens;

    if ( x >= canvas.width )
    {
        sens = -1;
    }

    if ( x <= 0 )
    {
        sens = 1;
    }
}, 300);

avec un truc de ce style tu peut t'en sortir

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

MrWarso

10 octobre 2018 à 8:21:05

Je comprend bien ton programme, j'arrive à faire ce que je veux avec le x mais le y ne veut pas suivre mes instructions comme si il se re définissait tout seul à "y=290"

Je suis tout, et rien.

ox223252

10 octobre 2018 à 10:01:56

montre ton code car vu comme ça c'est pas possible (j'entend une variable ne change pas toute seule de valeur

)

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub