Animation JS Test

Version imprimable

Animation JS Test

Bonjour, bonsoir,

Étant un grand débutant en JavaScript (j'ai commencé cette après-midi :roll: )
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 :D

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:

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:

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 :cry:

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

Faudrait-il pas séparer le:

Code:

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 :merci:

Edit:

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

Code:

alert("Bouh!");

ici ->
Code:

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:

timer = setInterval(animationJoueurMarche,150);

qui me pose problème... What?

Code:

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"...

17/01/2014, 22h59
SylvainPV

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 :ccool:

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

Merci beaucoup grâce à toi, j'y est vue plus clair dans mon code ;)

Et du coup maintenant, ça marche!

Code:

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

Citation:

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 :ccool:

18/01/2014, 01h50
Watilin

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.
18/01/2014, 15h00
Twodwo

Merci pour la petite astuce :ccool:
18/01/2014, 15h08
NoSmoking

Bonjour,

Citation:

Envoyé par Twodwo

Merci pour la petite astuce :ccool:

tu n'as pas du prendre le temps de regarder/lire le lien fourni par SylvainPV :aie:

Citation:

Envoyé par SylvainPV

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