J'ai repris un ancien jeu que j'avais écrit avec Processing

Il est presque fini (à part quelques bugs à la fin, quelques réglages) : www.ericgarcia.net/test

Je vais aussi rajouter quelques effets sonores.

J'ai utilisé principalement le mode p5js tout nouveau de Processing 3

J'ai aussi accès à l'éditeur en javascript sur mon linux installé avec un .deb mais s'il est bien joli les messages d'erreurs sont moins précis qu'avec Processing 3


je voudrais que le bouton rejouer à la fin provoque le réaffichage de la page dans le navigateur ça doit être simple en javascript !!!???

c'est un peu brouillon comme code mais bon, pour un premier jet je suis content que ça marche !

Je voudrais ne pas utiliser la fonction preload pour avoir une barre de défilement à la place.
ca doit être possible avec les "callback" !
si quelqu'un l'a déjà fait ça m'intéresse.



Je n'ai pas utilisé la bibliothèque Play car c'est plus facile de tout refaire que de se plonger dedans !!!

N.B. Je n'arrive pas à utiliser de fontes de caractères, ça ne semble pas marcher !!! Bizarre

Le code :

var logoTitre,fond,interro;
var YFOND=113,LARGEURVIGNETTE=125,HAUTEURVIGNETTE=120,YSTART=520,NOTFAR=10;
var ECART=1,MARGEAFFICHAGEVIGNETTES=5; // pour les positions de départ des dessins
var isSpriteDragged=false; // Pour ne pouvoir prendre qu'une vignette à la fois
var sprites,messages; // affichages dans draw()
var halt=false; // halt pour arrêter le jeu pendant les messages
var imageMessageDebut,imageMessageFinal,imageMessageOeufs,imageMessageTetard1,imageMessageTetard2,imageMessageBebe,imageMessageAdulte;
var spriteMessageDebut,spriteMessageFinal,spriteMessageOeufs,spriteMessageTetard1,spriteMessageTetard2,spriteMessageBebe,spriteMessageAdulte;
var imageJouer=[],imageRejouer=[],imageContinuer=[];
var mouseWasPressed=false;

// pour la logique de l'affichage des messages
var msg,sprt,msgVu;

function preload() {
  logoTitre=loadImage("data/logoTitre.gif");
  fond=loadImage("data/fond.jpg");
  interro=loadImage("data/interro.png");
  imageMessageDebut=loadImage("data/msgDebut.jpg");
  imageMessageFinal=loadImage("data/msgFinal.jpg");
  imageMessageOeufs=loadImage("data/msgOeufs.jpg");
  imageMessageTetard1=loadImage("data/msgTetard1.jpg");
  imageMessageTetard2=loadImage("data/msgTetard2.jpg");
  imageMessageBebe=loadImage("data/msgBebe.jpg");
  imageMessageAdulte=loadImage("data/msgAdulte.jpg");

  for (var i=0;i<2;i++) {
    imageJouer[i]=loadImage("data/jouer"+i+".png");
    imageRejouer[i]=loadImage("data/rejouer"+i+".png");
    imageContinuer[i]=loadImage("data/continuer"+i+".png");
  }
}

function setup() {
  createCanvas(640,640);
 
 


 
 
 
 
  sprites=new Sprites();
 
  sprt=[
  new Sprite("oeufs",MARGEAFFICHAGEVIGNETTES+1*(LARGEURVIGNETTE+ECART),YSTART,455,170+YFOND),
  new Sprite("tetard1",MARGEAFFICHAGEVIGNETTES+2*(LARGEURVIGNETTE+ECART),YSTART,286,275+YFOND),
  new Sprite("tetard2",MARGEAFFICHAGEVIGNETTES+3*(LARGEURVIGNETTE+ECART),YSTART,70,190+YFOND),
  new Sprite("bebe",MARGEAFFICHAGEVIGNETTES+4*(LARGEURVIGNETTE+ECART),YSTART,88,34+YFOND),
  new Sprite("adulte",MARGEAFFICHAGEVIGNETTES+0*(LARGEURVIGNETTE+ECART),YSTART,250,20+YFOND)
  ];
 
  for (var i=0;i<5;i++) sprites.add(sprt[i]);
 

  msg=[
  new MsgSprite(100,100,imageMessageOeufs,imageContinuer[0],imageContinuer[1],213,170),
  new MsgSprite(100,100,imageMessageTetard1,imageContinuer[0],imageContinuer[1],213,170),
  new MsgSprite(100,100,imageMessageTetard2,imageContinuer[0],imageContinuer[1],213,170),
  new MsgSprite(100,100,imageMessageBebe,imageContinuer[0],imageContinuer[1],213,170),
  new MsgSprite(100,100,imageMessageAdulte,imageContinuer[0],imageContinuer[1],213,170)
  ];
 
   
  messages=new Sprites();
 
  for (var i=0;i<5;i++) messages.add(msg[i]);
 
  spriteMessageDebut=new MsgSprite(100,100,imageMessageDebut,imageJouer[0],imageJouer[1],213,170);
  messages.add(spriteMessageDebut);
  spriteMessageFinal=new MsgSprite(100,100,imageMessageFinal,imageRejouer[0],imageRejouer[1],213,170);
  messages.add(spriteMessageFinal);
 
  msgVu=[false,false,false,false,false];
 
 
  // sprites.melange(); // Pour que les vignettes d'en bas soient affichées dans un ordre aléatoire
 
  // Message de départ
  halt=true;
  spriteMessageDebut.isVisible=true;
 

}

function draw() {
  background(255);
 
  // Affichage de base
  image(logoTitre,40,3);
  image(fond,0,YFOND);
 
  sprites.draw();
  messages.draw();
 
  // Gestion de l'affichage des messages
 
  for (var i=0;i<5;i++) {
    if (sprt[i].enPlace && !msgVu[i]) {
      halt=true;
      msg[i].isVisible=true;
      msgVu[i]=true;
    }
  }
 

  if (!halt) spriteMessageFinal.isVisible=true;
  for (var i=0;i<5;i++) {
    if (!msgVu[i]) spriteMessageFinal.isVisible=false;
  }
 
 
} // Fin draw()


var Sprite=function(name,startA,startB,endA,endB) { // endX/Y : positions / au fond
  this.name=name;
  this.startA=startA;
  this.startB=startB;
  this.a=startA;
  this.b=startB;
  this.endA=endA;
  this.endB=endB;
  this.vignette=fond.get(endA,endB-YFOND,LARGEURVIGNETTE,HAUTEURVIGNETTE);
  this.drag=false;
  this.enPlace=false;
  this.isVisible=true;
}

Sprite.prototype.draw=function() {
  if (this.enPlace==false) {
    image(interro,this.endA,this.endB);
    image(this.vignette,this.a,this.b);
    /*
    if (this.over()) {  // test over()
      line(this.a,this.b,this.a+LARGEURVIGNETTE,this.b+HAUTEURVIGNETTE);
      line(this.a+LARGEURVIGNETTE,this.b,this.a,this.b+HAUTEURVIGNETTE);
    }
    */
   
    // drag
    if (mouseIsPressed && halt==false) {
      if (this.drag) {
        this.a+=mouseX-pmouseX;
        this.b+=mouseY-pmouseY;
      } else {
        if (this.over() && !isSpriteDragged) {
          this.drag=true;
          isSpriteDragged=true;
          sprites.front(this.name);
        }
      }
    } else {
      if (this.drag) {
        if (this.a>this.endA-NOTFAR && this.a<this.endA+NOTFAR && this.b>this.endB-NOTFAR && this.b<this.endB+NOTFAR) { // vignette en place
          this.enPlace=true;
        } else {
          this.a=this.startA;
          this.b=this.startB;
          this.drag=false;
        }
        isSpriteDragged=false;
      }
    }
  }
}

Sprite.prototype.over=function() {
  if (mouseX>=this.a && mouseX<=this.a+LARGEURVIGNETTE && mouseY>=this.b && mouseY<=this.b+HAUTEURVIGNETTE) {
    return true;
  } else {
    return false;
  }
}

var MsgSprite=function(a,b,msgImage,buttonImage0,buttonImage1,buttonA,buttonB) {
  this.a=a;
  this.b=b;
  this.msgImage=msgImage;
  this.buttonImage0=buttonImage0;
  this.buttonImage1=buttonImage1;
  this.buttonA=buttonA;
  this.buttonB=buttonB;
  this.isVisible=false;
  this.myWidth=buttonImage0.width;
  this.myHeight=buttonImage0.height;
}

MsgSprite.prototype.buttonOver=function() {
  if (mouseX>=this.a+this.buttonA && mouseX<=this.a+this.buttonA+this.myWidth && mouseY>=this.b+this.buttonB && mouseY<=this.b+this.buttonB+this.myHeight) {
    return true;
  } else {
    return false;
  }
}

MsgSprite.prototype.buttonClicked=function() {
  if (mouseWasPressed) {
    if (!mouseIsPressed) {
      mouseWasPressed=false;
      if (this.buttonOver()) return true;
      else return false;
    }
  } else {
    if (mouseIsPressed) mouseWasPressed=true;
    return false;
  }
}

MsgSprite.prototype.draw=function() {
  image(this.msgImage,this.a,this.b);
  if (this.buttonOver()) {
    image(this.buttonImage1,this.a+this.buttonA,this.b+this.buttonB);
  } else {
    image(this.buttonImage0,this.a+this.buttonA,this.b+this.buttonB);
  }
  if (this.buttonClicked()) {
    this.isVisible=false;
    halt=false;
  }
}

var Sprites=function() {
  this.sprites=[];
}

Sprites.prototype.add=function(sprite) {
  this.sprites=append(this.sprites,sprite);
}


Sprites.prototype.draw=function() {
  if (this.sprites.length>0) {
    for (var i=0;i<this.sprites.length;i++) {
      if (this.sprites[i].isVisible) this.sprites[i].draw();
    }
  }
}

Sprites.prototype.front=function(name) { // pour ammener au premier plan la vignette "name", message d'erreur console si le name n'est pas trouvé. nécessaire pendant le "drag" d'une vignette
  noLoop(); //attendre que la réorganisation soit faite pour relancer draw() sinon clignotement d'une paire d'images
  var j,aSprite;
  if (this.sprites[this.sprites.length-1].name!=name) {
    for (var i=0;i<this.sprites.length-1;i++) {
      if (this.sprites[i].name==name) j=i;
    }
    aSprite=this.sprites[j];
    for (var i=j;i<this.sprites.length-1;i++) {
      this.sprites[i]=this.sprites[i+1];
    }
    this.sprites[this.sprites.length-1]=aSprite;
  }
  loop();
}

Dernière modification par EricRG (2016-09-07 23:35:52)