JS & Canvas

Version imprimable

JS & Canvas

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:

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);
}

05/01/2015, 11h23
NoSmoking
Bonjour,

Citation:

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:

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:

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 ?

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:

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>

05/01/2015, 15h00
Golgotha

Bonjour,

ça serait possible d'avoir le script complet ?

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

Citation:

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.

Citation:

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

je n'ai pourtant rien modifié :koi:

Citation:

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:

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

05/01/2015, 16h41
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!