Comment faire un chat graphique léger ?

[Sephi-Chan]

Voilà donc un exemple simple, à toi d'être imaginatif pour gérer rendre ça plus sympa. Il y a notamment du travail pour gérer le chevauchement des bulles.

Pour l'exemple, je n'utilise pas la même notation pour mes deux classes : c'est pour montrer que les deux existent (et ont des différences).

/**

 * BalloonFactory va instancier des objets Balloon.

 * On l'utilise afin de conserver l'information des

 * bulles instanciées (pour qu'elles aient un 

 * identifiant unique). On a un tableau des bulles

 * instanciées (ça peut servir pour une méthode

 * qui les masque toutes, par exemple).

 */

var BalloonFactory = function(){

  // console.log('Power Rangers, instanciation !');

  this.last_generated_id = 0;

  this.ballons = [ ];

  

  this.create = function(){

    var ballon = new Balloon(this.last_generated_id++);

    this.ballons.push(ballon);

    return ballon

  };  

}

var Balloon = function(id){

  // console.log('Power Rangers, instanciation !');

  this.id             = id;

  this.opacity        = 'half';

  this.DomElement     = null;

  this.isReadyToShow  = false;

};



Balloon.prototype.build = function(){

  this.DomElement = $('<div />')

    .attr('id', this.id)

    .addClass('balloon')

    .css({

      background  : '#fff',

      border      : '1px solid #ccc',

      padding     : '5px',

      position    : 'absolute'

    })

  ;

  

  // Pour la classe !

  this.DomElement.css({

    '-moz-border-radius'                : '15px',

    '-moz-border-radius-bottomleft'     : '2px',

    '-webkit-border-radius'             : '15px',

    '-webkit-border-bottom-left-radius' : '2px',

  });

  

  /**

   * Bien sûr, tous ces styles peuvent (et doivent ?)

   * êtres définis dans une feuille de style !

   */

   

};



Balloon.prototype.setContent = function(content){

  this.DomElement.text(content);

};



Balloon.prototype.attachTo = function(character_id){

  var characterElement = $('#character_' + character_id)[0];

  

  if(characterElement != undefined){

    var CharacterElementOffset = $(characterElement).offset();

    this.DomElement.css({

      left  : (CharacterElementOffset.left + 10) + 'px',

      top   : (CharacterElementOffset.top - 35) + 'px'

    });

    

    this.isReadyToShow = true;

  }

};



Balloon.prototype.show = function(){

  if(this.isReadyToShow){

    $('body').append(this.DomElement);

  }

};

Ensuite, dans le code Javascript de l'application :

$(document).ready(function(){

  var balloonFactory = new BalloonFactory();

  var ballon_a = balloonFactory.create();

  var ballon_b = balloonFactory.create();

  var ballon_c = balloonFactory.create();



  ballon_a.build();

  ballon_a.setContent("Moi j'aime le jambon !");

  ballon_a.attachTo(3);

  ballon_a.show();



  ballon_b.build();

  ballon_b.attachTo(8);

  ballon_b.setContent("Moi j'aime le pâté !");

  ballon_b.show();



  ballon_c.build();

  ballon_c.attachTo(2);

  ballon_c.setContent("Ben… Moi non.");

  ballon_c.show();

});

Bien sûr, tu peux ajouter une méthode à la classe Balloon qui s'occupe de lancer les 3 autres (setContent(), attachTo() et show()) histoire de rendre le code plus cool. Elle pourrait alors comme argument l'id du personnage qui s'exprime et le message qu'il prononce.

Voilà comment j'ai représenté un personnage dans mon exemple :

<div id="character_3" style="background: blue;"></div>

<div id="character_8" style="background: red;"></div>

<div id="character_2" style="background: green;"></div>

Enfin, le rendu à l'écran (Safari) :




Sephi-Chan