Rotation du jeu

Le carré rouge peut tourner :

Composants rotatifs

Plus tôt dans ce didacticiel, le carré rouge pouvait se déplacer dans la zone de jeu, mais il ne pouvait ni tourner ni pivoter.

Pour faire pivoter les composants, nous devons changer la façon dont nous dessinons les composants.

La seule méthode de rotation disponible pour l'élément canvas fera pivoter l'ensemble du canvas :

Tout le reste que vous dessinez sur la toile sera également pivoté, pas seulement le composant spécifique.

C'est pourquoi nous devons apporter quelques modifications à la update()méthode :

Tout d'abord, nous enregistrons l'objet de contexte de canevas actuel :

ctx.save();

Ensuite, nous déplaçons le canevas entier au centre du composant spécifique, en utilisant la méthode translate :

ctx.translate(x, y);

Ensuite, nous effectuons la rotation souhaitée en utilisant la méthode rotate() :

ctx.rotate(angle);

Nous sommes maintenant prêts à dessiner le composant sur le canevas, mais nous allons maintenant le dessiner avec sa position centrale à la position 0,0 sur le canevas traduit (et pivoté) :

ctx.fillRect(width / -2, height / -2, width, height);

Lorsque nous avons terminé, nous devons restaurer l'objet de contexte à sa position enregistrée, en utilisant la méthode restore :

ctx.restore();

Le composant est la seule chose qui pivote :

Le constructeur de composants

Le componentconstructeur a une nouvelle propriété appelée angle, qui est un nombre en radians qui représente l'angle du composant.

La updateméthode du componentconstructeur est où nous dessinons le composant, et ici vous pouvez voir les changements qui permettront au composant de tourner :