Comment on affiche aleatoirement un ensemble d'aliens

Version imprimable

Bonjour tous le monde,

Je suis mené à faire un travail qui comporte plusieurs phases, dont voici l'essentiel :
1. Création d'un canvas (le dessiner) qui contient un alien
2. faire défiler cet alien verticalement, le faire disparaître une fois arrivé en bas de mon canvas et le faire réapparaître en haut du canvas
3. On généralise les étapes précédentes pour obtenir plusieurs aliens qui descendent et bouclent verticalement.
4.Il s'agit à cette étape de repérer le leader chez les aliens, en l'occurrence l'alien le plus proche du sol. Une fois identifié, cet alien doit être différencié, par exemple en le faisant apparaître d'une couleur différente des autres.
5.Dessiner le sol de la planète. Un alien ne doit plus boucler verticalement mais s'arrêter lorsqu'il touche le sol. À cet instant, le jeu doit prendre fin, en particulier tous les aliens doivent s'immobiliser.
6.Utilisation de la souris par le joueur afin de détruire les liens qui défilent, cela fait le disparaître et en même temps un autre identique apparaît en haut.

Jusqu'à maintenant, j'ai réussi à faire les deux premières étapes, mais je n'arrive pas à faire les autres étapes c'est-à-dire à partir de la 3ème étape.
Voici le code des deux premières étapes :
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Alien</title> <script> /*Défition des variables pour le canvas */ var context; var canvas; var unit =10; var x = 100; var y = 10; function efface_alien () { context.clearRect(x,y,11*unit,8*unit); } /*Fonction qui affiche l'alien dans le canevas */ function affiche_alien () { context.fillRect(x+2*unit,y,unit,unit); context.fillRect(x+3*unit,y+1*unit,unit,unit); context.fillRect(x+7*unit,y+1*unit,unit,unit); context.fillRect(x+2*unit,y+2*unit,7*unit,unit,unit); context.fillRect(x+1*unit,y+3*unit,unit,unit); context.fillRect(x+2*unit,y+3*unit,unit,unit); context.fillRect(x+4*unit,y+3*unit,unit,unit); context.fillRect(x+5*unit,y+3*unit,unit,unit); context.fillRect(x+6*unit,y+3*unit,unit,unit); context.fillRect(x+8*unit,y+3*unit,unit,unit); context.fillRect(x+9*unit,y+3*unit,unit,unit); context.fillRect(x+0*unit,y+5*unit,unit,unit); context.fillRect(x+0*unit,y+6*unit,unit,unit); context.fillRect(x+2*unit,y+5*unit,unit,unit); context.fillRect(x+2*unit,y+6*unit,unit,unit); context.fillRect(x+8*unit,y+5*unit,unit,unit); context.fillRect(x+8*unit,y+6*unit,unit,unit); context.fillRect(x+8*unit,y,unit,unit); context.fillRect(x,y+4*unit,11*unit,unit); context.fillRect(x+10*unit,y+6*unit,unit,unit); context.fillRect(x+10*unit,y+5*unit,unit,unit); } /*Affichage de l'alien qui bouge verticalement */ function bouge_alien () { efface_alien(); y = y + 20; if (y > 600) { y=10; } affiche_alien(); } function initialisations () { canvas = document.getElementById('world'); context = canvas.getContext ("2d"); setInterval('bouge_alien();',100); } </script> </head> <body onload="initialisations();"> <canvas id="world" width="600" height="400" style="border: 1px solid #000"> </canvas> </body> </html>
Merci pour votre aide et vos explications qui seront les bienvenues !
A très bientôt

23/01/2013, 19h36
SylvainPV

Ca me parait être un bon exemple pour commencer la programmation objet en Javascript. Tu fais une classe Alien et tu settes un x aléatoire pour chaque alien.

Je n'ai pas de bon tuto de POO en Javascript sous la main, mais en guise d'exemple j'ai ce bout de code assez simple où j'utilise 3 classes imbriquées entre elles : http://jsdo.it/sylvain.pollet.villard/mJ6W

Je n'avance pas du tout

Bonjour,

J'ai essayé de me débrouiller afin de résoudre au moins la 3ème étape en ajoutant des tableaux mais pas moyen.
Voici le code mis à jour :

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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Alien</title>
<script>
/*Défition des variables pour le canvas */
var context;
var canvas;
 
/*var unit = new Array (5,2,3,6,4);*/
/*var unit=2;
var x = [1];
var y = 10; */
var x = new Array (1,2,3,4,5,6,7,8);
   x[1];
   x[2];
   x[3];
   x[4];
   x[5];
   x[6];
   x[7];
 
   var y = new Array (1,2,3,4,5,6,7,8);
   y[1];
   y[2];
   y[3];
   y[4];
   y[5];
   y[6];
   y[7];
 
function efface_alien (i) {
	for (var j=0 ; j<x.length; j++) {
 
	context.clearRect(x[i],y[i],11*unit,8*unit);
	}
}
 
function bouge_alien () {
    for (var num=0; num<x.length; num++) {    
        efface_alien();
        y[i]=y[i]+10;
        if (y[i]>500) {
            y[i]=0;
        }
        affiche_alien();
     }
}
 
 
/*Fonction qui affiche l'alien dans le canevas */
function affiche_alien (i) {
 
	context.fillRect(x+2*unit,y,unit,unit);
	context.fillRect(x+3*unit,y+1*unit,unit,unit);
	context.fillRect(x+7*unit,y+1*unit,unit,unit);
	context.fillRect(x+2*unit,y+2*unit,7*unit,unit,unit);
	context.fillRect(x+1*unit,y+3*unit,unit,unit);
	context.fillRect(x+2*unit,y+3*unit,unit,unit);
	context.fillRect(x+4*unit,y+3*unit,unit,unit);
	context.fillRect(x+5*unit,y+3*unit,unit,unit);
	context.fillRect(x+6*unit,y+3*unit,unit,unit);
	context.fillRect(x+8*unit,y+3*unit,unit,unit);
	context.fillRect(x+9*unit,y+3*unit,unit,unit);
	context.fillRect(x+0*unit,y+5*unit,unit,unit);
	context.fillRect(x+0*unit,y+6*unit,unit,unit);
	context.fillRect(x+2*unit,y+5*unit,unit,unit);
	context.fillRect(x+2*unit,y+6*unit,unit,unit);
	context.fillRect(x+8*unit,y+5*unit,unit,unit);
	context.fillRect(x+8*unit,y+6*unit,unit,unit);
	context.fillRect(x+8*unit,y,unit,unit);
	context.fillRect(x,y+4*unit,11*unit,unit);
	context.fillRect(x+10*unit,y+6*unit,unit,unit);
	context.fillRect(x+10*unit,y+5*unit,unit,unit);
 
 
}
/*Affichage de l'alien qui bouge verticalement */
function bouge_alien () {
    for (var num=0; num<x.length; num++) {    
        efface_alien(i);
        y[i]=y[i]+10;
        if (y[i]>500) {
            y[i]=0;
        }
        affiche_alien(i);
     }
}
 
function initialisations () {
	canvas = document.getElementById('world');
	context = canvas.getContext ("2d");
 
	setInterval('bouge_alien();',100);
}
 
</script>
</head>
 
<body onload="initialisations();">
 
<canvas id="world" width="600" height="400" style="border: 1px solid #000">
 
</canvas>
 
</html>

Y a t-il quelqu'un qui peut m'aider SVPPPPPPPPPPPPPPP !

Citation:

en ajoutant des tableaux

Tu parles de ça
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var x = new Array (1,2,3,4,5,6,7,8); x[1]; x[2]; x[3]; x[4]; x[5]; x[6]; x[7]; var y = new Array (1,2,3,4,5,6,7,8); y[1]; y[2]; y[3]; y[4]; y[5]; y[6]; y[7];
8O

Ca sert à quoi au juste ? :koi:

Bonjour,
Je vous remercie pour votre réponse.
Je m'explique :

Voilà comment j'ai procédé pour déplacer les aliens.

Voici ma fonction bouge_alien :
Code:

1 2 3 4 5 6 7 8 function bouge_alien () { efface_alien(); y=y+10; if (y>500) { y=0; } affiche_alien(); }
Ca marche nickel pour 1 seul alien. Mais maintenant qu'on en a plusieurs, on a dit qu'on définissait non pas un seul y, mais un tableau avec des valeurs de y. Comme ça on va pouvoir gérer indépendamment chaque alien, plutôt que de changer le y de tous les aliens à la fois. C'est pas forcément indispensable à ce stade, mais au moins ça me permet de placer mes aliens à des hauteurs différentes, et donc de ne pas avoir une ligne d'aliens qui descendent !
De même, on a forcément un tableau de x, puisque mes aliens ne vont pas se trouver avec la même abscisse (ils se retrouveraient tous les uns sur les autres).

Donc x et y tout courts n'existent plus : je suis obligée d'utiliser :
x[1] (c'est-à-dire l'abscisse du 1er alien)
x[2]
etc. jusqu'au dernier alien.

C'est pour ça qu'on va mettre une boucle for :
Code:

1 2 3 4 5 6 7 8 9 10 function bouge_alien () { for (var num=0; num<x.length; num++) { efface_alien(); y[i]=y[i]+10; if (y[i]>500) { y[i]=0; } affiche_alien(); } }
Là on vient de demander que pour chaque alien (c'est-à-dire jusqu'à ce qu'on arrive au bout du tableau d'abscisse), on commence par effacer, puis que l'on recrée l'alien un peu plus bas, ou en haut si on est arrivé au bas du canvas.

A ce stade, ça doit presque marcher ! Il reste un détail.
j'ai compris que comme on remplaçait x et y par x[i] et y[i], il faut que chaque fonction qui se sert de x[i] et y[i] sache à quel i on est rendu, c'est-à-dire à quel tour de la boucle for on est arrivé.

C'est pour ça qu'on va ajouter un paramètre à la fonction affiche_alien. Rien de plus simple : tu changes la ligne

Code:

function affiche_alien() {

en

Code:

function affiche_alien(i) {

Pareil pour la fonction efface_alien, qui se sert de x et y, devenus x[i] et y[i]. je remplace :

Code:

function efface_alien () {

par

Code:

function efface_alien (i) {

en rajoutant une boucle for dedans

Dans cette même fonction, j'ai remplacé :

Code:

context.clearRect(x,y,11*unit, 8*unit);

par

Code:

context.clearRect(x[i],y[i],11*unit,8*unit);

Et au final, j'adapate ta fonction bouge_alien qui devient :
Code:

1 2 3 4 5 6 7 8 9 10 function bouge_alien () { for (var num=0; num<x.length; num++) { efface_alien(i); y[i]=y[i]+10; if (y[i]>500) { y[i]=0; } affiche_alien(i); } }
Normalement avec ça j'ai de quoi faire une flottille d'aliens qui bouge, descend et remonte en haut de l'écran !

j'espère que j'ai bien expliqué ce que je voulais faire !
Je pense que j'ai un soucis au niveau des tableaux (leur déclaration n'est pas correcte)

Merci d'avance !

25/01/2013, 11h59
aladin1984

ON se débrouille tout seul

Bonjour à tous,

Vu que je n'ai pas eu d'aide, je me suis débrouillé tout seul pour mon problème. Un peu étonné parce que j'ai l'habitude d'avoir des réponses, des explications de la part des gens du site.
Je précise quand même que je suis un débutant ...

Merci les gens !
25/01/2013, 12h29
vermine

Parfait, n'hésitez pas à partager la solution. Le partage, ça va dans les deux sens. ;)

Et voilà mon résultat

Salut,

Vu que notre cher site se base sur le partage et l'entraide, je vous propose mon travail ...
Dans l'espoir d'avoir des réponses quand on aura besoin d'aide :)

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
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
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Alien</title>
<h1 align="center" style="word-wrap:break-word">Une flotille d'aliens</h1>
<hr>
 
</head>
<script>
/*Défition des variables pour le canvas */
var canvas;
var context;
 
/*var unit = new Array (5,2,3,6,4);*/
var unit = 4 ;
 
var tableX = new Array (50, 150, 250, 350, 450, 500); 
var tableY = new Array (35, 10, 60, 100, 50, 10);
var  colors = ['#000000','#008000','#FF0000','#000080','#FFFF00','#D2691E'];
 
 
 /*var table = new Array ();*/
function efface_alien (i) {
	for (var j=0 ; j<tableX.length; j++) {
	context.clearRect(tableX[i],tableY[i],11*unit,8*unit);
	}
}
 
 
/*Fonction qui affiche l'alien dans le canevas */
function affiche_aliens (i) {
	context.fillStyle = colors[i];//appelle le tableau de couleurs défini pour chaque alien
	context.fillRect(tableX[i]+2*unit,tableY[i],unit,unit);
	context.fillRect(tableX[i]+3*unit,tableY[i]+1*unit,unit,unit);
	context.fillRect(tableX[i]+7*unit,tableY[i]+1*unit,unit,unit);
	context.fillRect(tableX[i]+2*unit,tableY[i]+2*unit,7*unit,unit,unit);
	context.fillRect(tableX[i]+1*unit,tableY[i]+3*unit,unit,unit);
	context.fillRect(tableX[i]+2*unit,tableY[i]+3*unit,unit,unit);
	context.fillRect(tableX[i]+4*unit,tableY[i]+3*unit,unit,unit);
	context.fillRect(tableX[i]+5*unit,tableY[i]+3*unit,unit,unit);
	context.fillRect(tableX[i]+6*unit,tableY[i]+3*unit,unit,unit);
	context.fillRect(tableX[i]+8*unit,tableY[i]+3*unit,unit,unit);
	context.fillRect(tableX[i]+9*unit,tableY[i]+3*unit,unit,unit);
	context.fillRect(tableX[i]+0*unit,tableY[i]+5*unit,unit,unit);
	context.fillRect(tableX[i]+0*unit,tableY[i]+6*unit,unit,unit);
	context.fillRect(tableX[i]+2*unit,tableY[i]+5*unit,unit,unit);
	context.fillRect(tableX[i]+2*unit,tableY[i]+6*unit,unit,unit);
	context.fillRect(tableX[i]+8*unit,tableY[i]+5*unit,unit,unit);
	context.fillRect(tableX[i]+8*unit,tableY[i]+6*unit,unit,unit);
	context.fillRect(tableX[i]+8*unit,tableY[i],unit,unit);
	context.fillRect(tableX[i],tableY[i]+4*unit,11*unit,unit);
	context.fillRect(tableX[i]+10*unit,tableY[i]+6*unit,unit,unit);
	context.fillRect(tableX[i]+10*unit,tableY[i]+5*unit,unit,unit);
 
 
}
 
 
 
function bouge_aliens () {
    for(var i=0; i<tableX.length; i++) {  
		//pour chaque, on efface puis affiche chaque alien  i parcourt chacun des aliens en leur donnant un numéro  
        efface_alien(i);
        tableY[i]= tableY[i]+10;
 
		if (tableY[i]>500) {
			tableY[i]=0;
		}
        affiche_aliens(i);
     }
}
 
 
function initialisations () {
	canvas = document.getElementById("world");
	context = canvas.getContext ("2d");
 
	for (var i=0 ; i<tableX.length; i++) {
		affiche_aliens(i);
		}
	setInterval('bouge_aliens();',200);
}
 
</script>
</head>
 
<body onload="initialisations();">
<canvas id="world" width="600" height="400" style="border: 2px solid #000" >
</canvas>
 
</body>
</html>

25/01/2013, 18h58
SylvainPV

Citation:

Envoyé par aladin1984

Vu que je n'ai pas eu d'aide, je me suis débrouillé tout seul pour mon problème. Un peu étonné parce que j'ai l'habitude d'avoir des réponses, des explications de la part des gens du site.
Je précise quand même que je suis un débutant ...

Je t'ai proposé de faire ça en objet pour te faire progresser et te simplifier la vie ensuite, tu en as décidé autrement... Débutant ou pas, il faut t'en prendre à toi-même si tu ne veux pas suivre les conseils que l'on te donne :roll: