Jeux en canvas et javascript

**mOscar007** · 15/12/2014, 14h18

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 :

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

**lysandro** · 15/12/2014, 17h21

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

Code javascript :

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
...
// à 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;
    }
    ...
}
...

**mOscar007** · 17/12/2014, 15h13

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é!

**mOscar007** · 18/12/2014, 13h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function animate () {
	efface_aliens();
	aliens.y =  aliens.y + 11*unit;
        if (aliens.y > hauteur) {
	      aliens.y = 0;
	} 
}

**lysandro** · 18/12/2014, 14h14

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.

**mOscar007** · 18/12/2014, 17h56

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!

**lysandro** · 18/12/2014, 18h32

Code javascript :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mOscar007** · 20/12/2014, 18h25

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 +!

**lysandro** · 20/12/2014, 19h10

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.

**mOscar007** · 21/12/2014, 15h07

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 :

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
 
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+!

**lysandro** · 21/12/2014, 16h21

Pour augmenter les capacités de tes aliens, tu n'es pas trop mal parti avec ça :

Envoyé par dinolam81

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**mOscar007** · 22/12/2014, 01h12

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

**lysandro** · 22/12/2014, 12h39

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mOscar007** · 24/12/2014, 01h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

.

A+

**lysandro** · 24/12/2014, 11h19

alien_le_plus_bas() renvoie un alien qui est celui dont la composante y et égale à ymax, soit le plus bas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mOscar007** · 27/12/2014, 15h43

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 :

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
 
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';
  } 
  // [...]
}

**mOscar007** · 27/12/2014, 21h09

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 :

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

**lysandro** · 28/12/2014, 12h47

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

... mieux comme ça

**mOscar007** · 28/12/2014, 18h26

Ç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!

**vangog** · 28/12/2014, 20h08

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.

Jeux en canvas et javascript

JavaScript

Discussions similaires

Partager

Partager