We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

C'est la 2è étape de ce Gamedev Canvas tutorial. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson2.html.

Vous savez déjà comment dessiner une balle après avoir traversé l'article précédent, alors maintenant faisons la bouger. Techniquement, nous peindrons la balle sur l'écran, nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente à chaque image pour donner l'impression d'un mouvement - tout comme le fonctionnement du mouvement dans les films.

Définir une boucle Draw()

Pour garder constamment à jour le dessin du canvas sur chaque image, nous devons définir une fonction draw() exécutée en continue, avec un ensemble different de valeurs variables à chaque fois pour changer les positions des sprites, etc. Vous pouvez exécuter une fonction encore et encore à l'aide d'une fonction de synchronisation JavaScript, telle que setInterval() ou requestAnimationFrame().

Supprimez tout le JavaScript que vous avez actuellement dans votre HTML, sauf pour les deux premières lignes, et ajoutez ce qui suit ci-dessous. La fonction draw() sera exécutée dans setInterval toutes les 10 millisecondes:

function draw() {
  // drawing code
}
setInterval(draw, 10);

Grâce à la nature infinie de setInterval, la fonctiondraw() sera appelée toutes les 10 millisecondes sans arrêt, ou jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction draw() :

ctx.beginPath();
ctx.arc(50, 50, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();

Essayez votre code mis à jour maintenant — la balle devrait être repeinte sur chaque image.

Faire bouger la balle

Vous ne remarquerez pas que la balle est repeinte constamment, car elle ne bouge pas. Changeons cela. Tout d'abord, au lieu d'une position bloqué à (50,50), nous allons définir un point de départ dans la partie centrale inférieure du Canvas dans les variables appelées x et y, puis, nous les utiliserons pour définir la position dans laquelle le cercle est dessiné.

Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction draw() pour définir x et y:

var x = canvas.width/2;
var y = canvas.height-30;

Ensuite, mettez à jour la fonction  draw() pour utiliser les variables x et y dans la methode arc() , comme indiqué dans la ligne en surbrillance ci-dessous:

function draw() {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

Nous voici à la partie importante: nous voulons ajouter une valeur à  x et y après que chaque image ait été déssinée pour faire croire que la balle bouge. On définit ces valeurs comme dx et dy avec comme valeurs respectives 2 et -2. Ajoutez  le code ci-dessous des variables définies x et y:

var dx = 2;
var dy = -2;

La dernière chose à faire est de mettre à jour x et y avec nos variables dx et  dy sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque raffraichissement. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction draw() :

function draw() {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
  x += dx;
  y += dy;
}

Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Cela fonctionne bien, malgré la trainée laissée par la balle derrière elle:

Effacer le canvas avant chaque Frame

La balle laiise une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans en enlever le précédent. Ne vous inquiétez pas, car il existe un moyen d'effacer le contenu du canvas: clearRect(). Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieurdroit d'un rectangle. Toute la zone couverte par ce rectangle effacera tout contenu dessiné précédemment.  

Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction draw() :

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
  x += dx;
  y += dy;
}

Enregistrez votre code et essayez à nouveau, et cette fois vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle sera dessinée sur une position donnée et les valeurs x et  y seront mises à jour pour la Frame suivante:

Nettoyer notre code

De plus en plus de commandes seront ajoutées à la fonction draw() dans les prochains articles, mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code de dessin de la balle vers une fonction séparée.

Remplacez la fonction draw() existante par les deux fonctions suivantes:

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;
}

Comparez votre code

Vous pouvez vérifier le code de cet article dans la démo en direct ci-dessous et jouer avec pour mieux comprendre comment cela fonctionne:

Exercice: Essayez de changer la vitesse de la balle en mouvement, ou la direction dans laquelle elle se déplace.

Prochaines Etapes

Nous avons dessiné nottre balle et l'avons fait bouger, mais elle ne cesse de disparaître du bord de notre Canvas. Dans le troisième chapitre, nous allons voir comment faire rebondir la balle contre les bords.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : eerrtrr, SphinxKnight, Arhance05, Cotting
Dernière mise à jour par : eerrtrr,