Bonsoir tout le monde, j'essaye de créer un petit jeu sur canvas mais j'ai fais face à un problème que je n'arrive pas à résoudre. En gros, je veux déplacer le sprite "enemy", dont la position initiale est vers la droite du canvas, vers la gauche de ce canvas. J'ai déjà essayé plusieurs choses mais ça ne fonctionne pas .

Merci d'avance.

Bonsoir,

Déjà essayes de structurer ton code en plusieurs parties : définition des paramètres de l'animation (variables dynamiques et canvas), chargement du sprite, affichage sur le canvas et animation. Rien qu'avec ça, tu devrais avoir quatre fonctions distinctes et indépendantes.

Ensuite si tu changes X, c'est bien mais ça ne suffit pas : il faut effacer le canvas et le redessiner. Tu n'es pas en CSS ou en SVG.

J'ai créé une bibliothèque pour manipuler le canvas (entre autre), voici le lien. Ça te permet de piocher dans les fonctions qui pourraient t'être utile ; notamment clear tout en bas du bloc;

Bon courage.

Ah merci ! J'ai enfin réussi !  Le problème c'est que je ne sais pas comment effacer mon sprite à chaque fois que l'image est re-dessinée du coup ça laisse une trainée. Une astuce ?

Ce code source devrait t'aider : https://codepen.io/Yarflam/pen/bOQBXy

/* Charger une image */
function loadImg (src, callback) {
  var img = new Image();
  img.src = src;
  img.onload = function () {
    callback(img);
  };
}

/* Fonction principale */
(function Main () {
  /* Canvas */
  var cvs = document.querySelector('canvas'),
      ctx = cvs.getContext('2d');
  cvs.width = cvs.offsetWidth;
  cvs.height = cvs.offsetHeight;
  
  /* Paramètres */
  var size = 48,
      x = cvs.offsetWidth/2 - (size/2),
      y = 0,
      z = 0;
  
  /* Dessiner la scène */
  var draw = function (img) {
    /* Effacer le canvas */
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    /* Dessiner l'image */
    ctx.drawImage(
      img,
      z*size, 0, size, size,
      x, y, size, size
    );
  };
  
  /* Animer */
  loadImg('http://i.imgur.com/BX0MbP8.png', function (img) {
    window.setInterval(function () {
      draw(img);
      y = ( y + 1 ) % (cvs.height + (size/2));
      z = (z + 1) % 3;
    }, 50);
  });
})();