11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Js & Canvas méthode fillText()

Bonjour,

Suite à mon précédent 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. 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:


.............
var compteur = 0;

// Dessine le sol
function dessine_sol () {
     context.fillStyle = "red";
     context.fillRect(0, 300, 600, 100);
 
     affiche_score ();
}

// 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++;
	}
}

// Fonction d'initialisation
function initialisations () {
[.....................]				
	animation = setInterval('animate_aliens();', 200);
	dessine_sol();	

	cache_alien = canvas.addEventListener('click', gere_clic, false);
}


Merci par avance![/i]
Bonjour Parsimonhi,

Merci une fois encore de me répondre. J'ai tenu compte du code du liens dans le cas avec mes aliens et ça marche très bien.

J'ai une autre question qui me bloque depuis longtemps. En fait, j'aimerais accélérer la vitesse de mes aliens. Au moment de l’accélération, je veux que les aliens reviennent plus petits progressivement.

Mon problème est que j'ai une vitesse aléatoire qui est comprise entre une intervalle. Les aliens accélèrent et ralentissent en fonction de la valeur prise dans l’intervalle. Je ne vois pas comment dire, au moment de l’accélération, de diminuer la taille des aliens progressivement.

J'ai une fonction vitesse_aleatoire() et une autre taille_alien():


/* répresente la taille des aliens dans mon canvas (par exemple: context.fillRect(alien.x + 2*unit, alien.y + 2*unit, 7*unit, unit);) */
var unit = 7;

// Tableau d'aliens
var aliens = [ 
	{ x:28,  y:28,  bras_en_bas:true, [#red]vitesse:[/#]vitesse_aleatoire()},
	{ x:127, y:107, bras_en_bas:true, [#red] vitesse:[/#]vitesse_aleatoire()},
];

// Cherche une vitesse aléatoire
function vitesse_aleatoire () {
	// Avoir une valeur dans un interval
	var mini = 1, maxi = 5;
	return Math.floor(Math.random()*(maxi - mini)) + mini;
}

// Cherche une taille
function taille_alien() {
      var unit_mini = 1, unit_maxi = 7;
      return Math.floor(Math.random()*(unit_maxi-unit_mini))+unit_mini;
}

// L'alien que l'on anime
function animate_alien (alien, leader) { 	
               var taille = taille_alien();

	        if ( alien == null || typeof alien != "object" ) {
		       alert("animate_alien : alien n'est pas un objet");
		       return;
		}

	        efface_alien(alien);	
 
		alien.y += alien.vitesse*unit;
		if (alien.vitesse > 3) { // Valeur prise dans l'intervalle de vitesse
		    	taille.unit = taille.unit - 1; // taille diminue progressivement
	       } else {
                      taille.unit = 5; // taille normale de l'alien
               }
	       alien.vitesse = vitesse_aleatoire();
               alien.taille = taille_alien();
	}	
			 
	affiche_alien(alien, leader); 
}


Merci par avance!
Modifié par dinolam (17 Jan 2015 - 19:23)
dinolam a écrit :
Bonjour,

Suite à mon précédent 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. Au moment ou le leader touche le sol le score s'arrête c-à-d qu'il affiche &quot;Terminé !&quot;.

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:


.............
var compteur = 0;

// Dessine le sol
function dessine_sol () {
     context.fillStyle = &quot;red&quot;;
     context.fillRect(0, 300, 600, 100);
 
     affiche_score ();
}

// Affiche le score
function affiche_score () {
	var i, alien;
 
	for (i = 1; i &lt; aliens.length; i++) {
		alien = aliens[i];
		if (cache_alien) {
			context.fillStyle = &quot;black&quot;;
		    	context.fillText(i+1, alien.x, alien.y);
                } 
 
		if ((alien.y + 8*unit) &gt;= hauteur - 100) {
	         	context.fillText(&quot;Terminé !&quot;, 10, 50);
		}
	}
}
 
// Compte le score
function compte_score () {
	if (cache_alien) {
		compteur++;
	}
}

// Fonction d'initialisation
function initialisations () {
[.....................]				
	animation = setInterval('animate_aliens();', 200);
	dessine_sol();	

	cache_alien = canvas.addEventListener('click', gere_clic, false);
}


Merci par avance![/i]
Sujet clos
Aller à