Bonjour je voudrais savoir si il est possible d'augmenter le " y" de la méthode objet.translate(x, y) à partir d'une image par le biais d'une boucle for si oui pouvez-vous me guider sur le chemin à prendre merci beaucoup.

Translate permet de déplacer le contexte quand on dessine (bouger ton crayon) mais il existe 3 fonctions pour dessiner des images dans un canvas dont 2 qui spécifient la position et la taille de l'image. Il suffit de stocker la valeur "y" dans une variable et de l'utiliser quand on dessine, pas besoin de translate.

En ce qui concerne l'image, tu peux récupérer la taille réelle via ton image ou bien utiliser la valeur de la taille affichée.

let image = new Image();
image.src = "truc.png";
let ctx = canvas.getContext("2d");
let dx = 0;
let dy = 0;
let sx = 0;
let sy = 0;
let s_hauteur = image.height;
let s_largeur = image.width;
let d_hauteur = 200;
let d_largeur = 100;
let bordure = 1;

for (let i = 0; i < 10; i++) {
  ctx.drawImage(image, dx, dy);
  ctx.drawImage(image, dx, dy, d_largeur, d_hauteur);
  ctx.drawImage(image, sx, sy, s_largeur, s_hauteur, dx, dy, d_largeur, d_hauteur);
  dy = dy + d_hauteur + bordure;
}

Okay l'image se dupli sur toute la hauteur mais comment je pourrai faire pour que ça soit "animé" comme un tire dans un jeu tel space invaders ??

-
Edité par Baba_prog 13 juin 2019 à 11:41:32

Tu utilise la 3ème fonction sur une image qui contient toute ton animation comme celle ci dessous : 

Tu utilise les paramètres sx, sy, s_largeur et s_hauteur pour découper le morceau que tu veux.

Par exemple, sur l'exemple du dessus s_largeur et s_hauteur correspond à 1/4 de la largeur et 1/4 de la hauteur de l'image

Dans ta boucle de jeu, tu mets un compteur pour le temps et tu l'utilise pour sélectionner quelle morceau d'image doit être affiché. (tu modifie sx en fonction du temps et tu modifie sy en fonction de la direction du personnage déplacé.

Cherche "sprite" et "sprite map" pour plus d'information.

-
Edité par Benevolar 14 juin 2019 à 17:18:55

Ok merci bcp