This content is not fully available in your language 😕 You want to contribute? Send us an e-mail at hello@gamebuino.com.

Arc-En-Ciel

Step 4
Step completed?

Pour finir en beauté, ajoutons des couleurs à nos briques.

Pour ajouter des couleurs, il faut qu'on puisse différencier une brique verte d'une brique bleue. Pour cela, nous allons assigner la valeur de briques à une couleur. Donc si la brique [0][0]vaut 4, elle sera jaune par exemple. 0 sera toujours la valeur qui signifie 'pas de brique', mais les valeurs de 1 à 8 correspondront à des couleurs. Comme ça, notre logique de jeu ne sera pas affectée par ce changement :)

// affichage.ino //
void affichage() {
  // Raquette //
  // Balle //

  // Briques
  const Color arcEnCiel[8] = {
    WHITE, PURPLE, RED, YELLOW, LIGHTGREEN, GREEN, DARKBLUE, BLUE
  };
  for (int rangee = 0; rangee < GRILLE_TAILLE; rangee += 1) {
    for (int colonne = 0; colonne < GRILLE_TAILLE; colonne += 1) {
      // Sauter les briques égales à 0 //

      gb.display.setColor(arcEnCiel[ briques[rangee][colonne] - 1 ]);

      // Afficher la brique //
    }
  }
}

Pour avoir des briques colorées, il suffit de placer un gb.display.setColor() avec la bonne couleur. Le problème maintenant est de pouvoir récupérer la couleur associée.

Nous allons prendre avantage du fait que nous avons lié chaque couleur à un entier. Nous allons créer un tableau de couleurs (oui, Color est un type de variable sur Gamebuino !). La première couleur du tableau sera celle qui correspond à une valeur de 1. La deuxième sera associée à 2. La troisième à 3. Etc. Donc l'indice de chaque couleur sera presque égale à la valeur de la brique, "presque" parce que 1 correspond à la première couleur qui a un indice de 0. Donc indice couleur = valeur brique - 1.

Maintenant on peut modifier notre fonction reinitialiser() pour générer des briques de couleur. Par exemple voici une grille toute rouge :

for (int rangee = 0; rangee < GRILLE_TAILLE; rangee += 1) {
  for (int colonne = 0; colonne < GRILLE_TAILLE; colonne += 1) {
    briques[rangee][colonne] = 3;
  }
}

Voici le code complet du casse-briques :

// breakout.ino //


#include <Gamebuino-Meta.h>


// Briques. Chaque entier correspond à une valeur
const int GRILLE_TAILLE = 8;  // Grille carré
int briques[GRILLE_TAILLE][GRILLE_TAILLE];
const int BRIQUE_LARGEUR = gb.display.width() / GRILLE_TAILLE - 2;
const int BRIQUE_HAUTEUR = 3;


// Caractèristiques de la raquette
int raquetteX;
const int RAQUETTE_Y = 58;
const int RAQUETTE_LARGEUR = 10;
const int RAQUETTE_HAUTEUR = 2;


// Caractèristiques de la balle
int balleX;
int balleY;
int balleVX;
int balleVY;
const int BALLE_TAILLE = 3;


void setup() {
  gb.begin();
  reinitialiser();
}


void loop() {
  while (!gb.update());
  // INPUTS //
  entrees();


  // LOGIC //
  miseAJour();


  // DRAW //
  affichage();
}


// entrees.ino //



void entrees() {
    if (gb.buttons.repeat(BUTTON_LEFT, 1) && raquetteX > 0) {
        raquetteX -= 3;
    }
    else if (gb.buttons.repeat(BUTTON_RIGHT, 1) && raquetteX < gb.display.width() - RAQUETTE_LARGEUR) {
        raquetteX += 3;
    }
}





void miseAJour() {
  // MAJ Balle
  balleX += balleVX;
  balleY += balleVY;






  // Collisions avec les murs
  if (balleX < 0 || balleX > gb.display.width() - BALLE_TAILLE) {
    balleVX *= -1;
  }
  if (balleY < 0) {
    balleVY *= -1;
  }
  else if (balleY > gb.display.height()) {
    reinitialiser();
  }


  // Collisions avec les briques
  for (int rangee = 0; rangee < GRILLE_TAILLE; rangee += 1) {
    for (int colonne = 0; colonne < GRILLE_TAILLE; colonne += 1) {
      if (briques[rangee][colonne] == 0) {  // Ignorer les briques nulles
        continue;
      }


  int briqueX = colonne * (BRIQUE_LARGEUR + 2) + 1;
  int briqueY = rangee * (BRIQUE_HAUTEUR + 2) + 1;
  if (gb.collide.rectRect(balleX, balleY, BALLE_TAILLE, BALLE_TAILLE,
                          briqueX, briqueY, BRIQUE_LARGEUR, BRIQUE_HAUTEUR)) {
    balleVY *= -1;
    briques[rangee][colonne] = 0;  // Détruire la brique

    // Verifier qu'il reste encore des briques
    bool plusDeBriques = true;  // Si cet entier reste vrai, alors il n'y a plus de briques
    for (int x = 0; x < GRILLE_TAILLE; x += 1) {
      for (int y = 0; y < GRILLE_TAILLE; y += 1) {
        if (briques[y][x] == 0) {  // On a trouver une brique!
          plusDeBriques = false;  // ne pas reinitialiser
        }
      }
    }

    if (plusDeBriques) {
      reinitialiser();
    }
  }

}
  



  }


  // Collisions avec la raquette
  if (gb.collide.rectRect(balleX, balleY, BALLE_TAILLE, BALLE_TAILLE,
                          raquetteX, RAQUETTE_Y, RAQUETTE_LARGEUR, RAQUETTE_HAUTEUR)) {
    balleVY = -1;  // Haut
  }


}


void reinitialiser() {
  // Balle
  balleX = random(0, gb.display.width() - BALLE_TAILLE);
  balleY = RAQUETTE_Y - BALLE_TAILLE - 1;  // Juste au dessus de la raquette
  balleVX = 1;  // Droite
  balleVY = -1;  // Haut


  // Briques
  for (int rangee = 0; rangee < GRILLE_TAILLE; rangee += 1) {
    for (int colonne = 0; colonne < GRILLE_TAILLE; colonne += 1) {
      briques[rangee][colonne] = 1;
    }
  }
}





// affichage.ino //
void affichage() {
  gb.display.clear();






  // Raquette
  gb.display.fillRect(raquetteX, RAQUETTE_Y, RAQUETTE_LARGEUR, RAQUETTE_HAUTEUR);


  // Balle
  gb.display.fillRect(balleX, balleY, BALLE_TAILLE, BALLE_TAILLE);


  // Briques
  const Color arcEnCiel[8] = {
    WHITE, PURPLE, RED, YELLOW, LIGHTGREEN, GREEN, DARKBLUE, BLUE
  };
  for (int rangee = 0; rangee < GRILLE_TAILLE; rangee += 1) {
    for (int colonne = 0; colonne < GRILLE_TAILLE; colonne += 1) {
      if (briques[rangee][colonne] == 0) {
        continue;
      }
      gb.display.setColor(arcEnCiel[ briques[rangee][colonne] - 1 ]);


  int briqueX = colonne * (BRIQUE_LARGEUR + 2) + 1;
  int briqueY = rangee * (BRIQUE_HAUTEUR + 2) + 1;
  gb.display.fillRect(briqueX, briqueY, BRIQUE_LARGEUR, BRIQUE_HAUTEUR);
}
  



  }
}

Steps