Carnet de bord Louis
Je vous présente ici la continuité de nos recherches pour élaborer notre projet final.
Pistes de réflexion pour le programme :
-Appel de la fonction affichage dans le background
-importer une ou plusieurs balle (ajouter de la couleur) {créer variable (avec INT) x et y : coordonnées de la balle / déplacement X et Y qui seront le déplacement de la balle} Il faudra ensuite donner des valeurs a ces variables puis faire rebondir la balle avec une condition (if)} -comment faire disparaître les balles quand elles ont la même couleur que le rectangle lors du contact ? =>appel de la fonction balle
-créer un rectangle sur la gauche de l'écran ( lui déterminer une couleur et une taille) => Comment faire bouger ce rectangle avec le clavier ? =>appel de la fonction raquette
-bonus/malus Comment les faire apparaître de façon aléatoire ? Et surtout comment donné l'information qu'apporte ce bonus ou malus ? (exemple : agrandir/diminuer la taille du rectangle, accélérer/ralentir la vitesse des balles etc...) => appel de la fonction bonus/malus
-comment générer des animations pour certaines phases précises du jeu ?
=> mise a jour des vies lorsque une balle est laissé passée.
=>compteur de score mis a jour lorsqu'une balle est éliminée.
=>Game over lorsque le compteur de vie tombe à 0.
> retour sur page d'accueil.
Fonctions utilisées: S (fonction pour le mode solo); M (fonction pour le mode multijoueurs)
Fonction affichageS (affichageM): Fonction permettant de créer le terrain de jeu.
Fonction balleS (balleM): fonction gérant l'apparition et le comportement des balles.
Fonction raquetteS (raquetteM): fonction gérant les mouvements possibles de la raquette.
Fonction bonus/malusS (bonus/malusM): fonction gérant l'apparition de façon aléatoire des différents bonus et malus.
Par la suite avec l'évolution du programme nous avons décidé de modifier le nom des fonctions créées.
Début de la programmation :
Séance n°1 ( 31 / 01 / 2019 )
Lors de cette première séance, je me suis occupé de chercher comment ouvrir une autre page lors d'un clic de la souris sur les différents titres que Julien aura affiché sur la page d'ouverture du jeu.
- J'ai trouvé la fonction "mousePressed" qui permet de capter une action de la souris. A l'intérieur de cette fonction, je créé des conditions qui permettent à la souris d'effectuer une action que lorsque l'utilisateur clique à l'intérieur des coordonnées rentrées (coordonnées des rectangles).
Séance n°2 ( 07 / 02 / 2019 )
Lors de cette séance, j'ai travaillé sur l'aspect de la page de menu en utilisant les fonctions rect() et text() qui m'ont permis de définir des boutons sur lesquels le joueur pourra cliquer et du texte à afficher pour présenter le jeu. La fonction stroke(), elle, permet de définir une couleur pour les contours des polygones créés précédemment. noFill() permet de vider l'intérieur de la forme affichant ainsi l'arrière-plan dont la couleur est définie grâce à background()
voiddraw_menu() {
background(0);
fill(#FFFFFF);
textSize(40);
text("P.O.N.G.", 575, 100);
text("President Of National Game company", 300, 200);
text("PLAY", 605, 503);
text("Try to pass all 3 levels and become the P.O.N.G.", 200, 700);
noFill();
stroke(#E00000);
rect(550, 50, 200, 75);
noFill();
stroke(#E00000);
rect(550, 450, 200, 75);
noFill();
stroke(#E00000);
Nous avons décidé d'intégrer ces fonctions ainsi que celles trouvées par Julien dans un void spécifique : void draw_menu() { qui est lui-même contenu dans le draw du programme
.
Séance n°3 ( 14 / 02 / 2019 )
Lors de cette séance, avec Julien nous nous sommes penchés sur la page de jeu où le joueur pourra faire bouger sa raquette et interagir avec les balles.
Nous avons pour cela établis les variables liées aux positions de la balle et de la raquette ainsi que de leur mouvement puis nous leur avons donné des valeurs initiales dans le setup du programme.
Dans le draw nous avons appelé trois fonction: "dessiner", "bouger" et "nettoyer" que nous définissons par là-suite :
- Dans la fonction "dessiner", nous établissons des formes correspondants à la raquette et à la balle.
- La fonction "bouger" confère un mouvement à la balle en modifiant les valeurs initiales des variables de position. Pour la raquette, on utilise la fonction "mouseY" qui permet de déterminer la position du rectangle avec la souris seulement sur l'axe des ordonnés.
- La fonction "nettoyer" supprime la trace laissée par la balle au cours de son mouvement en utilisant une nouvelle fois background().
Vacances de Février (du 16 / 02 / 2019 au 03 / 03 / 2019)
Durant ces vacances, nous avons modifié l'idée de notre projet. Nous étions partis sur un code couleur sur les balles mais cela semblait un peu complexe. Nous avons donc décidé de créer une balle principale et des balles bonus qui apparaîtront au fur et à mesure du jeu. On ajouterait un mouvement au mur de droite ce qui complexifierais le jeu.
Pour cela, on crée une classe balle contenant les variables de position et vitesse des balles.
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;
On créé un booléen permettant de gérer la vitesse et le rebond de la balle. La vitesse correspond à la somme de la variable de position et de celle de vitesse. Pour le rebond, la condition est que la balle dépasse ou non le point d'abscisse 20. Si cette condition devient fausse, une nouvelle balle est créé et le compteur de vie est diminué.
boolean bouger() {
Px = Px + Vx;
Py = Py + Vy;
if (Px < 20) {
return false;
} else {
return true;
}
Pour différencier les balles bonus des balles normales, un void dessiner gère la couleur de l'ellipse en fonction du type de la balle. La forme et la position de la balle sont déterminées par les variables.
void dessiner() {
if (type == "normal") {
fill(#F21414);
}
if (type == "bonus") {
fill(#10E80E);
}
ellipse(Px, Py, Dx, Dy);
}
Je m'occupe maintenant de créer un void responsable de la page menu. On décide d'une couleur d'arrière-plan avec background, d'un texte à afficher avec text puis des boutons permettant d'accéder à la page jeu.
void draw_menu() {
background(0);
fill(#FFFFFF);
textSize(40);
text("P.O.N.G.", 575, 100);
text("President Of National Game company", 300, 200);
text("PLAY", 605, 503);
text("Try to pass all 3 levels and become the P.O.N.G.", 200, 700);
noFill();
stroke(#E00000);
rect(550, 50, 200, 75);
noFill();
stroke(#E00000);
rect(550, 450, 200, 75);
noFill();
stroke(#E00000);
if (mousePressed) {
if (mouseX >550)
if (mouseY >450)
if (mouseX <750)
if (mouseY <525) {
page = "jeu";
}
}
Grâce à la condition IfMousePressed et les coordonnées du bouton play, on parvient à matérialiser le bouton emmenant le joueur à l'interface de jeu.
Dans le void draw, on place un void dessiner affichant les différents éléments de l'interface de jeu : la raquette, les balles, le compteur de vie et les niveaux à passer.
void dessiner() {
// Dessine la raquette
fill(#FFFFFF);
rect(RaqX, RaqY, RaqDX, RaqDY);
// Dessine les balles
for (int i = 0; i < balles.size(); i++) {
Balle B = balles.get(i);
B.dessiner();
}
// Dessine les vies
fill(#FFFFFF);
if (vie == 3) {
ellipse(1200, 30, 25, 25);
ellipse(1150, 30, 25, 25);
ellipse(1100, 30, 25, 25);
}
if (vie == 2) {
ellipse(1200, 30, 25, 25);
ellipse(1150, 30, 25, 25);
}
if (vie == 1) {
ellipse(1200, 30, 25, 25);
}
//dessine level
if (level == 1) {
textSize(50);
text("level 1", 565, 50);
}
if (level == 2) {
text("level 2", 565, 50);
}
if (level == 3) {
text("level 3", 565, 50);
}
}
Un void bouger gère les mouvements en jeu des éléments graphiques et de modifier le compteur de vie et le best score en fonction des conditions respectées ou non.
void bouger() {
for (int i = 0; i < balles.size(); i++) {
Balle B = balles.get(i);
boolean en_jeu = B.bouger();
if (en_jeu == false) {
if (B.type == "normal") {
vie = vie-1;
if (vie > 0 && level == 1) {
balles.add(new Balle(500, 500, 8, 5, "normal"));
}
if (vie > 0 && level == 2) {
balles.add(new Balle(500, 500, 15, 8, "normal"));
}
if (vie > 0 && level == 3) {
balles.add(new Balle(500, 500, 17, 10, "normal"));
}
if (vie == 0) {
page = "GameOver";
//on entre dans la table à la ligne 0 et à la colonne 0 la variable bestScore
table.setInt(0, 0, bestScore);
//on enregistre la table avec la nouvelle valeur de la variable bestScore
saveTable(table, "data/bestScore.csv");
}
}
if (B.type == "bonus") {
RaqDY = RaqDY - 30;
}
balles.remove(i);
}
}
RaqY = (mouseY) - RaqDY/2;
}
Le void score permet d'enregistrer le best score potentiellement atteint par un joueur dans un fichier CSV.
void Score() {
textSize (40);
fill (255);
text ("score : "+str(score), 1050, 100);
text("best score : " + str(bestScore), 950, 150);
if (score > bestScore) {
bestScore = score;
}