Animation avec javascript

**lolaalol** · 12/12/2012, 18h29

J'ai un exercice à faire en html5, je dois faire déplacer un ovni dans un fond d'écran aléatoirement. Mon problème est quand je fais ma boucle qui va faire déplacer mon ovni, il n'y a plus rien qui s'affiche dans ma page web.

voici mon code, peut-être que c'est la boucle infinie qui fait tout plenter ?

voici le code qui doit faire déplacer l'ovni :

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
while(true)
		{
 
			var dt = new Date();
			dt.setTime(dt.getTime() + 500);
			while (new Date().getTime() < dt.getTime());
 
			if(Math.floor((Math.random()* 1))) > 0)
			{
				if(xx + 5 < MAXLARGEUR)
					xx = xx + 5;
			}
			else
			{
				if(xx - 5 > 0)
					xx = xx - 5;
			}
 
			if(Math.floor((Math.random()* 1))) > 0)
			{
				if(yy + 5 < MAXHAUTEUR)
					yy = yy + 5;
			}
			else
			{
				if(yy - 5 > 0)
					yy = yy - 5;
			}
 
			ctx.drawImage(img,xx,yy);
		}

voici tout le code

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
	<head>
		<title>Exercice Html5 et css3</title>
	</head>
<body>
	<canvas id="MonCanVas" width="250" height="350"></canvas>
	<script>
 
		var xx = 30;
		var yy = 30;
		var MAXLARGEUR = 250;
		var MAXHAUTEUR = 350;
		var i = 0;
		var j = 0;
		var h = 115;
		var l = 250;
		var y = 0;
		var x = 0;
		var img = new Image();
		img.src = "images/ovni.png";
 
		var c = document.getElementById("MonCanVas");
		var ctx = c.getContext("2d");
		var grd = ctx.createLinearGradient(0,0,0,350);
 
		grd.addColorStop(0,"black");
		grd.addColorStop(1,"royalblue");
 
		ctx.fillStyle=grd;
		ctx.fillRect(0,0,250,350);
		ctx.fillStyle="#FFFFFF";
 
		while(i < 3)
		{
			while(j < 2)
			{
				y = Math.floor((Math.random()* (h - ( h - 114) + 1)) + (h - 114));
				x = Math.floor((Math.random()* (250 - 1 + 1))+1);
				ctx.beginPath();
				ctx.arc(x,y,Math.floor((Math.random()* (3 - 1 + 1))+1),0,2*Math.PI);
				ctx.fill();
				j = j + 1;
			}
			j = 0;
			h = h + 115;
			i = i + 1;
		}
 
		while(true)
		{
 
			var dt = new Date();
			dt.setTime(dt.getTime() + 500);
			while (new Date().getTime() < dt.getTime());
 
			if(Math.floor((Math.random()* 1))) > 0)
			{
				if(xx + 5 < MAXLARGEUR)
					xx = xx + 5;
			}
			else
			{
				if(xx - 5 > 0)
					xx = xx - 5;
			}
 
			if(Math.floor((Math.random()* 1))) > 0)
			{
				if(yy + 5 < MAXHAUTEUR)
					yy = yy + 5;
			}
			else
			{
				if(yy - 5 > 0)
					yy = yy - 5;
			}
 
			ctx.drawImage(img,xx,yy);
		}
	</script>
</body>
</html>

**NoSmoking** · 12/12/2012, 18h39

Bonjour,
il te faut utiliser la méthode setTimeout ou setInterval pour permettre le redraw de ton canvas.

**arnogues** · 12/12/2012, 21h16

Envoyé par NoSmoking

Bonjour,
il te faut utiliser la méthode setTimeout ou setInterval pour permettre le redraw de ton canvas.

non requestAnimationFrame

**NoSmoking** · 12/12/2012, 22h06

Envoyé par arnogues

non requestAnimationFrame

tout à fait autant prendre de bonnes habitudes tout de suite même si setTimeout est encore plus universel, mais nul doute que window.requestAnimationFrame ne tardera pas à le devenir.

Animation avec javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager