Discussion :

[mOscar007]

Bonjour,

Suite à mes deux précédents topic sur la réalisation d'un jeu Space Invaders, j'aimerais affranchir une étape qui me permettrait en cliquant sur un alien dans mon canvas d'afficher un compteur. Comme j'ai dessiné un sol dans mon canvas, quand un alien (le plus proche du sol = le leader) touche le sol, ils s'immobilisent tous (question qu'on a traité dans les précédents topics). Au moment ou le leader touche le sol le score s'arrête c-à-d qu'il affiche "Terminé !".

J'ai crée un fonction affiche_score() qui affiche le score dans le sol et une autre compte_score(). Mon problème, je n'arrive à afficher mon score dans le sol au moment du clic.

Vous trouverez un aperçu des ms fonctions:

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
 
.............
 
var compteur = 0;
 
// Affiche le score
function affiche_score () {
      var i, alien;
 
      for (i = 1; i < aliens.length; i++) {
	  alien = aliens[i];
	  if (cache_alien) {
	      context.fillStyle = "black";
	      context.fillText(compte_score(), 10, 50);
	  } 
 
          if ((alien.y + 8*unit) >= hauteur - 100) {
	       context.fillText("Terminé !", 10, 50);
	  }
     }
}
 
// Compte le score
function compte_score () {
	if (cache_alien) {
		compteur++;
	}
}
 
// Dessine le sol
function dessine_sol () {
     context.fillStyle = "red";
     context.fillRect(0, 300, 600, 100);
 
     affiche_score ();
}

Merci par avance!

[NoSmoking]

Bonjour,
encore des bribes de code
la méthode fillText attend en 1^er paramètre une chaine or toi tu lui passes une fonction qui ne renvoie rien, cherche l'erreur

PS : Merci de mettre des titres pertinent.

[mOscar007]

Re NoSmoking,

J'ai essayé en mettant une chaîne mais ça ne change rien.

Merci pour la modification du titre.

[NoSmoking]

La suite donc...
la méthode fillText attend en 2^éme et 3^éme paramètres des nombres correspondants aux positions x et y d'affichage, cherche l'erreur

[mOscar007]

Re NoSmoking,

J'ai modifié mon code de cette façon mais toujours pas de changement.

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
 
// Affiche le score
function affiche_score () {
	var i, alien;
 
	for (i = 1; i < aliens.length; i++) {
		alien = aliens[i];
		if (cache_alien) {
			context.fillStyle = "black";
		    	context.fillText(i+1, alien.x, alien.y);
                } 
 
		if ((alien.y + 8*unit) >= hauteur - 100) {
	         	context.fillText("Terminé !", 10, 50);
		}
	}
}
 
// Compte le score
function compte_score () {
	if (cache_alien) {
		compteur++;
	}
}

[mOscar007]

Bonjour à tous,

Suite à mon précédent topic sur la réalisation du jeu Space Invaders, j'aimerais affranchir une étape qui me permettrait en cliquant sur un alien dans mon canvas d'afficher un compteur. Pour cela, j'ai dessiné un sol dans mon canvas, j'aimerais afficher le score dans le sol.

Quand un alien (le plus proche du sol = le leader) touche le sol, ils s'immobilisent tous (question j'ai traité dans le précédent topic). Au moment ou le leader touche le sol le score s'arrête c-à-d qu'il affiche "Perdu !".

J'ai crée un fonction affiche_score() qui affiche le score. Mon problème, je n'arrive à afficher mon score dans le sol au moment du clic sur un alien avant qu'ils ne s'arrête tous au moment ou le premier touche le sol.

Vous trouverez un aperçu de mon 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
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
 
var largeur = 600;
var hauteur = 400;
var canvas;
var context;
var unit = 3;
var animation = null;
var cache_alien = null;
var score = 0;
var clic_souris = 0;
var id_interval = null;
// Tableau d'aliens
var aliens = [
    { x:28,  y:28,  bras_en_bas:true, vitesse:vitesse_aleatoire()},
    { x:127, y:107, bras_en_bas:true, vitesse:vitesse_aleatoire()},
    { x:222, y:182, bras_en_bas:true, vitesse:vitesse_aleatoire()},
];
 
// Pour chaque alien connu
function animate_aliens () {
    var leader = alien_le_plus_bas();
    var arret_jeu = false;
    var dispa = false;
 
    for ( var i = 0, e = aliens.length; i < e; ++i ) {
        dispa =  arret_jeu = animate_alien(aliens[i], leader) ||  arret_jeu || dispa;
        score = score - 1;
    }
 
    if (arret_jeu) {
        clearInterval(animation);
    }
 
    if (dispa) {
        efface_alien(cache_alien);
    }
 
    animate_alien(aliens[i], leader);
    affiche_score();
}
 
// L'alien que l'on anime
function animate_alien (alien, leader) {
    var touche_sol = false;
    var cache_jeu = false;
 
    efface_alien(alien);
 
    if ( alien == null || typeof alien != "object" ) {
        alert("animate_alien : alien n'est pas un objet");
        return;
    }
 
    alien.y += alien.vitesse*unit;
 
    if ((alien.y + 8*unit) >= hauteur - 100) {
        touche_sol = true;                 
        alien.vitesse = vitesse_aleatoire();
    }  
 
    if (cache_alien) {
        alien.y = 0;
        cache_jeu = true;
        alien.vitesse = vitesse_aleatoire();
    }  
 
    if (id_interval) {
        alien.y = 0;
        score = score + 1;
    }
 
    affiche_alien(alien, leader);
 
    return touche_sol;
    return cache_jeu;
}
 
// Dessine le sol
function dessine_sol () {
    context.fillStyle = "red";
    context.fillRect(0, 300, 600, 100);
    affiche_score ();
}
 
// Gère clic
function gere_clic (e) {
    var i, alien, ancien_leader, nouveau_leader;
    // e est l'événement généré par le clic
    var x_clic = e.layerX;
    var y_clic = e.layerY;
 
    for (i = 0; i < aliens.length; i++) {
    alien = aliens[i];
    if ((x_clic >= alien.x) && (x_clic <= (alien.x + 11*unit)) && (y_clic >= alien.y)
             && (y_clic <= (alien.y + 8*unit))) {
        ancien_leader = alien_le_plus_bas();
        efface_alien(alien);
 
          if (alien = ancien_leader) {
          score = score + 2;
          alien.y = 0;
          } else {
              score = score + 1;
          }
              clic_souris = clic_souris + 1;
     }
    }
}
 
// Affiche le score
function affiche_score () {
    var nouvelle_vitesse, s, i, alien;
 
    for (i = 0; i < aliens.length; i++) {
    alien = aliens[i];
 
    if (score < 0) {
 
        context.fillStyle = "black";
        context.fillText('Perdu !', alien.x, alien.y);
    } else if (score > 99) {
 
           context.fillStyle = "black";
           context.fillText('Gagné !', alien.x, alien.y);
    } else {
            s = 'Score: ' + score + ' (clic_souris: ' + clic_souris + ')';
 
    }
    }
 
    if ((score < 0) || (score > 99)) {
    clearInterval(animation);
    } else {
    nouvelle_vitesse = Math.max(20, vitesse - 10 * Math.floor(clic_souris/5));
 
    if (nouvelle_vitesse != vitesse) {
        vitesse = nouvelle_vitesse;
            clearInterval(animation);
    }
    }
}
 
// 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');
 
     animation = setInterval('animate_aliens();', 200);
     dessine_sol();
 
     cache_alien = canvas.addEventListener('click', gere_clic, false);
     id_interval = canvas.addEventListener('click', affiche_score, false);
}

Merci par avance!

[NoSmoking]

context.fillText(i+1, alien.x, alien.y);

ce qui veux dire que dés que tu effaces ton alien tu effaces également le texte écrit dans la zone.

Réserve toi une zone en bas de ton canvas, par exemple, pour afficher les infos ou encore tu peux le faire de façon traditionnelle en modifiant le innerHTML d'un élément extérieur.

[danielhagnoul]

Il est tard et je ne connais ni le contexte ni le premier sujet, mais je vois deux problèmes dans 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
// L'alien que l'on anime
function animate_alien (alien, leader) {

    return touche_sol;
    return cache_jeu;
}

// Gère clic
function gere_clic (e) {

          if (alien = ancien_leader) { 
      }
    }
}

[NoSmoking]

@dinolam81 : merci de rester dans la discussion et de ne pas en ouvrir une autre.