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.