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