Carnet de bord Julien

Vous pourrez, ici, retrouver l'ensemble de ma démarche pour aboutir à notre projet final.

MENU

Fonction Menu

Tout d'abord, le but est de créer une page de présentation : =>appel de la fonction menu

-Comment créer une interface intuitive pour l'utilisateur?

=>image de fond: fonction background

=>bouton: «solo»; «settings»; «multijoueur(si faisable)» =>appel de la fonction clic

⇒ dans le void setup

-fonction size.

Ensuite on utilisera la fonction print pour ajouter du texte ( play/mode/ multijoueurs...) =>appel de la fonction affichage

Ensuite il faut Donc créer des touches qui emmèneront l'utilisateur à une autre page avec un clic de la souris. Comment ? =>appel de la fonction clic

Fonction utilisées:

void menu:

Fonction affichage: fonction permettant de définir l'allure du menue et de ses boutons.

fonction clic: fonction permettant de créer des boutons emmenant à une autre page lors d'un clic de la souris sur ce dernier.

Début du programme:

Séance n°1 ( 31 / 01 / 2019 )

Lors de cette première séance de codage, je me suis occupé de créer le menu du jeu. J'ai donc réalisé une page sur le même type que le schéma ci-dessus. 

J'ai d'abord créé un void que j'ai nommé void page0.

•  -Pour cela j'ai utilisé la fonction "text" puis la fonction "rect" pour encadrer le text. Pour ne pas que le rectangle créé avec cette fonction cache le texte, j'ai trouvé la fonction "noFill" qui permet d'enlever le fond du rectangle. 

Séance n°2 ( 07 / 02 / 2019 )

Durant cette séance, j'ai intégré la fonction 'clic' a la page de présentation. 

• j'ai intégré cette partie du code dans le void page0 selon les conseils du professeur.
• Le professeur m'a donc dis de nommer les pages pour pouvoir appeler celle voulue dans la fonction mousePressed facilement.
• j'ai ensuite dupliqué cette partie du code une deuxième fois pour que le clic de la souris soit valable sur les deux touches "solo" et "settings".
• Avec Louis, on a commencé a réfléchir sur ce qu'on appelle dans notre programme la page1 qui est celle du jeu en lui même. Or cette page est appelé dans la fonction moussePressed. Elle doit en effet s'ouvrir lorsque l'utilisateur clique sur le bouton "solo".

Séance n°3 ( 14 / 02 / 2019 )

Aujourd'hui, avec louis nous avons commencé a coder la page ou l'utilisateur pourra jouer.

• Tout d'abord il a fallut déclarer les variables pour la position de la balle ainsi que pour son mouvement. Puis celle pour la raquette.
• Nous avons ensuite déclaré dans le void setup les valeurs initiales aux variables. 
• Ensuite, dans le draw nous avons appelé trois fonction: "nettoyer", "dessiner" et "bouger" que nous définissons ensuite. 
• La fonction "nettoyer" permettra de supprimer le trace de la balle quand elle se déplace, pour cela on remet un background qui est donc appelé dans le draw (se répète 30 fois par seconde)
• La fonction "dessiner" permet de tracer la le rectangle de la raquette et le rond de la balle.
• Enfin la fonction "bouger" permet de donner un mouvement à la raquette et à la balle. Pour cela, on donne une autre valeur aux variables: on lui ajoute un mouvement dont on a détérminé les valeurs dans le setup. Pour le mouvement de la raquette, on a trouvé la fonction "mouseY" qui permet de déterminer la position du rectangle avec la souris seulement sur l'axe des ordonnés.
• Pour l'instant, la balle ne rebondit pas et sort de l'écran. Il nous faudra donc définir une autre fonction que l'on appellera également dans le draw pour faire rebondir la balle sur les cotés de la fenêtre et sur le rectangle de la raquette.

Vacances de Février (du 16 / 02 / 2019 au 03 / 03 / 2019)

Lors de ces vacances, nous avons modifiés l'idée de notre projet. De base, nous étions partis sur un code couleur sur les balles mais cela parfaisait un peu complexe. Nous avons donc décidé de créer une balle principale et des balles bonus qui apparaîtront au fur et a mesure du jeu. On ajouterait un mouvement au mur de droite ce qui complexerait le jeu.

Tout d'abord nous avons donc crée une classe balle qui permettra de définir des variables propres aux différentes balles. Ensuite, on pourra ajouter ou supprimer des balles facilement. Ceci grâce à "ArrayList" qui est une classe se comportant comme un tableau.

class Balle {

int Px, Py, Vx, Vy;

int Dx, Dy;

String type;

Balle(int px, int py, int vx, int vy, String _type) {

Px = px;

Py = py;

Vx = vx;

Vy = vy;

Dx = 25;

Dy = 25;

type = _type;

}

Ensuite dans cette classe on définit le mouvement des balles, ses rebonds.

Je me suis occupé de gérer le rebond des balles :

Pour cela, j'ai crée une fonction que j'ai appelé gere_rebond :

void gere_rebond() {

if (Px > AireDX - Dx/2) {           => rebond sur le mur a droite

Vx = -Vx;

}

if (Px < Dx/2) {                          => rebond sur le mur a gauche

Vx = -Vx;

}

if (Py < Dy/2) {                          => rebond sur le mur du haut

Vy = -Vy;

}

if (Py > AireDY-Dy/2) {             => rebond sur le mur du bas

Vy = -Vy;

}

if (Px<RaqX+RaqDX+Dx/2 && Py>RaqY && Py<RaqY+RaqDY && Vx<0) {

Vx = -Vx;                                   => rebond sur la raquette.

score = score + 1;                    => ceci permet de compter le score (un point de plus a chaque fois                 qu'une balle touche la raquette)

Ensuite, dans le void draw, on appelle les différentes fonctions, que l'on créé juste après, selon la page en cours :

void draw() {

if (page=="menu") {

draw_menu();

}

if (page=="jeu") {

draw_jeu();

}

if (page=="GameOver") {

draw_GameOver();

}

}

Louis s'est occupé de faire la fonction draw_menu.

Dans le draw_jeu, on apelle a nouveaux les fonctions qui permette de definir le jeu.

Il y a donc les fonctions suivantes : nettoyer ; rebondir ; bouger ; dessinerMur; Score; dessiner et BougerMur;

Je me suis occupé des fonctions rebondir, nettoyer, dessinerMur et BougerMur :

void nettoyer() {

background(0);

}

==> la fonction nettoyer permet seulement d'effacer le dessin de la balle lorsque qu'elle est en mouvement pour ne pas qu'elle laisse de traces. Pour cela on redéfinit la couleur du fond de l'ecran.

void rebondir() {

for (int i = 0; i < balles.size(); i++) {

Balle B = balles.get(i);

B.gere_rebond();

}

}

Dans cette fonction, on apelle la fonction gere_rebond crée au debut.

void BougerMur() {

AireDX = AireDX + deplacementAireDX;

}

void dessinerMur() {

fill (200);

rect (AireDX, 0, AireDX, AireDY);

}

Ces deux fonctions permettent le mouvement du mur de gauche. Pour cela, dans « BougerMur », on ajoute à la dimension de l'aire du plateau de jeu une vitesse (négative).

Pour que l'on voit cette limite du mur bouger, dans « dessinerMur », je donne une couleur au rectangle qui constitue la partie a droite de cette limite.

Il faut ensuite définir la page « gameover ». Pour cela j'ai crée la fonction draw_GameOver :

void draw_GameOver() {

background(0);

textSize(50);

fill(#F21414);

text("GameOver", 500, 450);

if (mousePressed) {

page = "menu";

setup();

}

}

Donc quand il ne reste plus de vies, comme Louis l'a defini, la page GameOver s'affiche. Je redéfinis le background et j'écris avec la fonction text le message « game over ».

Ensuite, dans une condition j'utilise la fonction mousePressed qui permet lors d'un clic de la souris n'importe ou sur la page de revenir a la page principale qui est le menu. Et je rappelle également le setup pour que le jeu reparte à 0.

Semaine du 04 / 03 / 2019  au  10 / 03 / 2019 

Lors de cette semaine, avec Louis nous avons ajouté deux niveaux a notre jeu pour ajouter un plus.

Pour cela, dans notre void draw_jeu, avec une certaine condition on remet le mur a son origine. On supprime les balles présente et  on ajoute une balle plus rapide. Dans le void Bouger, on change les conditions. Lorsque les balles se suppriment, on rajoute une balle si il reste des vies de vitesse adaptée en fonction du niveau:

exemple pour le niveau 1 au niveau 2:

if (AireDX<633 && level == 1) {

level = 2;

page = "TransitionLevel";

AireDX = 1265;

for (int i = 0; i < balles.size(); i++) {

balles.remove(i);

}

balles.add(new Balle(500, 500, 15, 8, "normal"));

}

On remet donc le mur à son origine lorsqu'il atteint la valeur 633 en abscisse. Si on était au niveau 1, on passe au niveau 2. On appelle la page "transition level" qui permet de faire une transition entre les niveaux. 

balles.remove(i) permet de supprimer la balle du niveaux fini.

balles.add(new Balle(500, 500, 15, 8, "normal")) permet d'ajouter une nouvelle balle a notre tableaux de balle ou l'on redéfini une vitesse plus élevée.

Voici notre fonction qui permet la transition de niveau.

void draw_TransitionLevel() {

background(0);

textSize(50);

fill(#F21414);

text("Level " + level, 550, 450);

textSize(20);

fill(#0D36FA);

text("(click for next level)", 535, 550);

if (mousePressed) {

page = "jeu";

}

}

Lorsque les 3 niveaux sont finis sans que l'utilisateur ai perdu toutes ses vies, on affiche le message "You win":

if (AireDX<633 && level == 3) {

background(0);

textSize(50);

text("You Win", 500, 450);

if (mousePressed) {

page = "menu";

setup();

}

On rappelle ensuite la page menu ainsi que le setup() pour que le jeu sois relancé.