Contenu principal
Apprendre à coder
Cours : Apprendre à coder > Chapitre 4
Leçon 4: Making a side scroller: Hoppy BeaverLe personnage du Castor
Commençons par créer notre personnage, le Castor Sauteur. Nous allons utiliser la conception orientée objet, étudiée dans ce module, pour le décrire.
Quand on crée un personnage de jeu, on doit réfléchir aux propriétés et aux comportements qu'il doit posséder. Par exemple, notre castor (beaver en anglais) doit conserver une trace de ses coordonnées x et y, ainsi que le nombre de bouts de bois (stick en anglais) qu'il a attrapés. Il lui faut aussi deux comportements : sauter (hop en anglais), pour monter, et tomber (fall en anglais), pour descendre.
Voici ce que cela peut donner, en objet :
Ce programme ne fait cependant pas bien son travail car il ne teste pas les différents comportements (le castor n'est pas animé, il n'apparaît que dans un seul état). Ajoutons une fonction
draw
, pour que nous puissions demander au castor de faire des chose, en fonction des interactions utilisateur. Nous souhaitons, dans ce jeu, que le castor saute quand l'utilisateur appuie sur la touche espace. Cela peut s'implémenter très simplement :draw = function() {
background(255, 255, 255);
if (keyIsPressed && keyCode === 0) {
beaver.hop();
} else {
beaver.fall();
}
beaver.draw();
};
C'est un code assez efficace, mais quand on l'exécute, nous devons continuellement appuyer sur la barre espace pour empêcher le castor de sortir par le bas de la zone de dessin. Nous devons contraindre y à des valeurs raisonnables, afin de conserver le castor sur l'écran. C'est une chose classique, dans les jeux, de conserver les personnages à l'intérieur du "monde du jeu". Nous pouvons le faire en utilisant
constrain
, dans la fonction draw, en passant des minimum et maximum appropriés : this.y = constrain(this.y, 0, height-50);
Voici maintenant notre programme, avec un castor sautant et tombant, contrôlé par le clavier. Jouez un peu avec !
Vous souhaitez rejoindre la discussion ?
- Pourquoi key.code === 32, pourquoi pas 10, 20, ou 30? Comment sait-on que c'est la barre d'espacement? Merçi(1 vote)
- quel est le rôle de " this " ?(1 vote)