TP : Découverte de processing et P5.js

Faire le TP avec processing .

Objectif : Découvrir et créer un jeu très simple, Pong, avec P5.js.

Mise en place de P5.js

Télécharge le dossier compressé contenant les différentes ressources nécessaires : TÉLÉCHARGER

Télécharge le dossier compressé contenant les médias pour réaliser le jeu : TÉLÉCHARGER

Analyse des différentes ressources

Dans le dossier p5 se trouve les fichiers de base pour utiliser le framework p5.jS. Il est constitué :

• un fichier index.html qui faudra ouvrir dans le navigateur pour ouvrir le jeu. On y trouve aussi tous les liens vers les fichiers javascript de framework.
• u dossier p5 avec tous les fichiers javascript dont le fichier sketch.js où il faudra saisir le code.

Dans le dossier data se trouve l'image du terrain et un fichier son.

Partie 1 : Le cahier des charges

Pour créer notre Pong, on va tout d'abord dresser un cahier des charges :

• Le jeu sera seulement pour 1 joueur.
• Le terrain sera une image de côté 400px représentant un terrain de tennis.
• La raquette (là où rebondit la balle) sera un rectangle blanc et brun de dimension 15px×85px.
• Il bougera avec les touches W et X.
• La balle sera un cercle jaune de rayon 10px.
• La balle rebondira sur la raquette en faisant un bruit, sur le côté droit, sur le haut et le bas de la fenêtre.
• Si la balle sort du côté gauche, GAMEOVER s 'affiche.
• Pour rejouer une partie on appuyera sur la touche 'r'.

Partie 2 : La programmation

Le code sera saisi dans le fichier sketch.js. Ouvrez le fichier sketch.js dans notepad++.

les méthodes setup() et draw()

Voici ce qui doit s'afficher :

Le code :

function setup() {
 // Ici on saisit le code de la fonction setup()
}
function draw() {
 // Ici on saisit le code de la fonction draw()
}

La méthode setup() contiendra toutes les variables. Par exemple il faudra y déclarer les images et les sons.

La méthode draw() contiendra toutes les actions du jeu.

Le code de la métode setup()

On définit aussi la taille (400px×400px) du canvas et le lieu.

Le code :

function setup() {
  myCanvas =createCanvas(400, 400);
  myCanvas.parent('myGame');
  background(0);
  img = loadImage("data/terrain.jpg");
  son_coup = loadSound('data/coup.mp3');
  x = 200;
  y = 200;
  deplacementX = floor(random(4,8));
  deplacementY = floor(random(-4,-1));
  w = 15;
  z = 60;
}

Remarque : Il se peut qu'avec cette version de chrome l'image ne s'affiche pas hors ligne, ou pire encore que le fichier audio ne soit pas retrouvé et fasse tout bugé. Dans ce cas il suffit de mettre cette ligne en commentaire (ou la supprimer).

  //son_coup = loadSound('data/coup.mp3');

Le code de la métode draw()

Puis, on écrit le code de la méthode function draw() dans lequel nous allons appeler quatre fonctions :

• nettoyer();
• dessiner();
• bouger();
• rebondir();

Le code :

function draw()
{
nettoyer();
dessiner();
bouger();
rebondir();
}

Les autres fonctions

Ces quatre fonctions seront placer à la suite des deux méthodes setup() et draw().

Le code :

function nettoyer()
{
// à compléter
}

function dessiner()
{
// à compléter
}

function bouger()
{
// à compléter
}

function rebondir()
{
// à compléter
}

La fonction function nettoyer() permettra le rafraichissement de l'écran. Elle placera l'image le coin supérieur gauche au point (0,0) et la taille de l'image sera l×h=400×400.

Le code :

function nettoyer()
{
image(img, 0, 0,400,400);
}

Voir le résultat

La fonction function dessiner() affichera les objets à l'écran : une balle jaune et une raquette.

Le code :

function dessiner()
{
  stroke(255);
  strokeWeight(1);
  fill('brown');
  rect(w,z,15,85);
  fill('yellow');
  ellipse(x,y,20,20);
}

Voir le résultat

La fonction function bouger() animera la balle et la raquette.

Le code :

function bouger()
{
  x = x + deplacementX;
  y = y + deplacementY;
// w:87  et x:88
  if(keyIsDown(88) && z+85<400) {
     z+=4;
   }
  if(keyIsDown(87) && z>0) {
     z-=4;
   }
 
}

Voir le résultat

La sous-fonction function rebondir() gèrera les rebonds de la balle avec la raquette et les murs, ainsi que la fin de partie.

Le code :

function rebondir()
{
// si on est trop à droite ET le déplacement horizontal est positif
if (x > width-10 && deplacementX > 0)
  {
  deplacementX = -deplacementX; // inverser la valeur
  }

// si on est trop bas et le déplacement vertical est positif
if (y > width-10 && deplacementY > 0)
  {
  deplacementY = -deplacementY; // inverser la valeur
  }

// si on est trop haut et le déplacement vertical est negatif
if (y < 10 && deplacementY < 10)
  {
  deplacementY = -deplacementY; // inverser la valeur
  }
// si la balle rebondit sur la raquette
if (x < w+25 && x > w+10 && y+10 > z && y-10 < z+85)
  {
  son_coup.play();  // lance le son
  deplacementX = abs(deplacementX); // rendre positive cette valeur
  }
// gestion de la fin de partie
if (x < -12)
  {
  deplacementX = 0;
  deplacementY = 0;
  fill(255,0,0);
  textSize(28);
  text("GAMEOVER",130,150);
  textSize(18);
  text("appuyer sur ' r ' pour rejouer",100,180);
//le code de la touche r est 82 
    if(keyIsDown(82))
      {
      x = 200;
      y = 200;
      deplacementX = floor(random(4,8));
      deplacementY = floor(random(-4,-1));
      }
  }
}

Remarque : Si vous avez des problèmes avec le fichier son, il suffit de mettre cette ligne en commentaire (ou la supprimer).

  // son_coup.play();

Voir le résultat

Partie 4 : travail personnel

Tu vas insérer ce jeu dans ton site web dans la page processing dans le menu framworks JS.

1. Copier les fichiers javascript du framework p5.js dans le dossier JS de votre site web.
2. Copier les fichiers médias du jeu p5.js dans le dossier data de votre site web.
3. Ouvrir dans l'éditeur de code Notepad++, la page .html qui correspond à Frameworks JS →PROCESSING.
4. Rajouter dans la balise <head> de votre page .html, les lignes suivantes :

<script src="JS/p5.min.js"></script>
<script src="JS/... etc

5. Dans votre page .html, rajouter à l'endroit où vous désirez mettre le jeu:

<div id="myGame"></div> 

6. Mettre votre site à jour avec Filezilla.