Chapitre 4 - Coder un jeu vidéo en Python

Activité 1- Installation de Thonny

Objectif : Installer le logiciel Thonny sur vos ordinateurs portables pour pouvoir utiliser Python

Il existe plein de logiciels pour faire du Python sur l’ordinateur. Cette année, nous utiliserons le logiciel Thonny !
Nous allons installer Thonny sur votre ordinateur portable.

→ Sur votre ordinateur portable, connectez vous à internet et aller sur le site thonny.org
→ Vous devez normalement voir cette image en haut du site (si ce n’est pas le cas, vous n’êtes pas sur le bon site !):

→ En haut à droite, cliquez sur la marque de votre ordinateur (ex :

“Windows” si vous avez les ordinateur du lycée ou “Mac” si vous avez un
Apple)
→ Cliquer sur le premier lien : thonny-4.0.2.exe (20.4 MB)
→ Une fenêtre s’ouvre. Avant de cliquer sur “enregistrer”, localisez bien l’endroit
où le fichier sera sauvegardé (par exemple, dans l’image de droite, il est précisé que le
fichier est sauvegardé dans le bureau car c’est surligné en gris dans la colonne de
gauche) :

→ Une fois que le fichier est enregistré, cliquez dessus pour l’ouvrir (il se trouve dans le “bureau” si vous avez fait
comme moi à l’étape précédente, voir image ci dessous : )

→ La fenêtre d’installation s’ouvre. Cliquez deux fois sur “next” puis cochez la case “Create Desktop
Icon” (voir image ci-dessous).

→ Cliquez sur “next” puis sur “install”. Attendre que

l’installation finisse (ça ne doit pas prendre plus de 5 min)
→ Normalement, une nouvelle icône est apparue sur votre
arrière-plan du bureau.

Cliquez dessus pour vérifier que le logiciel se lance

correctement.

Si c’est le cas, vous avez réussi son installation ! 👍

1
Activité 2- Téléchargement du code
Dans cette activité, nous allons télécharger le code que vous aurez à compléter pour coder votre jeu vidéo :
Etape 1 : Sur votre ordinateur, aller sur le site https://tinyurl.com/sntdossier
Etape 2 : Faire un clic droit sur le dossier “Chapitre 4 - Jeu Vidéo” puis cliquer sur “télécharger”.
Etape 3 : Patientez quelques instants puis une fenêtre doit s’ouvrir (voir ci-dessous)
Etape 4 : Cliquer sur “bureau” (voir image à
gauche) puis cliquer sur “enregistrer”. Ainsi,
vous venez d’enregistrer le code sur votre
bureau.

Etape 5- Sur votre bureau, un fichier nommé “Chapitre 4- Jeu vidéo “ est
apparu. Ce dossier est un fichier compressé (on le voit car il y a une
fermeture éclair dessus). Pour le décompresser faites un clique droit dessus,
puis cliquer sur “extraire tout” (voir image à droite)

Etape 6- Sur la fenêtre qui vient de s’ouvrir, cliquer sur “extraire” en bas. Patientez quelques secondes le temps
d’extraire le fichier.

Etape 7- A présent sur votre bureau, vous devez avoir 2 fichiers : le fichier compressé (avec la fermeture éclair) et
le fichier non compressé (sans fermeture éclair):

Etape 8- Faites un clic droit sur le fichier compressé et cliquer sur “supprimer”. Il ne doit rester sur votre bureau que
le fichier non compressé.

👍 Félicitations ! A présent, dans ce dossier, vous avez la base pour concevoir votre
jeu vidéo !

Activité 3- Installation des extensions pour coder le jeu vidéo

2
Pour coder un jeu vidéo, il est nécessaire d’installer des extensions. C’est un peu comme au jeu de société du “loup
garou” : certains personnages ne sont disponibles qu’en jouant avec l’extension.

Travail 1 : Installation de l’extension “numpy” :

→ Vérifiez que vous êtes connecté à internet via le wifi de votre téléphone et pas le wifi du lycée
→ Cliquer sur “outil”--> “Gérer les paquets” (voir ci dessous)

→ Dans la barre de recherche (voir ci-dessous) écrire “Numpy” puis cliquer sur “Rechercher sur
Pypl.”

→ Cliquer sur Numpy (voir à droite)

→ Cliquer en bas sur Installer (S’il n’est pas
marqué “installer”, c’est que c’est déjà installé, passez à la suite)
→ Si l’installation n’a pas fonctionné, vérifier
que vous êtes toujours bien connecté au wifi de
votre smartphone (pas le wifi du lycée !).

Travail 2 : Installation de l’extension “opencv-python” :

→ Refaire les mêmes étapes que dans le travail 1 mais cette fois-ci, installez l’extension “opencv-python” au lieu de
“numpy”.

Travail 3 : Installation de l’extension “keyboard” :

→ Refaire les mêmes étapes que dans le travail 1 mais cette fois-ci, installez l’extension “keyboard” au lieu de
“numpy”.

3
Activité 4- Création de l’arrière plan de votre jeu
Dans chaque jeu vidéo de plateforme, il y a un arrière-plan dans lequel évoluent les personnages.
Nous allons voir dans cette activité comment choisir son arrière plan.

Travail 1 : Ouvrir le dossier “Chapitre 4 - Jeu Vidéo” que vous avez téléchargé dans l’activité 2.
Travail 2 : Ouvrir le fichier “codeEleve” (voir image de droite) =======================>>>
Travail 3 : Dans le fichier qui s’ouvre, il y a le code suivant :

Travail 4 : Exécuter le code en cliquant sur la flèche verte en haut de la page (voir image ci-dessus)
Normalement, une fenêtre s’ouvre (voir image ci dessous à gauche) : Il s’agit de l’arrière plan “par défaut” de votre jeu.
ATTENTION ! Pour fermer l’arrière plan, ne
cliquez pas sur la croix en haut à droite car
sinon, cela fait planter l’ordi.
Pour éviter le bug, cliquez sur l’icône de

Thonny en bas de votre écran puis sur

l’icône “stop” en haut :

L’icône stop sert à interrompre le code.

Si jamais une fenêtre “python ne répond pas” apparaît,
cliquez sur “fermer le programme” puis sur “annuler” et
tout rentrera dans l’ordre !

Travail 5 : Dans le dossier “Chapitre 4 - Jeu Vidéo”. Aller dans le sous dossier “arrierePlan”. Dans ce sous dossier,
il y a plusieurs images d’arrière-plan que vous pouvez utiliser dans votre jeu. Ouvrez-en quelques unes pour voir
laquelle vous préférez.

Travail 6- Comment choisir son propre arrière plan ? Dans Thonny, modifier la ligne :
fenetre = Fenetre(“arrierePlan/herbe.png”)pour mettre un arrière plan que vous préférez.
Par exemple, si vous souhaitez mettre l’arrière plan “mars”, remplacer “herbe.png” par “mars.png” comme ci-dessous:
fenetre = Fenetre(“arrierePlan/mars.png”)

Travail 7 : Exécuter le code une nouvelle fois (en cliquant sur ) et vérifier que l’arrière plan de votre choix
apparaît (par exemple, si vous avez choisi mars.png, l’image ci-dessous doit apparaître)

Remarque 1 : Vous pouvez si vous le souhaitez ajouter des

nouveaux arrière-plans. Il suffit pour cela d’ajouter l’image
que vous souhaitez dans le sous dossier “arrierePlan”.
Attention, l’extension de l’image est importante (vérifier que
votre image est bien en .png. Les autres formats
(.jpeg, .tiff…) sont parfois impossibles à importer.

4
Activité 5- Création des personnages
Dans cette activité, nous allons créer les personnages de votre jeu
Travail 1 : Dans “CodeEleve”, ajouter la ligne de création de personnage comme dans l’image ci-dessous :

Travail 2 : Exécuter le code (en cliquant sur la flèche verte)

Travail 3 : Essayer de comprendre ce que veut dire la dernière ligne de votre code en lisant le document 1
ci-dessous :

Document 1 :

Cette ligne crée un personnage appelé marie. L’image de ce personnage est située dans le sous dossier
“perso”, il s’agit de l’image “perso5.png”. Pour l’instant, on a placé marie à la ligne 0 et la colonne 0 dans la
fenetre.

Travail 4 : Dans le dossier “Chapitre 4 - Jeu vidéo”, aller dans le sous dossier “perso” et observez les
différents personnages à votre disposition. Arrivez-vous à trouver le personnage de Marie ?

Travail 5 : Ajouter une ligne dans le code pour ajouter un nouveau personnage (par exemple l’alien) dans la
fenetre. Inspirez vous de la ligne de code expliquée dans le document 1 ci-dessus.

Travail 6 : Pour ne pas que votre nouveau personnage se superpose au personnage de Marie, choisissez une
position différente (par exemple, placez votre nouveau personnage à la ligne 150 et la colonne 0 [voir document 1])

Remarque : la quasi-totalité des personnages disponibles dans le dossier “perso” ont été créés grâce à
l’intelligence artificielle dall-e. Si vous souhaitez tester cette intelligence artificielle, allez sur le site
https://tinyurl.com/1dall-e et suivez les instructions.

Activité 6- Faire bouger des personnages (1/2)

Pour pouvoir faire bouger vos personnages, nous allons apprendre à utiliser des outils très puissants en
programmation :
Les boucles “for” et les boucles “while”
Ces outils permettent de répéter plusieurs fois la même commande.
Travail 1 : Aller sur le site https://tinyurl.com/sntboucle (le site peut mettre quelques minutes à se charger)
Travail 2 : Dans la colonne de gauche, double-cliquez sur Niveau 0 (voir ci-dessous)

Travail 3 : Lisez attentivement les consignes et faire le travail demandé.

Travail 4 : Une fois le niveau 0 réussi, faites les niveaux 1, 2 puis 3.

Travail 5 : Avant de faire le niveau 4, lisez attentivement la page suivante (boucles for et boucles while). Pour
réussir les niveaux 4, à 6 utiliser des boucles for, puis refaites la même chose avec des boucles while.

5
 Boucles “For” : Boucles “While” :
Grâce aux boucles “For”, il est possible de choisir combien de fois on peut En anglais, “While” veut dire “tant que”. Grâce aux boucles “While”, on répète
répéter une même instruction. des instructions “tant que” une condition est vraie.
Exemple: On souhaite faire avancer la voiture de 4 case pour arriver sur le Exemple :
parking
Code avec boucle while Traduction du code en français :

while not maVoiture.estSurParking(): Tant que ma voiture n’est pas

sur le parking ,
maVoiture.avancer() ma Voiture avance
Regarde attentivement le code ci-dessus et sa traduction en français.
Dans ce code, la voiture va avancer jusqu’à ce qu’elle soit sur le parking.

Code sans boucle for Le même code en utilisant une

boucle “For”:
maVoiture.avancer() for compteur in range (4):
maVoiture.avancer() maVoiture.avancer()
maVoiture.avancer()
maVoiture.avancer()
Regarde attentivement les deux codes ci-dessus.
Tu remarques que dans le code de gauche, on a répété 4 fois la même instruction :
maVoiture.avancer()

Sheet Code !!! [seulement une fois que vous avez réussi tous les niveaux]
Grâce aux boucles while, il est possible d’écrire un seul code qui résout tous les niveaux du jeu, quel que soit le chemin à parcourir !
Pour cela, inspirez vous du code ci-dessous :

while not maVoiture.estSurParking(): Tant que ma voiture n’est pas sur le parking:
if maVoiture.verifierSiRouteAGauche(): si il y a une route à gauche de ma voiture :
maVoiture.tournerAGauche() ma voiture tourne a gauche
A Compléter code à compléter
elif maVoiture.verifierSiRouteADroite(): ou s’il y a une route à droite de ma voiture :
A COMPLETER code à compléter
else : ou sinon :
A COMPLETER code à compléter