Le carré rouge peut tourner:
Composants rotatifs
Plus tôt dans ce tutoriel, le carré rouge a été en mesure de se déplacer sur le gamearea, mais il ne pouvait pas tourner ou pivoter.
Pour faire pivoter les composants, nous devons changer la façon dont nous tirons des composants.
La seule méthode de rotation disponible pour l'élément de toile va tourner toute la toile:
Tout ce que vous dessinez sur la toile sera également tourné, non seulement le composant spécifique.
Voilà pourquoi nous devons faire quelques changements dans la update() à update() méthode:
Tout d'abord, nous économisons l'objet de contexte de la toile actuelle:
ctx.save();
Ensuite, nous passons toute la toile au centre de l'élément spécifique, en utilisant la méthode translate:
ctx.translate(x, y);
Ensuite , nous effectuons la rotation voulue en utilisant la rotate() méthode:
ctx.rotate( angle );
Maintenant , nous sommes prêts à dessiner le composant sur la toile, mais maintenant nous allons dessiner avec sa position centrale à la position 0,0 sur la traduction (and rotated) toile:
ctx.fillRect(width / -2, height / -2, width, height);
Lorsque nous aurons terminé, nous devons rétablir l'objet de contexte à sa position enregistrée, en utilisant la méthode de restauration:
ctx.restore();
Le composant est la seule chose qui est mis en rotation:
Le Constructor Component
Le component constructeur a un nouveau propery appelé angle , qui est le numéro radian qui représente l'angle de la pièce.
La update à component update la méthode de l' component constructeur est là que nous tirons le composant, et ici vous pouvez voir les changements qui permettront à la composante de tourner:
Exemple
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.angle += 1 *
Math.PI / 180;
myGamePiece.update();
}
Essayez - le vous - même »