Étape 1

//déclaration des variables
var smiley;
var img1;
var vitessex=5;
var vitessey=5;
//chargement de l'image
function preload() {
  img1=loadImage("data/smiley.png");
}

function setup() {
  createCanvas(800, 300);
  //création du sprite à la position (780,260) du canvas
  smiley=createSprite(780, 260);
  //chargement de l'image dans le sprite
  smiley.addImage(img1);
 }

function draw() {
  background(150,176,188);
  //appel de la fonction mouvement
  mouvement();
  //affichage des sprites
  drawSprites();
}

function mouvement(){
  if (keyIsDown(LEFT_ARROW)){
    smiley.position.x=smiley.position.x-vitessex ;
  }
  if (keyIsDown(RIGHT_ARROW)){
    smiley.position.x=smiley.position.x+vitessex ;
  }
  if (keyIsDown(UP_ARROW)){
    smiley.position.y=smiley.position.y-vitessey ;
  }
  if (keyIsDown(DOWN_ARROW)){
    smiley.position.y=smiley.position.y+vitessey ;
  }
}

• Enregistrez l'image du Smiley et glissez-déposez la dans le sketch précédemment préparé avec la librairie p5play


• Écrire le programme ci-contre


• Les sprites sont automatiquement mis en mode "center" c'est à dire que les coordonnées, par exemple: (780,260), sont celles du centre du rectangle qui contient l'image (qui fait 40x40 pixels)


• Remarquez que l'instruction smiley.position.x permet de relever la position en x du smiley


• Le programme est commenté, pour vous premettre de mieux le comprendre...

    var mur_h,mur_b,mur_g,mur_d;
                            

    // création des murs
    mur_g=createSprite(-5,150,12,300);
    mur_d=createSprite(805,150,12,300);
    mur_h=createSprite(400,-5,800,12);
    mur_b=createSprite(400,305,800,12);
    //couleur de remplissage(rouge) des murs
      mur_g.shapeColor=color(222, 0, 0);
      mur_d.shapeColor=color(222, 0, 0);
      mur_h.shapeColor=color(222, 0, 0);
      mur_b.shapeColor=color(222, 0, 0);
    // les "murs" sont statiques
    mur_d.immovable=true;
    mur_g.immovable=true;
    mur_h.immovable=true;
    mur_b.immovable=true;
                            

  smiley.bounce(mur_d);
  smiley.bounce(mur_g);
  smiley.bounce(mur_h);
  smiley.bounce(mur_b);
  //appel de la fonction mouvement
                            

• On déclare quatre nouvelles variables (sur une même ligne) c'est plus rapide...


• On crée les sprites des murs


• On leur applique une couleur de remplissage avec la propriété shapeColor (on la voit car les murs rentrent de 2 pixels dans le canvas)


• On leur applique la propriété "immovable" sinon ils bougeraient avec la collision du smiley...


• Et enfin on gère la collision du smiley et des murs avec la propriété "bounce"
  

  
    smiley.bounce(mur_d);
    smiley.bounce(mur_g);
    smiley.bounce(mur_h);
    smiley.bounce(mur_b); 

var img2;
var groupe_smiley;
var smiley2;  
                            

img2=loadImage("data/smiley_blood.png");   
                            

 //creation du groupe smiley
 groupe_smiley=new Group();
for (i=0;i < 11;i=i+1){ //boucle
//creations des sprites enemmis
//avec positionnement aléatoire dans le canvas
smiley2=createSprite(random(20,780),random(20,280));
smiley2.addImage(img2);
// déplacement des ennemis
smiley2.setVelocity(random(-4,4),random(-4,4));
// on leur donne une masse
smiley2.mass=3;
// on place les ennemis dans la liste
groupe_smiley.add(smiley2);
  }   
                            

// gestion des collisions
groupe_smiley.bounce(mur_g);
groupe_smiley.bounce(mur_d);
groupe_smiley.bounce(mur_h);
groupe_smiley.bounce(mur_b);
groupe_smiley.bounce(groupe_smiley);
groupe_smiley.bounce(rect1);
groupe_smiley.bounce(rect2);
smiley.bounce(groupe_smiley); 
                            

• Enregistrez l'image du Smiley2 et glissez-déposez la dans le sketch


• On crée un groupe de 10 sprites (c'est en fait une liste).. avec l'instruction groupe_smiley=new Group();


• On remplit cette liste avec une boucle "for"


• Le déplacement des ennemis est assuré par l'instruction : smiley2.setVelocity(random(-4,4),random(-4,4));


• Pour la masse : il est clair que plus l'objet est lourd moins il rebondit...


• Les collisions sont gérées par l'instruction "bounce"


• Vous remarquerez que notre smiley se met à rebondir sur les ennemis!!! Et ce n'est pas ce que l'on souhaite. Si nous rajoutons dans le setup() "smiley.immovable=true" cela permet de ne plus avoir de rebond avec les ennemis, mais cela entraîne que le smiley peut denouveau sortir de la fenêtre (mince alors!!)
• Voilà ce qu'il faut faire pour contourner ce problème:

1. Supprimez la ligne "smiley.bounce(groupe_smiley);"
2. Rajoutez dans le setup()

smiley.immovable=true;
                                

3. Modifiez la fonction mouvement en :

function mouvement() {
      
if (keyIsDown(LEFT_ARROW) && smiley.position.x >20) {
      smiley.position.x=smiley.position.x-vitessex ;
    }
if (keyIsDown(RIGHT_ARROW) && smiley.position.x <width-20) {
      smiley.position.x=smiley.position.x+vitessex ;
    }
if (keyIsDown(UP_ARROW) && smiley.position.y >20) {
      smiley.position.y=smiley.position.y-vitessey ;
    }
if (keyIsDown(DOWN_ARROW) && smiley.position.y <height-20) {
      smiley.position.y=smiley.position.y+vitessey ;
    }
}                               

4. Vous pouvez également supprimer ces lignes(devenues inutiles) :

smiley.bounce(mur_d);
smiley.bounce(mur_g);
smiley.bounce(mur_h);
smiley.bounce(mur_b);