Discussion :

[mOscar007]

Bonjour,

Je reviens vers vous suite à mon précédent topic sur la réalisation du jeu Space Invaders.
Je suis arrivé à un étape ou j'aimerais quand je clique sur un alien dans mon canvas qu'il disparaisse et remonte en haut.
Pour cela, j'ai créé une fonction gere_clic() qui mes clics dans le canvas. J'arrive à récupérer les coordonnées lorsque je clique sur un alien mais le souci je n'arrive pas à faire cacher mon alien ni le faire remonter. Je vous donne un aperçu sur mes différentes fonctions gérant cette étape:

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
 
....................
 
var cache_alien = null;
 
// Cette fonction permet de réinitialiser notre canvas. Plus rien n'y est affiché.
function efface_alien (alien) {
    context.clearRect(alien.x, alien.y, 11*unit, 8*unit);
}
 
// Pour chaque alien connu
function animate_aliens () { 
    var leader = alien_le_plus_bas();
    var dispa = false;	
 
    for ( var i = 0, e = aliens.length; i < e; ++i ) { 
        dispa = animate_alien(aliens[i], leader) || dispa; 
    } 
 
    if (dispa) {
    	efface_alien(cache_alien);
    }
 
    animate_alien(aliens[i], leader);
} 
 
 // L'alien que l'on anime
function animate_alien (alien, leader) { 
	//var clic_jeu = gere_clic();
	var cache_jeu = false;
 
        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 (cache_alien) { 
	       alien.y = 0;
	       cache_jeu = true;
	       alien.vitesse = vitesse_aleatoire();
	}
 
        affiche_alien(alien, leader); 
	return cache_jeu;
}
 
// Gère clic
function gere_clic (e) {
       var i, alien;
       // "this" est l'élément html sur lequel on clique, ici le canvas
       var box = this.getBoundingClientRect();
      // e est l'événement généré par le clic
       var x_clic = e.clientX - box.left;
       var y_clic = e.clientY - box.top;
 
      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))) {
 
		efface_alien(alien[i]);
		aliens[i].y = 0;
		efface_alien(aliens[i]);
	   }
      }
}
 
// Fonction d'initialisation
function initialisations () {
    ...............
 
    setInterval('animate_aliens();', 200);
    cache_alien = canvas.addEventListener('click', gere_clic, false);
}

[NoSmoking]

Bonjour,

J'arrive à récupérer les coordonnées lorsque je clique sur un alien mais le souci je n'arrive pas à faire cacher mon alien ni le faire remonter.

pas sûr d'avoir bien saisi ton soucis.

Remarques :
- dans ta fonction gere_clic tu peux utiliser directement layerX et layerY

Code :

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

1
2
3
4
5
// Gère clic
function gere_clic (e) {
  var i, alien;
  var x_clic = e.layerX;
  var y_clic = e.layerY;

- dans cette même fonction tu as

Code :

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

1
2
3
efface_alien(alien[i]);
aliens[i].y = 0;
efface_alien(aliens[i]);

alien[i] n'existe pas, pourquoi ne pas utiliser directement alien.x dans la boucle ?

[mOscar007]

Re NoSmoking,

Merci d'avoir pris le temps de me répondre.
En fait mon objectif est quand je clique sur un alien, celui-ci disparaît et un autre apparaît en haut pour le remplacer.
Comme c'est une boucle, les autres aliens continuent normalement leur chemin tant qu'ils n'ont pas reçu de clique.
Une fois qu'un alien arrive au sol, il disparaît et réapparaît automatiquement en haut à la même place, c'est pourquoi
il y a cette ligne de code: alien.y = 0; . Mais celui sur lequel j'ai cliqué, quand il disparaît, en fonction de sa position dans
la boucle, il doit réapparaître en haut à la même place vu qu'il atteigne pas le sol au moment du clique.

Mais avec la modification que tu m'as apporté, quand je clique sur un alien, il s'arrête au lieu de disparaître et automatiquement
un autre vient le remplacer. Hors, les autres aliens ne continuent pas leur mouvement c-à-d qu'ils ne réapparaissent plus en haut.
C'est comme si la boucle se termine. Ce n'est pas ce que j'envie de faire.
Je ne sais pas si je suis claire ou pas?

NB: J'ai un tableau contenant +sieurs aliens dans mon canvas qui descendent et bouclent verticalement. ILs ont des vitesses aléatoires, quand un alien disparaît en bas, il réapparaisse en haut. Je veux au moment de leur mouvement, quand je clique sur un alien, qu'il disparaisse et réapparaisse en haut.

Concernant ta question: aliens[i] n'existe pas, je n'ai bien compris, je n'ai pas de souci avec aliens vu que mon tableau est initialisé tout au début de mon code. Je te mets le code de mon tableau d'aliens et de comment j'affiche ces derniers.

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
 
<body onload="initialisations();">
 
<center>
	<canvas id="canvas"></canvas>
</center>
 
var largeur = 600;
var hauteur = 400;
var canvas;
var context;
var unit = 3; 
var cache_alien = 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()},
     .............
];
 
// affiche tous les aliens connus, le contenu du tableau aliens[]
function affiche_aliens (leader) { 			    
	for ( var i = 0; i < aliens.length; ++i) {
   		affiche_alien(aliens[i], leader);
   	}
}
 
// affiche un seul alien, celui passé en argument de la fonction 'affiche_alien'
function affiche_alien (alien, leader) {
 
	context.fillRect(alien.x + 2*unit, alien.y + 2*unit, 7*unit, unit);
 
	context.fillRect(alien.x + 1*unit, alien.y + 3*unit, unit, 2*unit);
	context.fillRect(alien.x + 9*unit, alien.y + 3*unit, unit, 2*unit);
 
	context.fillRect(alien.x + 2*unit, alien.y, unit, unit);
	context.fillRect(alien.x + 8*unit, alien.y, unit, unit);
 
	context.fillRect(alien.x + 2*unit, alien.y + 2*unit, unit, 5*unit);
	context.fillRect(alien.x + 8*unit, alien.y + 2*unit, unit, 5*unit);
 
	context.fillRect(alien.x + 3*unit, alien.y + 1*unit, unit, 2*unit);
	context.fillRect(alien.x + 7*unit, alien.y + 1*unit, unit, 2*unit);
 
	context.fillRect(alien.x + 4*unit, alien.y + 2*unit, 3*unit, 2*unit);
 
	context.fillRect(alien.x + 3*unit, alien.y + 4*unit, 5*unit, 2*unit);
 
	context.fillRect(alien.x + 3*unit, alien.y + 7*unit, 2*unit, unit);
	context.fillRect(alien.x + 6*unit, alien.y + 7*unit, 2*unit, unit);
}
</body>

[Golgotha]

Bonjour,

ça serait possible d'avoir le script complet ?

j'aime pas aider si je ne peux pas tester.

[NoSmoking]

En fait mon objectif est quand je clique sur un alien, celui-ci disparaît et un autre apparaît en haut pour le remplacer.

en fait c'est le même que tu replaces en haut en jouant simplement sur sa position Y, il te faut donc juste l'effacer de sa position.

Mais avec la modification que tu m'as apporté,...

je n'ai pourtant rien modifié

Concernant ta question: aliens[i] n'existe pas, je n'ai bien compris,...

dans ton code le s n'existe pas.

on en reste à

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function gere_clic(e) {
  var i, alien,
    x_clic = e.layerX,
    y_clic = e.layerY,
    nb = aliens.length;
 
  for (i = 0; i < nb; i++) {
    alien = aliens[i];
    if ((x_clic >= alien.x) && (x_clic <= (alien.x + alien_largeur)) && (y_clic >= alien.y) && (y_clic <= (alien.y + alien_hauteur))) {
      efface_alien(alien);
      alien.y = 0;
    }
  }
}

[mOscar007]

Re NoSmoking,

Merci beaucoup pour ton aide ça marche très bien comme je veux.

Pour répondre à Golgotha, on a résolu le problème, je te dirai à la prochaine.

Je reviendrai pour d'autres questions.

A bientôt!