Mouvement de jeu
Avec la nouvelle façon de dessiner les composants, expliquée dans le chapitre Rotation du jeu, les mouvements sont plus flexibles.
Comment déplacer des objets ?
Ajoutez une speedpropriété au componentconstructeur, qui représente la vitesse actuelle du composant.
Apportez également quelques modifications à la newPos()méthode, pour calculer la position du composant, en fonction de speedet angle.
Par défaut, les composants sont orientés vers le haut et en définissant la propriété speed sur 1, le composant commencera à 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);
}
}
Faire des virages
Nous voulons aussi pouvoir faire des virages à gauche et à droite. Créez une nouvelle propriété appelée moveAngle, qui indique la valeur de déplacement actuelle ou l'angle de rotation. Dans la newPos()méthode, calculez le
anglebasé sur la moveAnglepropriété :
Exemple
Définissez la propriété moveangle sur 1 et voyez 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);
}
}
Utiliser le clavier
Comment se déplace le carré rouge lors de l'utilisation du clavier ? Au lieu de se déplacer de haut en bas et d'un côté à l'autre, le carré rouge avance lorsque vous utilisez la flèche "haut", et tourne à gauche et à droite lorsque vous appuyez sur les flèches gauche et droite.