Tutorial and ideas for a project

Français ici !

Below, here are few projects my students made previous year, click to see the picture full screen!

The students are from 14 to 16 years old, they begin the year with zero knowledge of computing, and finish being able to code those projects after 16h of programming with me! The rate is 1 hour per week, the projets shown are the most developped ones of the group, those include some work at home, those students were naturally motivated to work at home.

The course material is on the videogame programming course website.

The source code of those projects is available here: Michal [zip], Arnaud [zip], download the zip and install python and pygame to play!

Français ici !

La correction de ce tutoriel se trouve dans la liste des versions de ma branche 2D_tutorial dans mon dépôt parascolaire-tutorials qui contient plusieurs tutoriels informatiques, ces tutoriels font parties de mon github. Une autre version de ce tutoriel se trouve sur dans la liste des versions de ma branche 2D_tutorial_images. Plus d'infos sur le système de correction ici.

Lecture du code de base

1. Quelle est la taille de la fenêtre ? En pixels ? En centimètres ? Quelle est la taille de l'écran d'ordinateur ? En pixels ? En centimètres ? Quelle est la longueur de la diagonale ? En pouces ? Comment calculer la diagonale par calcul ?
2. Vous voyez 3 formes, un rectangle rouge, un grand cercle bleu et un petit cercle vert, ils ont une certaine position et une certaine taille, quelles lignes de code indiquent précisément ces informations ? Pourquoi le cercle bleu est-il au dessus du rectangle rouge ? #CorrectionRectangle
3. Changez la couleur, la position et la taille des éléments. Comment en dessiner un quatrième ? Comment faire pour coller le rectangle au bord gauche ? Droit ? Haut ? Bas ? Même chose pour les cercles. Comment faire pour les mettre au milieu ? Comment faire de l'orange ? Je rappelle qu'une couleur est définie par 3 entiers entre 0 et 255, indiquant la composante de rouge, de vert, et de bleu, petit rappel ici.

   Écriture d'une animation

4. On aimerait que la balle verte se déplace vers la droite, il faut créer une variable que vous appelez comme vous voulez, que ce soit a, pos ou ma_position.
   1. Au tout début du code, ajoutez a = 100 par exemple. #Correction
   2. Et à chaque tick (dans la boucle while), on ajoute +1 à a. #Correction
   3. Finalement, le cercle ne devra plus être dessiné en [150, 80] mais en [a, 80]. #Correction
5. Elle avance un peu lentement, comment faire pour qu'elle avance de 5 pixels par tick ? #Correction
6. Elle sort de l'écran... Vu que l'écran est de taille 700×500, il faut rajouter une condition Si la position est plus grande que 700: mettre la position à zéro. #Correction
7. Comment faire pour que la balle avance vers la gauche ? #Correction
8. Comment faire pour que la balle commence à droite de l'écran ? #Correction
9. Maintenant la balle reste dans l'écran mais ne rebondit pas, nous faisons ça en trois étapes :
   1. Il faut créer une variable sens qui mémorisera si la balle va à gauche ou à droite. Par exemple, si la balle va à droite sens = 1, et si elle va à gauche sens = -1. À la place de -1 et 1, on peut aussi dire 1 et 2, ou 0 et 1 ! #Correction
   2. Le déplacement sera donc une condition : Si sens vaut 1: se déplacer à droite, sinon: se déplacer à gauche. #Correction
   3. Vérifiez que la balle va vers la gauche quand vous imposez que sens vaut -1 au début du code. #Correction
   4. Il faut pouvoir changer de sens, si la balle est trop à droite (position plus grande que 700): mettre sens à -1, sinon: si la balle est trop à gauche (position négative): mettre sens à 1. #Correction1 #Correction2

Amélioration graphique

10. On peut faire deux dessins différents en fonction du sens ! Via des formes géométriques ou des images (voir plus bas).

    

    Par exemple si sens = -1, dessiner un triangle vers la gauche, sinon dessiner un triangle vers la droite. Les triangles peuvent être dessinés avec pygame.draw.polygon(ecran, ROUGE, [[0,50], [100,0], [100,100]]) #Correction1 #Correction2

11. Que sera la commande draw.polygon pour que le triangle bouge avec le cercle ? #Correction1 #Correction2
12. Quelle est la position du centre du triangle ? Quelle sera la commande draw.polygon pour que a représente le centre ? #Correction
13. À la place de formes géométriques, vous pouvez aussi mettre des images comme par exemple celle-ci ou celle-là ou encore sur les sites Kenney.nl, OpenGameArt.org, ou HasGraphics.com conseillés par programarcadegames #Correction

    Le clavier et la souris

14. Le cercle bleu ne bouge pas, utilise le clavier (version ponctuelle) pour faire pour le faire bouger !
15. Cependant, ce déplacement est saccadé, il faut appuyer 5 fois sur gauche pour que le cercle avance plusieurs fois, utilise plutôt la version continue des événements pour le faire bouger !
16. Tu pourrait aussi faire déplacer le cercle bleu en cliquant avec la souris (version ponctuelle).
17. Cependant, ce déplacement n'est pas continu, on n'aimerait pas devoir être obligé de cliquer pour se déplacer, utilise plutôt la version continue.

À la fin des exercices, vous aurez une balle qui rebondit, il vous faut donc rajouter les fonctionnalités de base :

• Une balle rebondissant sur les bords du plateau
• Une palette à gauche qui se déplace avec les touches du clavier. Attention à ne pas sortir de l'écran
• La balle retourne au centre si elle rate la palette (collision avec le bord gauche sans que la palette soit là)
• Une deuxième palette

Améliorations

• La balle commence avec une direction au hasard.
• Plusieurs balles. LISTE.
• Missiles pour détruire l'adversaire ou l'immobiliser (collisions).
• Plusieurs types de balles :
  • Grandes.
  • Rapides.
  • Explosives.
  • Avec un bonus ou malus.
  • Avec de la gravité... Qui veut un 10/10 en physique ?
• Obstacles pour les balles.
• Plusieurs palettes pour jouer avec ses amis.
• Une IA pour remplacer ses amis trop mauvais.
• Rajouter des blocs pour faire un casse-brique.

Avec votre vaisseau et vos invader, exterminez les tous !

• Un vaisseau que vous contrôlez avec les flèches gauche/droite.
• Un android qui se déplace. Ligne 1, Ligne 2, Ligne 3... Ligne du vaisseau.
• On peut tirer un et un seul missile, si celui-ci touche l'android, partie gagnée ! Si celui-ci atteint le bas de l'écran, partie perdue...
• Plusieurs android et/ou plusieurs missiles. LISTE.

Améliorations

Plusieurs types d'android :

• Différents mouvements.
• Points de vie.
• Sorts/Missiles (chute libre de bombe).
• IA pour des androids costauds.

Plusieurs missiles/types d'armes :

• Le rayon laser one shot.
• Le rayon laser continu.
• Le Gros rayon.
• L'explosif.
• Le missile à tête chercheuse.
• L'invocation, un autre vaisseau avec une IA.

Multijoueur :

• Plusieurs vaisseaux pour jouer avec vos amis.
• Une IA pour remplacer vos amis trop mauvais.

Le snake du vieux nokia 3310. Ah vous êtes trop jeune pour avoir connu ce téléphone ? #vieux

• Un snake de Un carré. Il se déplace tout droit de case en case.
• Quand on appuie sur une touche du clavier, il change de direction.
• On perd quand on touche le bord de l'écran... ou bien on arrive de l'autre côté !
• Une pomme est sur une case au hasard. Si le snake la touche (= est sur la même case), la pomme est sur une autre case au hasard.
• Un vrai déplacement de snake : LISTE de têtes. Le joueur perd si il touche une partie de son corps.

Améliorations

• Plusieurs snakes pour jouer avec vos amis.
• Un mode coop ou affrontement.
• Une IA pour remplacer vos amis trop mauvais.

Serveuse est un jeu où vous devez gérer une serveuse de restaurant. Des clients arrivent dans votre restaurant à une table, vous marchez jusqu'à leur table et prenez leur commande. Ensuite vous retournez en cuisine pour leur faire parvenir la commande. Vous attendez que les plats soient prêts puis les servez aux clients, Les clients mangent et quand ils partent en payant l'addition vous devez ramenez leur vaisselle en cuisine.

Voici ici un jeu similaire sur le même principe.

Je propose de faire cela dans cet ordre :

• Deux carrés : la table, la cuisine.
• Un cercle : la serveuse. Celle-ci peut se déplacer de l'un à l'autre avec le clic de la souris.
• Toutes les 60 secondes (3600 ticks à 60fps donc), un client arrive et s'installe à la table. Si il y a déjà un client quand un nouveau arrive, vous perdez une vie ou la partie.
• Le client a une envie de plat : le 1, le 2, le 3 ... et pourquoi pas le 0 ? Une couleur peut être assignée à chaque plat.
• Quand on clique sur le client assis et que la serveuse est à la table, la serveuse se souvient de la commande. Sa couleur change pour voir le plat qui est dans sa mémoire.
• Quand on clique sur la cuisine et que la serveuse y est, elle demande à la cuisine le plat qu'elle a dans sa tête.
• On attend un certain nombre de tick (cela peut dépendre du plat). Et finalement le plat est disponible à la cuisine.
• Quand on clique sur la cuisine et qu'un plat est prêt, la serveuse le prend, une autre couleur montre le plat sur son plateau.
• Quand on clique sur une table occupée, le plat est donné au client, si c'est le mauvais plat, vous perdez une vie ou la partie.
• Le client mange et finalement s'en va. Un autre client peut arriver.

Améliorations

• Plusieurs tables, plusieurs clients. LISTE.
• Un plateau plus grand, pour pouvoir prendre plusieurs plats.
• Des boissons.
• Des clients demandant plusieurs plats et ou boisson.
• Plusieurs cuisines.
• Une difficulté : le nombre de client augmente linéairement avec le temps. Ou du hasard dans les arrivées.
• Des récompenses si les clients sont servis rapidement.

Multijoueur :

• Plusieurs serveuse pour jouer avec vos amis. Essayez de faire des contrôles au clavier pour le deuxième joueur.
• Une IA pour remplacer vos amis trop mauvais.

Ici le but sera de faire une version offline de agar.io.

Je propose de faire cela dans cet ordre :

• Un cercle (ou un carré) se déplace horizontalements comme ceci: si la souris est à gauche, va à gauche, sinon si la souris est à droite, va à droite, sinon ne bouge pas.
• Faire indépendamment le déplacement vertical, cela donne donc 9 déplacements possibles (gauche, droite, haut, bas) et (bas-gauche, bas-droite, haut-droite, haut-gauche) et fixe.
• (Optionnel) Faire toutes les directions en utilisant des maths. (voir note en bas).
• Le agario, peut manger une petite cellule et ainsi devenir plus grand et plus lent. (collisions).
• Quand le agario mange la cellule, elle réapparaît aléatoirement autre part.

Note sur le déplacement dans toutes les directions

• Dans le vrai agario, on a plus de 9 déplacements possibles...
• Les 9 déplacements précédents (gauche, droite, haut, bas), (bas-gauche, bas-droite, haut-gauche, haut-droite) et fixe peuvent se noter (-1, 0), (1, 0), (0, -1), (0, 1), (-1, 1), (1, 1), (-1, -1), (1, -1), (0, 0).
• Le déplacement est donc caractérisé par un déplacement en X (dx) et un déplacement en Y (dy).
• Cette notation est dite vectorielle, un déplacement est un vecteur. dx,dy sont les composantes de ce vecteur. Il peut être représenté par une flèche.
• Avec des opérations vectorielles ou la trigonométrie (voir math.html), vous pouvez calculer dx et dy et avoir toutes les directions possibles.

Améliorations

• Plusieurs cellules de nouriture. LISTE.
• Possibilité de feed. Pour le mouvement dans un premier temps tu peux le faire à vitesse constante sur une certaine distance, ensuite il serait plus intéressant de faire un frottement linéaire.
• Possibilité de split.

Multijoueur

• Plusieurs agario pour jouer avec vos amis. Essayez de faire des contrôles au clavier pour le deuxième joueur.
• Une IA pour remplacer vos amis trop mauvais.

Jeu d'arcade où des joueurs doivent s'affronter sur un terrain quadrillé en posant des bombes qui détruisent les bombes ou les bomberman.

Un rpg, comme Zelda en 2D. Ici c'est trop vaste pour vous proposer un projet, libre cours à votre imagination.

Pokemon est également un chouette exemple de RPG.

1. Dessiner un carré (disons de largeur 20 et positionné à 10 pixels de l'écran), faire un code qui print hello quand on clique dessus. [collisions] [souris - event]
2. Dessiner maintenant 4 carrés en une grille 2×2, (disons que chaque carré est séparé du suivant avec 5 pixels). Comment savoir sur quel carré on a cliqué ?
3. On va maintenant rajouter deux bombes dans notre grille (disons en haut à droite et en bas à gauche). Pour cela il faudra dire que chaque carré a une bombe ou non, comment encoder cette information ? Je vois deux solutions assez différentes :
   1. Méthode Case (je recommande) :
      • Chaque carré aura besoin d'une variable bombe qui vaudra 1 s'il y a une bombe. On créera donc 4 variables bombe_haut_droite, bombe_haut_gauche, bombe_bas_droite, bombe_bas_gauche,
      • Dessiner le terrain en dessinant une bombe sur les cases où il y en a une. Pour chaque case, vous faites un if pour savoir si vous devez dessiner une bombe dans la case.
   2. Méthode Bombe :
      • Faire un objet Bombe qui contient le x et le y. On aura donc deux objets, bombe1 et bombe2.
      • Dessiner le terrain en dessinant une bombe sur les cases où il y en a une. Vous pouvez d'abord dessinner la grille et puis les bombes.
4. Coder ce comportement: si on clique sur une case qui n'est pas sur une bombe, augmenter son score de 1. Il faudra créer une variable score et l'afficher ! Le jeu est actuellement facile car on voit les bombes.
5. Coder ce comportement: si on clique sur une case qui est une bombe, afficher un écran de game over. Créer une variable a_perdu qui vaudra 1 si le joueur a perdu et 0 si le joueur est encore en jeu. En fonction de cette variable vous saurez si vous devez afficher l'écran de game over.
6. Finalement, si on arrive au score maximal (nombre de cases moins le nombre de bombes), afficher un écran de gagné ! Vous pouvez remplacer votre variable a_perdu par une variable etat_partie qui vaut 0 si le joueur joue, 1 s'il a gagné et 2 s'il a perdu.
7. Quand le joueur perd, vous pouvez afficher les bombes sur l'écran de game over, alors qu'avant il ne les voit pas. Vous dessinerez les bombes uniquement si le joueur a perdu.
8. (Méthode Case) Faire une liste de cases pour pouvoir gérer les 4 cases de la même manière.
   • On pourra choisir une liste de taille 4.

     
                                     terrain = [0, 1, 1, 0] # deux bombes !
                                 

   • Ou une liste de taille 2 contenant elle-même deux listes (une liste de liste), je recommande cette méthode.

     
                                     terrain = [[0, 1], [1, 0]] # deux bombes !
                                 

9. (Méthode Bombe) Faire une liste de bombes pour pouvoir gérer facilement les 2 bombes du jeu.
10. Faire maintenant une grille de taille variable, 10×10 par exemple, créez une variable taille = 10 qui permettra de facilement changer la taille du jeu. Il faudra aussi une autre variable qui dit combien de bombes seront placées via total_bombes = 20 par exemple.
11. Faire en sorte que qu'il y a bien le nombre de bombes demandé, placez les au hasard avec progra_hasard !
12. On veut maintenant que notre jeu soit plus sympa, et on va coder les indicateurs de bombes ! Faire un objet Case qui contiendra une ou deux informations :
    1. nb_bombe: Le nombre de bombe autour de la case (peut être zéro).
    2. (Méthode Case uniquement)bombe: Vaudra 1 si c'est une bombe, sinon zéro.
    On aurait pu encoder ces deux (cette seule) information(s) en un seul nombre mais en structurant comme ça on peut facilement rajouter des autres attributs à la case.
13. Le terrain sera donc une liste d'objet Case plutôt qu'une liste de nombres.
14. (Méthode Bombe), faire un terrain qui contient des cases !
    • Soit une liste de case, donc par exemple pour 4 cases :

      
                                  terrain = [0, 1, 1, 0] # deux bombes sur un terrain 2×2 !
                              

      Attention, le terrain ne contiendra pas des nombres, mais des objets Case !
    • Ou une liste de taille 2 contenant elle-même deux listes (une liste de liste), je recommande cette méthode.

      
                                  terrain = [[0, 1], [1, 0]] # deux bombes sur un terrain 2×2 !
                              

      Attention, le terrain ne contiendra pas des nombres, mais des objets Case !
15. Mettez nb_bombe au hasard pour l'instant pour toutes les cases, et afficher cette valeur dans la case avec du texte. Vous pouvez également faire varier la couleur en fonction du nombre comme dans le vrai démineur.
16. Il faut maintenant remplir les informations nb_bombe après avoir placé les bombes. Pour cela je propose un algo comme ceci:

    
                        pour chaque case:
                            n = 0
                            if bombe à droite de case:
                                n = n + 1
                            
                            if bombe en haut de case:
                                n = n + 1
                            
                            if bombe en bas de case:
                                n = n + 1
                            ...
                            
                            case.nb_bombe = n
                        

17. La dernière chose à faire pour avoir un vrai démineur, est de faire que lorsqu'on clique sur une case n'ayant pas de bombe comme voisin, ça clique automatiquement sur ses voisins. La meilleure manière de faire ça est avec une fonction récursive, je te guiderai pour l'écriture de cette fonction.