Introduction - Commençons à faire ce que l'on a déjà appris...

Le casse-briques est un jeu extrêmement connu. Il est sorti pour la toute première fois en 1975 et une quantité incroyable de clones et de variantes ont été créés depuis (et encore aujourd'hui, surtout sur mobile). Dans cet atelier, nous allons continuer la tradition en faisant notre propre clone !

L'objectif sera d'approfondir nos capacités d'utilisation des tableaux et des boucles for. Nous verrons ici comment utiliser les boucles imbriquées et maitriser les tableaux 2D. Pour finir, je vous donnerais de quoi exercer avec tout ça, en modifiant les briques.

Je vais commencer en estimant que vous êtes capables de programmer le casse-briques sans les briques mais juste la raquette, la balle, et les murs. Si vous avez du mal, je vous conseille de relire et de refaire l'atelier Pong.

// Breakout.ino //
#include <Gamebuino-Meta.h>

// 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();  // Situé dans miseAJour.ino
}

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;
    }
}

// miseAJour.ino //
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();
  }

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

void reinitialiser() {
  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
}


// 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);
}

Ici, nous avons une structure de code très similaire aux derniers jeux que nous avons fait. Nos trois fonctions entrees(), miseAJour() et affichage() sont présentes, et j'ai ajouté une quatrième fonction : reinitialiser() dans miseAJour.ino. Elle sert à remettre la balle dans l'écran en début de partie. Elle servira aussi plus tard à remettre les briques cassées. En parlant de briques... Rendez-vous à l'étape suivante !

Etape suivante