Avec la nouvelle façon de composants de dessin, expliqué dans le chapitre du jeu de rotation, les mouvements sont plus souples.
Comment faire pour déplacer des objets?
Ajouter une speed de logement à component constructeur, qui représente la vitesse actuelle du composant.
Assurez - vous également quelques changements dans la newPos() méthode, pour calculer la position du composant, en fonction de la speed et de l' angle .
Par défaut, les composants sont orientés vers le haut, et en définissant la propriété de vitesse à 1, le composant va commencer à avancer.
Exemple
function component(width, height, color, x, y) {
this.gamearea = gamearea;
this.width = width;
this.height = height;
this.angle = 0;
this.speed = 1;
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();
}
this.newPos = function() {
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
Essayez - le vous - même » Faire Turns
Nous voulons aussi être en mesure de faire des virages à gauche et à droite. Faire une nouvelle propriété appelée moveAngle , qui indique la valeur de déplacement en cours, ou de l' angle de rotation. Dans les newPos() méthode de calculer l' angle sur la base du moveAngle propriété:
Exemple
Définissez la propriété moveangle à 1, et de voir ce qui se passe:
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.moveAngle = 1;
this.speed = 1;
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();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
Essayez - le vous - même » Utilisez le clavier
Comment le carré rouge se déplacer lorsque vous utilisez le clavier? Au lieu de déplacer vers le haut et vers le bas, et de gauche à droite, le carré rouge se déplace vers l' avant lorsque vous utilisez le "up" flèche, et tourne à gauche et à droite lorsque vous appuyez sur les flèches gauche et droite.