Merge branch 'chapitre-2-start' of https://git.techprog.be/fabien.toune/paf-loiseau into chapitre-2-start

README.md

@@ -1,44 +1,106 @@
-# Introduction
+# Partie 2
+Maintenant que nous avons un arrière-plan et un oiseau qui vole de haut en bas, ajoutons les tuyaux aux travers desquels l'oiseau va devoir passer.
 
-Ce projet a pour objectif de vous guider tout au long de la réalisation d'un jeu simple en Python.
+## Ajouter les tuyaux
 
-Voici les étapes de travail :
+Vous avez déjà vu que nous pouvons créer des objets `Actor` et comment les déplacer sur l'écran. Au besoin, retournez voir dans la section précédente comment vous avez procédé avec l'oiseau. 
 
-## Pour commencer
+Nous devons donc ajouter deux tuyaux, et si vous regardez dans le répertoire images, vous verrez que nous avons deux fichiers nommés `top.png` et `bottom.png`. Comment les ajouter au jeu ?
 
-Avant toutes choses, il vous faut vérifier votre environnement de travail. Ce projet a été élaboré avec les bases suivantes.
+> Créons deux nouveaux acteurs en ajoutant à la fin de votre code :
 
-- **Python 3.9** : pour tester, ouvrez un terminal et exécutez la commande `python -V` qui devrait vous retourner `Python 3.9.0`. De légères différences de version ne devraient toutefois pas poser de problème.
-- **Pip** : nécessaire pour installer les packages additionnels Python. Pour vérifier : `pip -V` devrait vous donner un numéro de version supérieur à 20, et en relation avec votre version de Python. En cas de problème avec l'une ou l'autre de ces deux dernières vérifications, le plus simple est de retirer complètement Python et de le réinstaller selon la méthode vue au cours. (Attention notamment au PATH)
-- **Virtualenv** : nécessaire pour travailler dans des environnements Python virtuels de travail. Pour vérifier la présence de ce programme : `virtualenv --version` devrait, comme pip, vous donner un numéro de version supérieur à 20 et en relation avec votre version de Python.
-- **Git** : pour la gestion des différentes versions de votre projet, des corrections, etc. La commande `git --version` devrait vous donner une version 2.X.X. Si ce n'est pas le cas, il vous faut alors l'installer. Avec votre gestionnare de paquets (apt, choco, etc.) ou à défaut à partir du [site de l'éditeur ](https://git-scm.com/downloads).
-- **VS Code** : attention à ce que tout le reste soit bien présent et à installer le module Python de vscode.
+```python
+tube_superieur = Actor('top', (300,0))
+tube_inferieur = Actor('bottom', (300,500))
+```
 
-## Déroulement de votre travail
+Pour voir apparaître les tuyaux, il ne faut pas oublier de demander leur dessin. À vous de déterminer où placer ces deux lignes :
 
-1. Il vous faudra d'abord commencer par *forker* (bifurquer) ce dépôt dans les vôtres sur [le site git de l'école](https://git.techprog.be).
-1. Ensuite seulement, vous allez cloner celui-ci dans un de vos dossiers local de développement.
-1. Une fois le dossier *paf-loiseau* rapatrié, vous ouvrirez celui-ci avec vscode.
+```python
+tube_superieur.draw()
+tube_inferieur.draw()
+```
 
-## Étapes de développement
+> Testez le résultat
 
-Le dépôt que vous avez cloné est positionné sur sa branche principale (master) comportant ce fichier, le fichier de licence et le fichier .gitignore. 
+Bien, nous avons des tuyaux ! Mais ils sont juste là, sur la page, et il n'y a pas d'espace entre eux.
 
-Le déroulement du projet est organisé selon une **introduction** et **quatres chapitres**. À chacune de ces sections correspondent **deux** branches :
-- une qui correspond aux explications et à la situation de départ (-start),
-- l'autre correspondant à la situation finale attendue (-end).
+*Pouvez-vous deviner ce que les `(300, 0)` et  `(300, 500)` signifient ? Modifiez-les pour vérifier.*
 
-Voici les étapes de travail **pour chaque section** :
-1. Basculez sur la branche '-start' de la partie sur laquelle vous allez travailler (introduction-start, chapitre-1-start, etc.):
+## Attention à l'écart
 
-![Basculer sur une branche](https://i.imgur.com/9oDvA16.gif)
+Comment faire un trou pour que notre oiseau puisse voler ? Nous devons nous assurer que nous positionnons les tuyaux au bon endroit sur l'écran, et pour ce faire, nous devons connaître la taille de chaque image.
 
-2. En suivant les instructions et explications du chapitre (clic droit sur le fichier .md dans vscode, puis 'open preview') vous allez modifier ce qui doit l'être en validant vos changement au fur et à mesure dans git:
+> Voyons ce que nous pouvons découvrir d'un acteur, en ajoutant ce code à la fin de votre programme :
 
-![Validation des changements dans git](https://i.imgur.com/QOfXpBQ.gif)
+```python
+print(tube_superieur.width, tube_superieur.height)
+```
 
-3. Pour publier vos changments locaux sur votre dépôt distant (https://git.techprog.be) :
+> Exécutez le programme et regardez quels nombres apparaissent dans la console. 
 
-![Publication des changements git](https://i.imgur.com/RU8IwGz.gif)
+Vous devriez voir apparaître deux chiffres (normalement  100 500), c'est la largeur et la hauteur du tube supérieur en pixels.
 
-4. Pour comparer votre travail avec celui du cours, vous pouvez basculer sur la branche -end de la section sur laquelle vous travaillez.
+Grâce à ces informations, nous pouvons modifier la construction des tuyaux supérieurs et inférieurs en conséquence :
+
+```python
+ecart = 140
+tube_superieur = Actor('top', (300, 0))
+tube_inferieur = Actor('bottom', (300, tube_superieur.height + ecart))
+```
+
+Les deux valeurs séparées par une virgule à la fin de chaque ligne Actor contrôlent la position **x** (de gauche à droite), et **y** (de haut en bas) de l'Actor. Ainsi `(300,0)` place le tuyau à 300 pixels du bord gauche, et 0 pixel en bas du haut de la fenêtre.
+
+D'où viennent ces calculs ? Eh bien, l'écart est une nouvelle variable que nous créons, et nous disons que la hauteur du tuyau supérieur plus l'écart doit être la valeur **y** du tuyau inférieur. Essayez de changer la valeur de l'écart et voyez ce qui se passe.
+
+> Exécutez pour vérifier que nous avons créé un écart
+
+*Quel est le plus grand écart que vous pouvez faire tout en voyant le tuyau de fond ?*
+
+
+## Allons de l'avant
+
+Pour donner l'impression que l'oiseau vole vers l'avant, et bien que cela paraissent paradoxal, il va falloir faire se déplacer les tubes. C'est une technique classique dans les jeux vidéos : le joueur reste immobile, c'est tout le reste qui se déplace.
+
+Faisons donc bouger ces tuyaux. Tout comme nous l'avons fait avec notre oiseau, nous pouvons créer une variable de vitesse pour les tuyaux et l'utiliser pour les faire bouger. Nous voulons que la ligne de code suivante s'exécute une fois lorsque nous lançons le programme, elle doit donc se trouver à la fin de votre code :
+
+```python
+vitesse_defilement = 1
+```
+
+Et ils doivent se déplacer continuellement, donc ce code va dans la fonction de mise à jour :
+
+```python
+tube_superieur.x += vitesse_defilement
+tube_inferieur.x += vitesse_defilement
+```
+
+Testez. Tout se passe-t-il comme prévu ? Si ce n'est pas le cas, relisez votre code et essayez de le corriger.
+
+
+## Plus de tuyaux
+
+Nous avons besoin de plus de tuyaux, une seule paire ne suffit pas. En fait, nous en avons déjà assez, nous pouvons simplement les faire tourner en boucle lorsqu'ils sortent de l'écran.
+
+Pour ce faire, nous allons utiliser l'instruction `if` ainsi que les tests conditinnels `<` et `>`.
+
+Il y a trois choses délicates avec les énoncés `if` :
+
+- Que testez-vous exactement ? Que se passe-t-il après le "si" ?
+- Il ne faut pas oublier les deux points à la fin du test conditionnel.
+- Il faut que l'indentation soit correcte - combien d'espaces au début de la ligne ? - pour que le bon code soit exécuté.
+
+
+## Boucles sur les tuyaux
+
+Mettons-nous au travail dans la fonction de mise à jour, car c'est là que nous déplaçons les tuyaux.
+
+> Ajoutez ce code à la fin de la fonction, et assurez-vous que vous l'indentez pour qu'il soit vraiment à l'intérieur de la fonction.
+> Efforcez-vous de *réellement* comprendre le sens des lignes de code.
+
+```python
+if tube_superieur.x < 0 :
+    tube_superieur.x = WIDTH
+```
+
+Il devrait toutefois subsister certains soucis... À vous de les corriger 😁

birdie.py

@@ -0,0 +1,21 @@
+import pgzrun
+
+TITLE = "Paf l'oiseau"
+WIDTH = 400
+HEIGHT = 708
+
+def on_mouse_down():
+    print('Clic souris !')
+    titi.y -= 50
+
+def update():
+    titi.y += titi.speed
+
+def draw():
+    screen.blit('background', (0, 0))
+    titi.draw()
+
+titi = Actor('bird1', (75, 350))
+titi.speed = 1
+
+pgzrun.go()