Javascript & canvas

Signaler
Messages postés
9
Date d'inscription
lundi 30 décembre 2013
Statut
Membre
Dernière intervention
20 septembre 2016
-
 dinolam -
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 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;
}


Mais, je n'arrive pas à identifier mon alien le plus bas et lui donner une couleur différente des autres.

Merci par avance!

8 réponses

Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
117
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 !
Messages postés
9
Date d'inscription
lundi 30 décembre 2013
Statut
Membre
Dernière intervention
20 septembre 2016

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+!
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
117
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 !
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';
}
// [...]
}
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 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) {
clearInterval(animation);
}
}

// L'alien que l'on anime
function 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 sol
function sol () {
context.fillStyle = "red";
context.fillRect(0, 300, 600, 100);
}

// 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);
sol();
}


Merci par avance!
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
117
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);
	}

Bonjour,

J'ai essayé ton idée mais ça ne marche pas.
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 connu
function 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 anime
function 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 clic
function gere_clic (e) {
var cx = e.pageX - canvas.offsetLeft;
var cy = e.pageY - canvas.offsetTop;
}

// 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');

setInterval('animate_aliens();', 200);

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


Merci par avance!