Animation JS Test

**Twodwo** · 17/01/2014, 21h44

Bonjour, bonsoir,

�tant un grand d�butant en JavaScript (j'ai commenc� cette apr�s-midi

)
Je suis d�j� coinc� x)

Je vous explique, pr�f�rant faire des tests avec ce qui me plait plut�t que de suivre des tutoriels, j'ai commenc� � vouloir faire un petit jeu ou l'on incarnerais un petit personnage qui se baladerais et qui tirerais des fleurs qui se posereais sur une map vierge de base. Euh... Ca doit �tre tr�s clair... Mais en gros on incarne un fleuriste

Donc j'essaye pour commencer de faire une animation de marche.

Donc j'ai chop� un sprite d'un petit personnage (rien d�exceptionnelle) pour ce qui connaisse RPG maker.

Donc le truc c'est qu'il est en 3 temps, un position avec la jambe gauche devant (1), une sans jambe devant (2), et une troisi�me avec la jambe droite devant (3).

Donc voulant faire les choses bien, mon animation vas �tre en quatre temps: 2, 1, 2 , 3.

Voil� mon code html:

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
<article>
	<h1>Animation avec le javascript</h1>
	<script type="text/javascript" src="animationtest1.js"></script>
	<img src="images/couche_transparent.png" id="joueur" onload="animationJoueur()">
</article>

Et voil� mon code Javascript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function animationJoueur()
{
	var joueur = document.getElementById("joueur");
	joueur.style.background = "url(images/perso001.png) 64px 128px";
	joueur.style.width = "32px";
	joueur.style.height = "32px";
	var marcheAnimJoueur1 = joueur.style.backgroundPosition = "32px 128px";
	var marcheAnimJoueur2 = joueur.style.backgroundPosition = "64px 128px";
	var marcheAnimJoueur3 = joueur.style.backgroundPosition = "96px 128px";
	var timer;
	var tempsMarche = 1;
	function animationJoueurMarche()
	{
		if(tempsMarche == 1)
		{
			joueur = marcheAnimJoueur2;
			tempsMarche = 2;
			return;
		}
		if(tempsMarche == 2)
		{
			joueur = marcheAnimJoueur1;
			tempsMarche = 3;
			return;
		}
		if(tempsMarche == 3)
		{
			joueur = marcheAnimJoueur2;
			tempsMarche = 4;
			return;
		}
		if(tempsMarche == 4)
		{
			joueur = marcheAnimJoueur3;
			tempsMarche = 1;
			return;
		}
		return;
	}
	timer = setInterval(animationJoueurMarche,150);
}

Alors pour tout vous dire, �a marche pas

En �crivant ses lignes, je pense avoir trouv� la solution oO'

Faudrait-il pas s�parer le:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

timer = setInterval(animationJoueurMarche,150);

et le mettre compl�tement hors du code??

... FAUX !

Bon j'ai encore besoin de votre aide alors ^^

Merci d'avance

Edit:

Essayant de trouver d'o� vient le probl�me, j'ai mis:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

alert("Bouh!");

ici ->

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
if(tempsMarche == 1)
{
	joueur = marcheAnimJoueur2;
	tempsMarche = 2;
	alert("bouh!");
	return;
}

Soit sur le premier 'if' de mon animation...

Et l� surprise, je me met l' "alert" en boucle !
J'en conclu que c'est bien:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

timer = setInterval(animationJoueurMarche,150);

qui me pose probl�me... What?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

tempsMarche = 2;

Reprendrait-il tout mon script depuis le d�but?? Pourtant je lui demande juste la fonction : animationJoueurMarche

J'dois vous avouez que je suis un peu perdu x)

En faite il fait pire que �a, j'en ai mis un dans le deuxi�me 'if' il s'affiche en boucle apr�s le premier "bouh !"

J'vais essayer d�emboiter mes "if" pour voir si �a change quelque chose.
Met c'est bizarre vue que j'ai un "return"...

**SylvainPV** · 17/01/2014, 22h59

Le 150 dans le setInterval, �a signifie que le code s'ex�cute toutes les 150 millisecondes. Et comme tu boucles sur les valeurs 1-2-3-4, rien d'�tonnant � ce que la bo�te d'alerte s'affiche en boucle (toutes les 600 millisecondes dans ton cas).

Il me semble que tu as oubli� l'essentiel dans ton code : tu n'utilises nulle part ta variable tempsMarche ! Il faut mettre � jour la propri�t� backgroundImage de ton �l�ment si tu veux esp�rer voir ton animation

Au passage, petite entr�e de la FAQ utile pour bien d�marrer :
http://javascript.developpez.com/faq...syntaxe#Erreur

**Twodwo** · 17/01/2014, 23h30

Merci beaucoup gr�ce � toi, j'y est vue plus clair dans mon code

Et du coup maintenant, �a marche!

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function animationJoueur()
{
	var joueur = document.getElementById("joueur");
 
 
	joueur.style.background = "url(images/perso001.png) 64px 128px";
 
	joueur.style.width = "32px";
	joueur.style.height = "32px";
 
	var timer;
 
	var tempsMarche = 1;
 
	function animationJoueurMarche()
	{
 
 
		if(tempsMarche == 1)
		{
			joueur.style.backgroundPosition = "64px 128px";
			tempsMarche = 2;
			return;
		}
 
		if(tempsMarche == 2)
		{
			joueur.style.backgroundPosition = "32px 128px";
			tempsMarche = 3;
			return;
		}
 
		if(tempsMarche == 3)
		{
			joueur.style.backgroundPosition = "64px 128px";
			tempsMarche = 4;
			return;
		}
 
		if(tempsMarche == 4)
		{
			joueur.style.backgroundPosition = "96px 128px";
			tempsMarche = 1;
			return;
		}
 
	}
 
 
 
	timer = setInterval(animationJoueurMarche,300);
 
}

La solution est que j'avais trop voulu raccourcir mais ligne du ben �a donn� n'importe quoi xD

Il faut mettre � jour la propri�t� backgroundImage de ton �l�ment si tu veux esp�rer voir ton animation

C'est cette petite phrase qui a fait le tilt dans ma t�te

**Watilin** · 18/01/2014, 01h50

Le probl�me d'alert c'est qu'elle est synchrone : le script attend que l'utilisateur clique sur Ok avant de continuer� Pour �viter ce probl�me, utilise une des m�thodes de la console, par exemple console.log.