11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Canvas et JS

Bonjour à tous,

J'utilise canvas et Js pour refaire le fameux dessin d'aliens du jeu Space Invader.
J'ai dessiné mes 'aliens' et je les affiche dans un tableau appelé aliens. J'utilise la
fonction animate() pour les faire descendre et boucler verticalement. Malheureusement,
je n'ai pas réussit à les faire bouger. Est-ce que quelqu’un aurait-il une idée ou une astuce?


// Mon tableau aliens
var aliens = [ 
			    { x:28,  y:28,  bras_en_bas:true },
			    { x:127, y:107, bras_en_bas:true },
			    { x:222, y:182, bras_en_bas:true },
			    { x:300, y:0, bras_en_bas:true },
			    { x:60, y:170, bras_en_bas:true },
			    { x:230, y:90, bras_en_bas:true },
			    { x:360, y:90, bras_en_bas:true }
			];

// Ma fonction pour afficher mes aliens
// affiche tous les aliens connus, le contenu du tableau aliens[]
function affiche_aliens () { 
    for ( var i = 0; i < aliens.length; ++i ) {
        affiche_alien(aliens[i]);
    }
}
 
// Ma fonction d'animation
function animate () {
				efface_aliens();

				aliens.y =  aliens.y + 11*unit;

				if (aliens.y > hauteur) {
				    aliens.y = 0;
				} 
}


Merci par avance! [/i]
Bonjour dinolam,

Tu n'avais pas besoin de refaire un topic pour ton soucis...

Je vois que tu as un peu changer ton fusil d'épaule, quant à la forme de tes coordonnées pour tes aliens, mais un problème demeure.

Dans ta fonction animate(), quand tu fais un aliens.y ça n'existe pas, il faut que tu fasses un for...in sur ton objet aliens

Sinon, si tu veux bosser que sur une variable y, il faut que tu génère la position de tous tes aliens par rapport à cette position, par exemple :
var yStart =0, 
  var aliens = [ 
    { x:28,  y:yStart+28,  bras_en_bas:true },
    { x:127, y:yStart+107, bras_en_bas:true },
    { x:222, y:yStart+182, bras_en_bas:true },
    { x:300, y:yStart, bras_en_bas:true },
    { x:60, y:yStart+170, bras_en_bas:true },
    { x:230, y:yStart+90, bras_en_bas:true },
    { x:360, y:yStart+90, bras_en_bas:true }
];

Et tu n'as plus qu'à incrémenter yStart.
Bonjour SolidSnake,

J'ai refait un nouveau topic parce que je trouve le premier n'est pas bien organisé et j'ai mis trop de code. Je n'ai pas voulu supprimer le premier sujet, c'est pour cette raison k j'ai décidé de créer un autre.

Merci une fois de plus de me répondre!

Je testerai le code que tu m'as proposé et je reviendrai pour te dire quoi.

A+
Bonjour SolidSnake,
J'ai bien réussit mon animation avec ton code.
Je te remercie bcp pour ton aide.

A bientôt!
Bonjour SolidSnake,
J'ai bien réussit mon animation avec ton code.
Je te remercie bcp pour ton aide.

A bientôt!
Modifié par dinolam (24 Dec 2014 - 01:11)
dinolam a écrit :
Bonjour à tous,

J'utilise canvas et Js pour refaire le fameux dessin d'aliens du jeu Space Invader.
J'ai dessiné mes 'aliens' et je les affiche dans un tableau appelé aliens. J'utilise la
fonction animate() pour les faire descendre et boucler verticalement. Malheureusement,
je n'ai pas réussit à les faire bouger. Est-ce que quelqu’un aurait-il une idée ou une astuce?


// Mon tableau aliens
var aliens = [ 
			    { x:28,  y:28,  bras_en_bas:true },
			    { x:127, y:107, bras_en_bas:true },
			    { x:222, y:182, bras_en_bas:true },
			    { x:300, y:0, bras_en_bas:true },
			    { x:60, y:170, bras_en_bas:true },
			    { x:230, y:90, bras_en_bas:true },
			    { x:360, y:90, bras_en_bas:true }
			];

// Ma fonction pour afficher mes aliens
// affiche tous les aliens connus, le contenu du tableau aliens[]
function affiche_aliens () { 
    for ( var i = 0; i &lt; aliens.length; ++i ) {
        affiche_alien(aliens[i]);
    }
}
 
// Ma fonction d'animation
function animate () {
				efface_aliens();

				aliens.y =  aliens.y + 11*unit;

				if (aliens.y &gt; hauteur) {
				    aliens.y = 0;
				} 
}


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