TP : Découverte de processing et P5.js

Faire le TP avec processing .



Ressources nécessaires :


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é :

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 :

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 :

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

Le code :

Afficher sur une nouvelle page

Masquer


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

Le code :

Afficher sur une nouvelle page

Masquer


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

Le code :

Afficher sur une nouvelle page

Masquer


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

Déplacer la raquette avec les touches W et X.

Afficher sur une nouvelle page

Masquer


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 JSPROCESSING.
  4. Rajouter dans la balise <head> de votre page .html, les lignes suivantes :
<script src="JS/p5.min.js"></script>
<script src="JS/... etc
  1. Dans votre page .html, rajouter à l'endroit où vous désirez mettre le jeu:
<div id="myGame"></div> 
  1. Mettre votre site à jour avec Filezilla.