Javascript & canvas

Question

Bonjour à tous,

Suite à mon précédent topic, j'aimerais ajouter d'autres étapes sur l'évolution de mes aliens.
Je recherche l'alien le plus proche du sol dans mon canvas en fonction de sa 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 un tableau aliens[] qui contient la liste de mes aliens, une fonction pour afficher 
mes aliens ds mon canvas: affiche_aliens() et une fonction alien_le_plus_bas() pour afficher l'alien le plus bas du sol et l'afficher d'une couleur dfférente.


var aliens = [     { x:28,  y:28,  bras_en_bas:true, taille:[], position:[], couleur:[] },    { x:127, y:127, bras_en_bas:true, taille:[], position:[], couleur:[] },    ...];// affiche tous les aliens connus, le contenu du tableau aliens[]function affiche_aliens () {     for ( var i = 0; i < aliens.length; ++i ) {        affiche_alien(aliens);    }    var alien = alien_le_plus_bas();    if (alien.y === ymax) {        alien.y = document.getElementById('canvas').style = 'blue';    }} // 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;    }    ...}// retourne l'alien le plus basfunction 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;}

Mais, je n'arrive pas à identifier mon alien le plus bas et lui donner une couleur différente des autres.

Merci par avance!

@karamel · Answer

bonjour

en supposant qu'il y a un tableau contenant la position en hauteur de chaques elements et qu'il soit synchronise avec un tableau contenant une reference a chaques elements

var plus_bas=0
var index=0

for (var i = 0;i<tableau_avec_position_h.length; i++){
   
 if(tableau_avec_position_h.[i]>plus_bas){
  plus_bas= tableau_avec_position_h.[i] 
          index = i
 }
}

if(tableau_avec_les_elements[index]>la_position_dans_le_canvas_desiré){
  
le code a executer
 }
 
rien ne sert de courir il faut partir a point.
cours Forest cours !

dinolam81 · Answer

Bonjour kazma,

Merci encore de me répondre, ms j'aimerais savoir là ou je dois appeler ma fonction alien_le_plus_bas() et la dernière condition que tu m'as proposé.

A+!

@karamel · Answer

pour moi le mieux serait que tu integre le contenue de la fonction dans celle qui positionne les alliens a l'interieur de la boucle l'avantage c'est que tu boucle qu'une seule fois
 
cela devrait ressemblé a ceci


function affiche_aliens () {

index = 0;
       var ymax = 0

for ( var i = 0; i < aliens.length; ++i ) {
        affiche_alien(aliens);

if (aliens[i].y > ymax) {
            ymax = aliens[i].y;
            index = i;
        }
    }
var alien=aliens[index]
alert(alien)
}

rien ne sert de courir il faut partir a point.
cours Forest cours !

dinolam · Answer

Bonjour kazma,

J'ai réussit à identifier mon alien le plus bas et lui donner une couleur grâce à cette méthode.
C-à-d que je cherche mon alien leader avant.

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';  }   // [...]}

dinolam · Answer

Maintenant, je veux faire en sorte qu'une fois un alien touche le sol, que le jeu s'arrête, c-à-d que tous les aliens s'immobilisent mais tout en restant afficher au sol. J'ai procédé de cette façon ms je n'ai pas le résultat escompté:

var animation;// Pour chaque alien connufunction 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) {	   	clearInterval(animation);	}} // L'alien que l'on animefunction animate_alien (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.y + 8*unit) >= hauteur - 100) {         alien.y = hauteur - (alien.y + 8*unit) - 100;					        alien.vitesse = vitesse_aleatoire();    }				     affiche_alien(alien, alien_le_plus_bas()); }// Dessine le solfunction sol () {       context.fillStyle = "red";       context.fillRect(0, 300, 600, 100);}// Fonction d'initialisationfunction 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);	sol();	}

Merci par avance!

@karamel · Answer

bonjour

essai en mettant une condition  dans la fonction animate_alien qui teste si la variable arret_jeu est a true ou false il faudrai qussi mettre cette variable en globale

if (!arret_jeu) {
	   	efface_alien(alien);
	}

dinolam · Answer

Bonjour,

J'ai essayé ton idée mais ça ne marche pas.

dinolam · Answer

Bonjour Kazma,
J'ai trouvé une solution à propos de ma question du 29 Déc.
J'ai un autre souci, j'envie quand je clic sur un alien qu'il disparaît et un autre réapparaît en haut à sa place. J'ai procédé de cette façon:

var disparait = null;// Pour chaque alien connufunction animate_aliens () {    var leader = alien_le_plus_bas();   var disparait = false;       for ( var i = 0, e = aliens.length; i < e; ++i ) {        disparait = animate_alien(aliens[i], leader) || disparait;    }     if (disparait) {     clearInterval(disparait);     efface_alien(disparait);    }} // L'alien que l'on animefunction animate_alien (alien, leader) {      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) {       alien.y = 0;        alien.vitesse = vitesse_aleatoire();    }         affiche_alien(alien, leader); } // Gère clicfunction gere_clic (e) {        var cx = e.pageX - canvas.offsetLeft;        var cy = e.pageY - canvas.offsetTop; }   // Fonction d'initialisationfunction 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); disparait = canvas.addEventListener('click', gere_clic, false);}

Merci par avance!

Javascript & canvas

8 réponses

Votre réponse

Discussions similaires