truc2geek

2014/09/30

Processing, un jeu : part 2

Filed under: Informatique, Processing, Programmation — Étiquettes : , , , — truc2geek @ 01:08

Précédemment, on a commencé à coder un jeu.
Aujourd’hui on continue ce « travail », et on passe à la POO : Programmation Orientée Objet.

Explication

La manière dont j’ai écrit le code pour l’instant est appelée « programmation procédurale ».
On va passer maintenant à la « programmation orientée objet ».

Si vous ne savez pas encore ce que cela signifie, pas de panique!
Vous pouvez vous reporter au tutoriel sur le site de Processing.

Voici ma petite explication : il suffit de regarder autour de soi, le monde est rempli d’objets.
Ils ont des caractéristiques : couleur, poids, taille, forme etc.
Ils peuvent effectuer des actions : une voiture peut accélérer, freiner etc.
Certains ont des caractéristiques communes et peuvent faire partie d’une même famille : une voiture et une moto sont tous les deux des véhicules.

C’est la même chose en orienté objet : on définit d’abord des classes.
Une classe est simplement le code qui définit ce que sera un objet : quelles seront ses caractéristiques (ses « propriétés »), ses actions (ses « méthodes »).
Après avoir codé une classe, on peut créer des objets sur le modèle de cette classe, on dit qu’on crée des « instances ».
On peut ensuite manipuler ces objets : leur faire faire des actions, modifier leurs propriétés.
Par exemple, on peut faire avancer une voiture, qui sera alors plus usée.

On peut aussi créer une classe qui sera basée sur une autre, et qui aura des propriétés et des méthodes supplémentaires.
On pourrait avoir une classe « véhicule », qui aurait les propriétés et les méthodes communes à tous les véhicules : un poids, une couleur, la possibilité d’avancer…
Les classes « voiture », « moto » et « vélo » seraient basées sur cette classe « véhicule ».

Mais maintenant, passons à la pratique!
Ce sera tout de suite plus clair.

Et de toute façon, il vaut mieux passer à l’orienté objet maintenant, tant que l’application est encore petite, ce sera moins douloureux…

1e étape

la classe Serpent

Pour cette 1e étape, on va coder la classe Serpent, créer un objet Serpent.
Le code relatif aux cibles sera désactivé, et on modifie la fonction keyPressed().

Voici le code de la classe « Serpent ». Pour l’instant c’est juste un carré, mais on le fera bientôt grandir…

01.png
02.png

On a trois parties distinces :

les propriétés de la classe.
On retrouve ici les valeurs qu’on avait définies comme des variables globales dans la version précédente de l’application :
03.png

Ensuite le « constructeur » : cette partie du code sera exécutée au moment où on créera l’objet :
on place donc ici le code qui permet de l’initialiser.

Enfin, les méthodes.

partie principale du programme

Voici les modifications effectuées dans la partie principale du programme :

04.png
05.png
06.png

On commente les variables globales qui permettaient de gérer le « serpent », et qui sont devenues inutiles.

On déclare une nouvelle variable globale nommée « oSerpent » et de type « Serpent ».
Dans la fonction setup(), on instancie cet objet.

On ne dessine plus les cibles : on désactive cet aspect du jeu pour l’instant.
Pour faire avancer le « serpent » et l’afficher, on utilise les méthodes correspondantes.
L’appel de la fonction cibleAtteinte() est désactivé.

Voici la suite :

07.png

La fonction cibleAtteinte() est désactivée.

08.png

La fonction keyPressed() est adaptée : au lieu de modifier la variable globale « Direction », on modifie la propriété « pDirection » de l’objet oSerpent.

test

Ok, résultat plutôt en courageant : on a bien, comme avant, un carré qui « rebondit » contre les bords de la fenêtre, et qu’on peut diriger par les quatre touches « flèche » du clavier.

Voici le lien vers cette version du jeu, la V0_07.

2e étape

On modifie simplement la manière de diriger le serpent.

code

Dans la classe Serpent, on ajoute la méthode changerDirection, qui recevra la nouvelle direction du serpent :
09.png

Dans la fonction keyPressed(), on appelle cette méthode :
10.png
J’en ai profité pour raccourcir le code, ce qui peut créer une confusion.

J’aurais pu garder le même principe qu’avant : voir si keyCode vaut 37, et si oui, exécuter oSerpent.changerDirection(« Gauche »).
Puis voir si keyCode vaut 38, et si oui, exécuter oSerpent.changerDirection(« Haut »).

Ce n’est pas la programmation orientée objet qui a permis de raccourcir le code, c’est vraiment que, puisque je retouchais ce code, autant en profiter pour le raccourcir.

On commence par vérifier si keyCode est compris entre 37 et 40 inclus.
Ensuite on a un tableau de valeurs de type String nommé « ListeDirection ».
Si  le keyCode vaut de 37 à 40, on appelle oSerpent.changerDirection en lui transmettant la valeur du tableau ListeDirection correspondante.
Les valeurs 37 à 40 (valeur de keyCode) correspondent aux valeurs 0 à 3 (indice dans ListeDirection).

test

Ok, tout va bien.

3e étape

Il est temps de rétablir la gestion des cibles.

code

11.png

A la fin de la fonction draw(), on décommente l’appel à la fonction cibleAtteinte().

Et dans cette fonction, on adapte le code pour utiliser les propriétés pLarg, pX et pY de l’objet Serpent nommé « oSerpent ».

test

Ok, tout va bien.
Le code de cette version est disponible ici.

4e étape

On écrit une classe Cible.
Ici j’ai triché un peu, par rapport à l’esprit de l’orienté objet.
Dans le jeu on est censé avoir des cibles mais qui sont plutôt des cibles différentes, que le serpent atteint l’une après l’autre.
On devrait créer à chaque fois un nouvel objet Cible distinct.
Mais ici je me contente de créer un seul objet Cible, dont je redéfinis la position chaque fois que le serpent l’atteint.

Le résultat sera le même…

code

Voici la classe Cible :

12.png

L’objet nommé oCible, de type Cible :

13.png

On appelle oCible.afficher() pour la dessiner :

14.png

On modifie une fois de plus,  la fonction cibleAtteinte() :

15.png

test

Le code de cette version est disponible ici.

A suivre…

Publicités

Laisser un commentaire »

Aucun commentaire pour l’instant.

RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Créez un site Web ou un blog gratuitement sur WordPress.com.

%d blogueurs aiment cette page :