Jeux en canvas et javascript

Version imprimable

Bonjour,
Je travaille sur un jeu qui s'appelle Space Invaders que vs connaissez probablement. Mon objectif est de dessiner des "Aliens" en utilisant canvas et Javascript. Je m'aimerai animer ces aliens dans un rectangle canvas pour qu'ils se déplacent verticalement de haut en bas. Un fois que les aliens disparaissent en bas, ils réapparaissent automatiquement en haut et continuent leurs mouvements.

J'ai réussit à le faire avec un seul "Alien", mais je n'arrive pas à le faire avec plusieurs "Aliens" que j'ai crée dans un tableau en JS avec leurs coordonnées (x,y).

Je travaille en HTML5 et Javascript. Je n'utilise pas de framework. Je travaille sur le navigateur "Google Chrome" et j'utilise "Mozila" pour pour faire des tests.

Je montre mes codes dans les deux cas de figures, en espérant que quelqu'un pourrait me donner un astuce. Merci!

Code canvas et Js avec un seul "Alien":

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
<body onload="initialisations();"> 
 
<canvas id="canvas"></canvas> 
<script> 
var largeur = 600; 
var hauteur = 400; 
var canvas; 
var context; 
var x = 100; 
var y = 100; 
var unit = 7; 
var bras_en_bas = true; 
 
function affiche_alien () { 
 
if (bras_en_bas) { 
context.fillRect(x, y+4*unit, unit, 3*unit); 
context.fillRect(x+10*unit, y+4*unit, unit, 3*unit); 
bras_en_bas = false; 
} else { 
context.fillRect(x, y+1*unit, unit, 3*unit); 
context.fillRect(x+10*unit, y+1*unit, unit, 3*unit); 
bras_en_bas = true; 
} 
 
context.fillRect(x+2*unit, y+2*unit, 7*unit, unit); 
 
context.fillRect(x+1*unit, y+3*unit, unit, 2*unit); 
context.fillRect(x+9*unit, y+3*unit, unit, 2*unit); 
 
context.fillRect(x+2*unit, y, unit, unit); 
context.fillRect(x+8*unit, y, unit, unit); 
 
context.fillRect(x+2*unit, y+2*unit, unit, 5*unit); 
context.fillRect(x+8*unit, y+2*unit, unit, 5*unit); 
 
context.fillRect(x+3*unit, y+1*unit, unit, 2*unit); 
context.fillRect(x+7*unit, y+1*unit, unit, 2*unit); 
 
context.fillRect(x+4*unit, y+2*unit, 3*unit, 2*unit); 
 
context.fillRect(x+3*unit, y+4*unit, 5*unit, 2*unit); 
 
context.fillRect(x+3*unit, y+7*unit, 2*unit, unit); 
context.fillRect(x+6*unit, y+7*unit, 2*unit, unit); 
 
} 
 
function efface_alien () { 
context.clearRect(x, y, 11*unit, 8*unit); 
} 
 
function animate () { 
efface_alien(); 
 
y = y + 11*unit; 
 
if (y > hauteur) { 
y = 0; 
} 
 
affiche_alien(); 
} 
function initialisations () { 
canvas = document.getElementById('canvas'); 
// Définition taille canvas 
canvas.setAttribute('width', largeur); 
canvas.setAttribute('height', hauteur); 
 
context = canvas.getContext('2d'); 
 
var verticale = setInterval('animate();', 200); 
} 
</script> 
</body> 
 
Code canvas et Js pour pour afficher plusieur "Aliens": 
 
<body onload="initialisations();"> 
 
<canvas id="canvas"></canvas> 
<script> 
var largeur = 600; 
var hauteur = 400; 
var canvas; 
var context; 
var x = [28,127,222,300]; 
var y = [28,127,222]; 
var unit = 5; 
var bras_en_bas = true; 
 
function affiche_alien () { 
for (var i = 0; i < x.length; i++) { 
for (var j = 0; j < y.length; j++) { 
 
if (bras_en_bas) { 
context.fillRect(x[i], y[j] + 4*unit, unit, 3*unit); // Premier bras 
context.fillRect(x[i] + 10*unit, y[j] + 4*unit, unit, 3*unit); // Deuxieme bras 
bras_en_bas = false; 
} else { 
context.fillRect(x[i], y[j] + 1*unit, unit, 3*unit); // Premier pas 
context.fillRect(x[i] + 10*unit, y[j] + 1*unit, unit, 3*unit); // bras 2 
bras_en_bas = true; 
} 
 
context.fillRect(x[i] + 2*unit, y[j] + 2*unit, 7*unit, unit); 
 
context.fillRect(x[i] + 1*unit, y[j] + 3*unit, unit, 2*unit); 
context.fillRect(x[i] + 9*unit, y[j] + 3*unit, unit, 2*unit); 
 
context.fillRect(x[i] + 2*unit, y[j], unit, unit); 
context.fillRect(x[i] + 8*unit, y[j], unit, unit); 
 
context.fillRect(x[i] + 2*unit, y[j] + 2*unit, unit, 5*unit); 
context.fillRect(x[i] + 8*unit, y[j] + 2*unit, unit, 5*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 1*unit, unit, 2*unit); 
context.fillRect(x[i] + 7*unit, y[j] + 1*unit, unit, 2*unit); 
 
context.fillRect(x[i] + 4*unit, y[j] + 2*unit, 3*unit, 2*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 4*unit, 5*unit, 2*unit); 
 
context.fillRect(x[i] + 3*unit, y[j] + 7*unit, 2*unit, unit); 
context.fillRect(x[i] + 6*unit, y[j] + 7*unit, 2*unit, unit); 
} 
} 
} 
 
function efface_alien () { 
context.clearRect(x, y, 11*unit, 8*unit); 
} 
 
function animate () { 
efface_alien(); 
 
y[j] = y[j] + 11*unit; 
if (y[j] > hauteur) { 
y[j] = 0; 
} 
affiche_alien(); 
} 
 
function initialisations () { 
canvas = document.getElementById('canvas'); 
// Définition taille canvas 
canvas.setAttribute('width', largeur); 
canvas.setAttribute('height', hauteur); 
 
context = canvas.getContext('2d'); 
 
setInterval('animate();', 200); 
 
} 
</script> 
</body>

En partant du code "un seul alien" et pour démarrer, une proposition :

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
...
// à la place des tableaux x[] et y[].
// j'ai supposé que la position des bras était propre à l'alien
var aliens = [ 
    { x:28,  y:28,  bras_en_bas:true },
    { x:127, y:127, bras_en_bas:true },
    ...
];
...
// var bras_en_bas = true; // n'est plus utilisé (cf plus haut)
...
 
// ajout
// affiche tous les aliens connus, le contenu du tableau aliens[]
function affiche_aliens () { 
    for ( var i = 0; i < aliens.length; ++i ) {
        affiche_alien(aliens[i]);
    }
}
 
// modification
// affiche un seul alien, celui passé en argument de la fonction 'affiche_alien'
function affiche_alien ( alien ) {
    if (alien == null || typeof alien != "object") {
        alert("affiche_alien : alien n'est pas un objet");
        return;
    }
 
    if (alien.bras_en_bas) { 
        context.fillRect(alien.x, alien.y + 4*unit, unit, 3*unit); // Premier bras 
        ...
        alien.bras_en_bas = false;
    } else {
        ...
        alien.bras_en_bas = true;
    }
    ...
}
...

17/12/2014, 15h13
mOscar007

Bonjour Lysandro,

Je te remercie de la réponse apportée à mon sujet.
J'ai pris en compte le code que tu m'as proposé, je suis encours de modification.
Je reviendrai dès que possible en cas de dysfonctionnement ou erreurs quelconque.

Merci encore du temps consacré!
18/12/2014, 13h50
mOscar007

Jeux en canvas et javascript
Bonjour Lysandro,

J'ai testé avec ton code mais c'est toujours le statu quo. Je n'ai pas trouvé la solution à mon problème, les "aliens" ne bougent pas.
Ton code m'a permis de voir un peu plus clair dans le mien. Il m'a permis mtn de modifier indépendamment mes "aliens". Maintenant, j'ai
besoin qu'ils descendent et bouclent verticalement. S'ils touchent le bord bas, ils réapparaissent automatiquement en haut et continuent leur
mouvement.

Voilà le code de ma fonction (animate()) modifié:
Code:

1 2 3 4 5 6 7 function animate () { efface_aliens(); aliens.y = aliens.y + 11*unit; if (aliens.y > hauteur) { aliens.y = 0; } }
18/12/2014, 14h14
lysandro

J'aurais du m'expliquer un peu plus. C'était une proposition de modèle.
Puisque ton code à un seul alien fonctionne, pour passer à un code plusieurs aliens :
- tu réécris tes fonctions pour un seul alien en leur passant en argument, l'alien : l'exemple de la fonction 'affiche_alien(alien)'
- puis, tu écris de nouvelles fonctions qui s'occupent d'appeler les fonctions pour un seul alien sur tous les aliens connus : 'affiche_aliens()'.

Donc ta fonction 'animate', aurait du devenir deux fonctions : 'animate_aliens()', pour tous les aliens, et 'animate_alien(alien)', pour un seul alien, sur le même modèle.

Si ce n'est pas clair, je te donnerais un exemple avec ton code.

Si la notion d'objets (ou de prototypes) te parle, on peut aussi le programmer autrement.
18/12/2014, 17h56
mOscar007

Oui, je préfère avec un exemple.
Je n'ai pas très bien compris.
Je ne maîtrise pas bcp la notion d'objets.
Merci!

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 function animate_aliens () { for ( var i = 0, e = aliens.length; i < e; ++i ) { // pour chaque alien connu. animate_alien(aliens[i]); } } function animate_alien ( alien ) { // l'alien que l'on veut animer if ( alien == null || typeof alien != "object" ) { alert("animate_alien : alien n'est pas un objet"); return; } efface_alien(alien); alien.y = alien.y + 11*unit; if (alien.y > hauteur) { alien.y = 0; } affiche_alien(alien); } function initialisations () { canvas = document.getElementById('canvas'); // Définition taille canvas canvas.setAttribute('width', largeur); canvas.setAttribute('height', hauteur); context = canvas.getContext('2d'); setInterval(animate_aliens, 200); }
à partir de ton code pour un seul alien

edit: En fait, tu peux même réécrire ta fonction pour tous les aliens comme ça :
Code:

1 2 3 function animate_aliens () { aliens.forEach(animate_alien); }
'aliens' est ton tableau d'aliens, '.forEach' applique à chaque élément du tableau la fonction passée en argument : 'animate_alien'. Cette fonction, dans ce cas, peut avoir jusqu'à trois arguments. Qui sont dans l'ordre : ( valeur de l'élément pointé par la clef, la clef, le tableau ). Soit, par rapport à la proposition précédente : (aliens[i], i, aliens). Là, comme seul le premier argument nous intéresse, il n'y a pas d'autres changements à faire. Tu en apprendras plus, soit dans la spécification du langage : ECMAScript 5, soit (sans doute moins austère :)) dans les nombreux tutoriaux de ce site

20/12/2014, 18h25
mOscar007

Bonjour Lysandro,

J'ai appliqué tous ce que tu m'as proposé et ça marche très bien.
Je te remercie beaucoup pour ton aide.

A +!
20/12/2014, 19h10
lysandro

You're welcome.

Il ne te reste plus qu'à marquer la discussion comme résolue. Tu en ouvriras d'autres en fonction de tes besoins.

Bonjour Lysandro,

Avant de marquer la discussion, j'ai une dernière question ds cette partie.
J'aimerai paramétrer la position et la taille de mes aliens. Ils doivent aussi
avoir des caractéristiques aléatoires.

Pour cela, j'ai pensé rajouter dans mon tableau d'aliens: la taille, la position
et la couleur comme des tableaux aussi imbriqués:

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
 
var aliens = [ 
    { x:28,  y:28,  bras_en_bas:true, taille[], position[], couleur[] },
    { x:127, y:127, bras_en_bas:true, taille[], position[], couleur[] },
    ...
];
 
// Je recherche l'alien le plus proche du sol en fonction de position
// il s'agit du leader, une fois repéré, je vx qu'il change de couleur
// pour se différencier des autres
// Je vx qu'il soit rattraper par un autre alien et perde sa place de
// leader ou soit qu'il disparaît en bas de l’écran
// J'utilise une fonction qui s'appelle position_max() pour identifier l'alien
 
function position_max (alien) {
  var max = alien[0];
  var position = 0;
  for (var i = 1 ; i < alien.length ; i++) {
    if (alien[i] > max) {
      max = alien[i];
      position = i;
      // Je ne suis sûre 
      position = alien.couleur[i];
    }
  }
}

A+!

21/12/2014, 16h21
lysandro
Pour augmenter les capacités de tes aliens, tu n'es pas trop mal parti avec ça :
Citation:
Envoyé par dinolam81

Code:

1 2 3 4 5 6 var aliens = [ { x:28, y:28, bras_en_bas:true, taille[], position[], couleur[] }, { x:127, y:127, bras_en_bas:true, taille[], position[], couleur[] }, ... ];
sauf que ça s'écrit plutôt comme ça :
Code:

1 2 3 4 5 6 var aliens = [ { x:28, y:28, bras_en_bas:true, taille:[], position:[], couleur:[] }, { x:127, y:127, bras_en_bas:true, taille:[], position:[], couleur:[] }, ... ];
si taille, position et couleur sont des tableaux.

Que contiennent-ils ? Comment sont-ils initialisés ?

Pour la calcul de la position la plus basse : tu passes un argument 'alien' qui apparemment représente ton tableau d'aliens'. Je trouve ça confus, mais tant que tu t'y retrouves ... Tu utilises var max = alien[0];, si l'argument passé à ta fonction est bien ton tableau d'aliens, alors alien[0] représente le premier alien du tableau. C'est à dire un objet possédant les propriétés : { x:.., y:.., bras_en_... } ce qui veut dire, si je comprends ton intention que tu devrais plutot écrire : var ymax = alien[0].y; et modifier le reste de ton code de façon similaire.

Pour le reste de ta fonction, je ne suis pas sur de comprendre ..? je ne vois pas à quoi sert position ? pour le changement de couleur tout dépend comment tu as modifié ta fonction affiche_alien(alien) - soit tu souhaites avoir un jeu de couleurs différents pour chacun des aliens, auquel cas tu as besoin d'un tableau de ses couleurs possibles, mais tu devrais aussi avoir une propriété de l'alien genre alien.couleur que tu utiliseras dans pour dessiner ton alien, sa couleur courante. Soit tu as un jeu des couleurs possibles pour tous les aliens, et tu n'a pas besoin du tableau alien.couleurs dans chaque alien.

Oublis dans un premier temps tes couleurs, et fais fonctionner ta fonction de recherche de l'alien le plus bas. Tu rajouteras les couleurs après.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
// Je cherche l'alien le plus proche du sol et l'affiche en blue
// pour le différencier des autres
function position_alien () {
      var ymax = alien[0].y;
 
      for (var i = 1; i < alien.length ; i++) {
	    if (alien[i].y > ymax) {
	    	ymax = alien[i].y;
	    }
	    if (ymax) {
	    	context.fillStyle = 'blue';
	    }
     }
}
 
// J'appelle ma fonction position_alien() dans ma fonction
// d'initialisation, mais je ne vois pas de changement.

Code:

1 2 3 4 5 // Je cherche l'alien le plus proche du sol et l'affiche en blue // pour le différencier des autres function position_alien () { var ymax = alien[0].y; ...
Tu t'embrouilles entre le tableau de tes aliens et un alien. C'est au premier élément de ton tableau que tu souhaites accéder, donc var ymax = aliens[0].y.

Si la différence entre aliens et alien ne te saute pas aux yeux, renomme ta variable globale aliens en tableau_aliens par exemple, ou n'importe quel nom qui te permette de bien différencier ce que tu manipules.Tu as aussi la possibilité de passer en argument, de ta fonction, l'élément que tu veux manipuler. Ce que tu avais fait précédemment. Mais là aussi, les noms sont important.

Dans ta fonction, tu mélanges la recherche de l'alien le plus bas avec le dessin de cet alien. Ce n'est pas nécessairement le mieux. Tu pourrais avoir besoin de l'alien le plus bas pour d'autres raisons. Ou vouloir changer de couleur aussi l'alien le plus haut.

Il serait mieux de séparer ces deux aspects : le traitement des données de l'affichage de ces données.

Donc tu as besoin pour l'instant de connaitre l'alien le plus bas, et seulement ça. Les questions que tu dois te poser, c'est comment et dans quelle partie du code tu vas utiliser cette information (je verrais bien quelque part dans l'affichage des aliens). Ce sont les réponses à ces questions qui vont te dire ce que doit retourner ta fonction.

NB: comme cette fonction parcours l'intégralité du tableau des aliens, ce serait bien de ne l'appeler qu'une fois par affichage par exemple ...

Voilà plusieurs possibilités

1
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // retourne l'indice dans le tableau des aliens, de l'alien le plus bas function indice_alien_le_plus_bas () { var indice = 0; var ymax = aliens[indice].y; for (var i = 1; i < aliens.length ; i++) { if (aliens[i].y > ymax) { ymax = aliens[i].y; indice = i; } } return indice; } // aliens[indice_alien_le_plus_bas ()].y === ymax
2
Code:

1 2 3 4 5 6 7 8 9 10 11 12 // retourne la "position" de l'alien le plus bas function position_alien_le_plus_bas () { var ymax = aliens[0].y; for (var i = 1; i < aliens.length ; i++) { if (aliens[i].y > ymax) { ymax = aliens[i].y; } } return ymax; } // position_alien_le_plus_bas() === ymax
3
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // retourne l'alien le plus bas function alien_le_plus_bas () { var alien = aliens[0]; var ymax = alien.y; for (var i = 1; i < aliens.length ; i++) { if (aliens[i].y > ymax) { ymax = aliens[i].y; alien = aliens[i]; } } return alien; } // alien_le_plus_bas().y === ymax
3bis La version ci-dessous est équivalente à la précédente, en plus compact (ça devrait plaire à certains :D)
Code:

1 2 3 4 5 6 7 // retourne l'alien le plus bas function alien_le_plus_bas () { return aliens.reduce(function ( prevAlien, currAlien ) { return currAlien.y > prevAlien.y ? currAlien : prevAlien; } ); } // alien_le_plus_bas().y === ymax

24/12/2014, 01h08
mOscar007

Bonjour Lysandro,

J'ai utilisé la troisième méthode c-à-d code 3 (alien_le_plus_bas()),
mais je ne comprend ce que t'as mis en commentaire:

Code:

//alien_le_plus_bas().y === ymax;

.

A+
24/12/2014, 11h19
lysandro
alien_le_plus_bas() renvoie un alien qui est celui dont la composante y et égale à ymax, soit le plus bas.
Code:

1 2 var alien = alien_le_plus_bas(); //alien.y === ymax;

Bonjour Lysandro,

J'ai réussit à identifier mon alien le plus et lui donner une couleur grâce à cette méthode.
C-à-d que je cherche mon alien leader avant.

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
 
function animate_alien(alien) {
  efface_aliens(alien);
 
  // [....]
 
  affiche_alien(alien, alien_le_plus_bas());
}
 
function affiche_aliens(leader){
  for(var i=0; i<aliens.length; i++){
    affiche_alien(aliens[i], leader);
  }
}
 
function affiche_alien(alien, leader){
  // [...]
  if(alien == leader){
    context.fillStyle = 'blue';
  } else {
    context.fillStyle = 'black';
  } 
  // [...]
}

J'ai aussi dessiner un sol en bas de mon canvas que j'ai placé ds la fonction sol(), je veux faire en sorte qu'une fois un alien (leader = c'est le plus proche du sol) touche le sol, qu'ils arrêtent tous. J'ai procédé de cette façon:

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
 
// Dessine le sol
function sol () {
	context.fillStyle = "red";
	context.fillRect(0, 300, 600, 100);
}
 
// L'alien que l'on anime
function animate_alien (alien) { 
    // [...............]
 
    efface_alien(alien); 
 
    alien.y = alien.y + 11*unit; 
 
    if (alien.y >= hauteur-100) { 
        alien.y += hauteur-100;
        clearInterval(animation); 
    }
 
    affiche_alien(alien, alien_le_plus_bas()); 
}
 
// Fonction d'initialisation
function initialisations () {
	canvas = document.getElementById('canvas');
	// Définition taille canvas
	canvas.setAttribute('width', largeur);
	canvas.setAttribute('height', hauteur);
 
	context = canvas.getContext('2d');
 
	var animation = setInterval('animate_aliens();', 200);	
	sol();	
}

J'ai des aliens qui passent le sol, d'autres qui s'aarêtent.

Tu déclares ta variable animation dans ta fonction initialisations.

Code:

var animation = setInterval('animate_aliens();', 200);

Cela signifie qu'elle n'est accessible que dans cette fonction. Quand tu l'utilises dans ton autre fonction animate_alien
Code:

1 2 3 4 if (alien.y >= hauteur-100) { alien.y += hauteur-100; clearInterval(animation); }
... elle ne devrait pas être définie, mais si ton jeu s'arrête ?!
Il faut que tu remontes sa déclaration avec tes autres variables globales.

Toujours dans ta fonction animate_alien, tu calcules l'alien le plus bas. Or, cette fonction est appellée pour chaque alien, tu recalcules donc l'alien le plus bas pour chaque alien que tu animes.
Il faut déplacer ce calcul ailleurs.

Avant d'arrêter le jeu, il faudrait dessiner tous tes aliens, en corrigeant leur position si nécessaire pour qu'ils ne traversent pas le sol.

Si hauteur correspond au point le plus bas de ton sol, et que la position y d'un alien correspond au haut de l'alien alors le point le plus bas de l'alien est y+8*unit. Sauf erreur, le calcul de débordement de position devrait être :
Code:

1 2 3 if ( (alien.y+8*unit) >= hauteur ) { alien.y = hauteur-(alien.y+8*unit); }
Ci-dessous, ton code avec les aménagements
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 var animation; // ... function animate_aliens () { var leader = alien_le_plus_bas(); var arrêt_jeu = false; for ( var i = 0, e = aliens.length; i < e; ++i ) arrêt_jeu = animate_alien(alien[i],leader) || arrêt_jeu; if ( arrêt_jeu ) window.clearInterval(animation); } // L'alien que l'on anime function animate_alien ( alien, leader ) { var sol_atteint = false; // [...............] efface_alien(alien); alien.y = alien.y + 11*unit; if ( (alien.y+8*unit) >= hauteur ) { alien.y = hauteur-(alien.y+8*unit); sol_atteint = true; } affiche_alien(alien,leader); return sol_atteint; } // Fonction d'initialisation function initialisations () { canvas = document.getElementById('canvas'); // Définition taille canvas canvas.setAttribute('width', largeur); canvas.setAttribute('height', hauteur); context = canvas.getContext('2d'); sol(); animation = window.setInterval(animate_aliens,200); }
Tu as beaucoup de variables globales. Il serait intéressant, dans un deuxième temps, de les déclarer comme propriétés d'un objet jeu, comme tu l'as déjà fait avec un alien.
Code:

1 2 3 4 5 6 var spaceInvaders = { animation:null, largeur:600, hauteur:400, //... }
et modifier ton code en conséquence. Par la suite, il faudra aussi basculer tes fonctions qui deviendront des méthodes de cet objet.

Mais d'abord un jeu qui fonctionne.

edit: 30/12/2015 14:57 - me suis évidemment planté sur le calcul de débordement ...
Code:

1 2 3 4 if ( (alien.y+8*unit) >= hauteur ) { alien.y = hauteur-8*unit; sol_atteint = true; }
... mieux comme ça

28/12/2014, 18h26
mOscar007

Ça ne marche pas!
Quand les aliens touchent le sol, ils disparaissent et réapparaissent en haut.

Ce que j'ai envie de faire, c'est une fois le leader touche le sol, tous les aliens s'immobilisent.
Mais tout en restant afficher dans mon canvas.

Donc avec clearInterval() que j'utilise, elle arrête l'animation une fois que les aliens touchent le sol, mais elle arrête pas la boucle.
Il faut aussi que les aliens restent afficher.

Merci!
28/12/2014, 20h08
vangog

Bonjour,

C'est très compliqué le code que tu as fait pour afficher tes aliens, et javascript n'aime pas ça car c'est un langage très lent.

Normalement on utilise une seule ligne de code pour afficher un alien: il faut préparer les différentes images d'animation avec ton logiciel de dessin, et utiliser la méthode context2d.drawImage(), et ton programme sera beaucoup plus rapide et facile à débugger.
29/12/2014, 22h57
mOscar007

Bonjour Vangog,

Mon objectif est de dessiner à l'aide du Canvas et non pas prendre des images et les animer.
Je n'ai pas de problèmes d'affichage de mes aliens et non plus pour déboguer.

Merci qd même pour le conseil!
30/12/2014, 11h20
NoSmoking

Bonjour,

Citation:

Quand les aliens touchent le sol, ils disparaissent et réapparaissent en haut.

tu as une mauvaise gestion des bornages.

Citation:

Ce que j'ai envie de faire, c'est une fois le leader touche le sol, tous les aliens s'immobilisent.
Mais tout en restant afficher dans mon canvas.

il te faut interrompre l'affichage en fin de boucle et pas en cours, les éléments non encore dessinés ne le seront donc pas.

PS : mais bon je n'ai pas une vision globale de ce que tu as fais...
01/01/2015, 15h52
mOscar007

Bonjour,

Merci de vos réponses, j'ai réussit à trouver une solution.

A bientôt!
03/01/2015, 08h14
NoSmoking

Citation:

...j'ai réussit à trouver une solution.

et même pas une petite explication qui me semble serait appréciée par ceux qui t'ont aidé et par ceux qui te liront par la suite.

:sleep: 2015 sera peut être l'année du partage !

Re bonjour,

Excusez-moi, j'ai complètement oublié de mettre ce que j'ai fait.
J'avais l'intention de le faire ce juste que je me suis précipité.

Oui c'est vrai comme tu disais NoSmoking, j'avais un petit défaut de conception.
Mais ce n'est pas trop dérangeant, je cherche mon alien leader une fois au début
et je l'envoie à la fonction affiche_alien().
Le code ci-dessous:

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
 
var aliens = [ /*...*/ ];
var animation = null;
 
// Dessine le sol
function sol () {
    context.fillStyle = "red";
    context.fillRect(0, 300, 600, 100);
}
 
// Pour chaque alien connu
function animate_aliens () {
   var leader = alien_le_plus_bas();
   var arret_jeu = false;
 
    for ( var i = 0, e = aliens.length; i < e; ++i ) {
        arret_jeu = animate_alien(aliens[i], leader) || arret_jeu;
    }
 
    if (arret_jeu) {
        window.clearInterval(animation);
    }
}
 
// L'alien que l'on anime
function animate_alien (alien, leader) {
    var touche_sol = false;
    ...........
 
    alien.y += alien.vitesse*unit;
 
    if ((alien.y + 8*unit) >= hauteur - 100) {
        /* Plus besoin, vu que l'on arrête la boucle
            alien.y = hauteur - (alien.y + 8*unit) - 100;
        */          
        touche_sol = true;
    }  
 
    affiche_alien(alien, leader);
 
    retour touche_sol;
}
 
// Fonction d'initialisation
function initialisations () {
   // [...]            
   animation = setInterval('animate_aliens();', 200);
   sol();  
}