Contenu principal
Apprendre à coder
Cours : Apprendre à coder > Chapitre 4
Leçon 4: Making a side scroller: Hoppy BeaverL'environnement forestier
Ce jeu utilise un "scrolling horizontal" 2D classique : cela signifie que nous voyons un paysage horizontal, et le personnage se déplace à travers, en avançant vers la droite ou vers la gauche. Nous souhaitons, cependant, que notre personnage reste toujours au centre de l'écran, et, en fait, simuler son mouvement, en déplaçant l'arrière-plan derrière lui. C'est une astuce, et elle fonctionne !
Pour commencer, dessinons les parties qui ne se déplaceront pas, le ciel bleu et le sol marron :
draw = function() {
background(227, 254, 255);
fill(130, 79, 43);
rect(0, height*0{,}90, width, height*0{,}10);
// ...
}Maintenant, pour créer l'affichage qui défile, ajoutons de l'herbe (grass en anglais), en utilisant l'image correspondante dans la bibliothèque d'images. Une façon de créer un environnement mouvant pourrait être de prétendre que notre zone de dessin fait 3000 pixels de large, c'est d'ailleurs la largeur de notre niveau, puis dessiner des blocs d'herbe jusqu'à remplir tous ces pixels, et on déplacerait le tout à chaque fois. Ce n'est cependant pas très efficace, et dans les programmes de jeu, on tient beaucoup à l'efficacité. Nous allons plutôt "enrouler" les blocs d'herbe. Nous en dessinerons juste assez pour remplir les 400 pixels de l'écran, et quand un de ceux-ci disparaîtra sur le côté gauche, nous le recollerons immédiatement sur la droite de l'écran, en permanence.
Pour faire cela, nous allons commencer par initialiser un tableau avec les coordonnées x initiales des blocs d'herbe :
var grassXs = [];
for (var i = 0; i < 25; i++) {
grassXs.push(i*20);
}Puis, à l'intérieur de notre boucle draw, nous allons tous les dessiner :
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
}C'est bon pour une scène statique, mais, nous, il nous faut les mettre en mouvement ! Nous pouvons soustraire un à chaque coordonnée de bloc d'herbe, à chaque rafraîchissement, pour les faire tous bouger de 1 pixel vers la gauche.
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
grassXs[i] -= 1;
}Maintenant, l'herbe va se déplacer, et entièrement disparaître, alors que les coordonnées x deviennent de plus en plus négatives. Rappelez-vous, nous voulons enrouler les blocs (nous voulons qu'ils se recollent au côté droit de la zone de dessin, quand ils disparaissent du côté gauche). Pour faire cela, nous allons tester si nous sommes suffisamment en dehors de l'écran (rappelez-vous que nos images sont dessinées à partir du coin supérieur gauche), et redéfinir la valeur x, à la largeur de la zone de dessin, si c'est le cas :
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
grassXs[i] -= 1;
if (grassXs[i] <= -20) {
grassXs[i] = width;
}
}En assemblant tous ces bouts de code, nous obtenons un castor qui semble se déplacer, tout en sautant. Magique !
OK. Nous avons un castor qui saute à travers un environnement qui défile horizontalement. Mais il n'a rien à y faire ! Il nous faut ajouter des bouts de bois, pour que le castor saute, afin de les collecter.
Réfléchissons un peu à nos bouts de bois, à ce que nous devons décider pour les programmer :
- Chaque bout de bois possède des coordonnées x et y. Nous souhaitons probablement que les coordonnées x soit dispersées en suivant une certaine valeur (constante ou aléatoire à l'intérieur d'une fourchette), et que les coordonnées y soient aléatoires, à l'intérieur d'une fourchette, de telle sorte que l'utilisateur doive contrôler les sauts et les chutes du castor.
- Les bouts de bois doivent simuler le même mouvement apparent que l'herbe, mais ils n'ont pas à s'enrouler. Une fois qu'un bout de bois est sorti de l'écran, c'est pour toujours.
- Il doit y avoir une certaine quantité de bouts de bois par niveaux (à un certain point, il pourrait même s'arrêter d'être des bouts de bois).
Il y a plein de façon de programmer nos bouts de bois, mais comme ils possèdent suffisamment de complexité, modélisons-les en objet, comme nous l'avons fait pour notre castor :
var Stick = function(x, y) {
this.x = x;
this.y = y;
};
Stick.prototype.draw = function() {
fill(89, 71, 0);
rect(this.x, this.y, 5, 40);
};Puis, avant que notre jeu démarre (après avoir initialisé notre castor, par exemple), créons un tableau de 40 bouts de bois (sticks en anglais), en utilisant un décalage constant et un y aléatoire :
var sticks = [];
for (var i = 0; i < 40; i++) {
sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}Et maintenant, nous pouvons dessiner les bouts de bois (de la même façon que nous avons dessiné l'herbe, mais sans créer d'enroulement) :
for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
sticks[i].x -= 1;
}Et voici le résultat, avec les bouts de bois dessinés dans le code. Essayez de sauter vers eux ! Que se passe-t-il ? Rien ! Nous allons bientôt réparer cela...
Vous souhaitez rejoindre la discussion ?
comment faire pour le codage du jeu de Pong car je suis bloqué(1 vote)
quand j'appuie sur la barre espace sa ne fait rien(1 vote)- peut-on le faire verticalement?(1 vote)