A. À la découverte de SantaLib

Cette partie va vous apprendre à vous servir de la bibliothèque SantaLib Obj dans ses aspects les plus basiques.

Pour continuer la lecture de ce tutoriel, il est indispensable de maîtriser le HTML/CSS et le JavaScript.

La SantaLib Obj est une bibliothèque programmée en JavaScript et les jeux que vous réaliserez auront pour support une page Web HTML. Avant de dévorer ce tutoriel, il serait préférable de télécharger cette fameuse bibliothèqueTéléchargement (actuellement la version 0.3.3 BETA).

On se retrouve pour la suite ! Image non disponible

A.I. Les bases

La Santalib Objs est une bibliothèque JavaScript et PHP basée sur de l'objet permettant de créer rapidement et facilement des jeux pour le Web.

Ce tutoriel va vous permettre de comprendre comment fonctionne cette bibliothèque et comment s'en servir en réalisant un petit jeu !

A.I.i. Installation et initialisation

Installation

Tout d'abord, créez un nouveau dossier. Nommez-le comme vous voulez. Créez une arborescence dans votre dossier suivant ce modèle :

  • css : vos feuilles de style CSS ;
  • img : vos images.

Décompressez le fichier Demo_SantaLib_Objs_v.X.X.X.zip dans le dossier principal.

Nous avons besoin d'une base, d'un "support" pour réaliser notre jeu. Créez un fichier nommé index.html :

 
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <!-- Document -->
    </body>
</html>

Voilà, nous avons installé tous les outils ainsi que la base nécessaire à notre projet pour travailler dans d'excellentes conditions. Image non disponible

Initialisation

Pour que la SantaLib puisse fonctionner, nous allons devoir l'inclure dans notre page HTML. Insérez la balise suivante avant la fermeture de la balise head.

 
Sélectionnez
<script type="text/javascript" src="santalibObjs.js"></script>

Pour finir, nous allons devoir créer un élément de type div qui contiendra le jeu.

 
Sélectionnez
<body>
    <div id="init_SantaLib"></div>
</body>

Le conteneur doit toujours s'appeler init_SantaLib.


Je résume la base nécessaire pour que la bibliothèque ainsi que notre futur jeu puisse fonctionner :

 
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="santalibObjs.js"></script>
    </head>
    <body>
        <div id="init_SantaLib"></div>
    </body>
</html>


Piouf... Image non disponible Nous avons enfin réussi à installer et à initialiser tout notre bric-à-brac.

On va commencer à coder là ? Image non disponible

Oui ! Je sais que vous attendiez tous ce moment comme on attend Noël. Et bien c'est arrivé !

A.I.ii. Premiers pas

Avant de commencer cette sous-partie, insérez la balise suivante avant la balise head :

 
Sélectionnez
<script type="text/javascript">
     
</script>

L'instanciation de l'objet SantaLib

À partir de là, nous allons écrire le code de notre jeu dans la balise que nous venons de créer. La SantaLib s'instancie de cette manière :

 
Sélectionnez
function main()
{
   var game = new SantaLib();
}

La fonction main() est quant à elle appelée au onload du body. Elle sera appelée une fois que la page sera chargée :

 
Sélectionnez
<body onload="main();">


Méthode d'initialisation du jeu

Pour initialiser le jeu, la carte, etc., nous devons utiliser une méthode d'initialisation issue de l'objet créé précédemment. Voici son prototype :

 
Sélectionnez
SantaLib.init(hauteur, largeur, clavier, bordure);

Explications concernant les paramètres :

  • hauteur : un nombre entier représentant la hauteur de la carte ;
  • largeur : un nombre entier représentant la largeur de la carte ;
  • clavier : un nombre entier (1 ou 0). Si vous entrez 1, l'utilisation du clavier sera activée. Si vous entrez 0, elle sera désactivée ;
  • bordure : un booléen qui indique la présence d'une bordure autour de la carte. Je vous conseille de laisser cet argument avec la valeur true.

Initialisons notre objet game :

 
Sélectionnez
// Initialisation du jeu avec une carte de 20px de hauteur,
// 30px de largeur, l'utilisation du clavier activée
// et l'affichage de la bordure activée
game.init(30, 10, 1, true); 


Résumé du code de cette sous-partie :

 
Sélectionnez
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title></title>
     <script type="text/javascript" src="santalibObjs.js"></script>
     <script type="text/javascript">
     function main()
	 {
        var game = new SantaLib();
        game.init(30, 10, 1, true); // Rien de bien compliqué ^^
     }
     </script>
</head>
<body onload="main();">
     <div id="init_SantaLib"></div>
</body>

Parfait. Notre bibliothèque est maintenant instanciée, initialisée et prête à l'emploi.

* Ouvre sa page index.html * Quoi ? Mais il n'y a rien ! Image non disponible

Oui c'est normal, vous allez tout de suite comprendre pourquoi. Image non disponible

A.I.iii. Créer des éléments

Notre jeu est bien vide, dis donc.
Si on veut un minimum de contenu, il faut rajouter des éléments. C'est ce que nous allons faire immédiatement !

Si vous êtes curieux, vous avez pu vous apercevoir que la SantaLib est fournie avec une démonstration. C'est un Mario classique : on saute sur les blocs, on évite Bowser et les fleurs carnivores et on sauve la princesse Peach. Vous conviendrez avec moi qu'il serait inutile de télécharger un pack d'images alors que nous en avons à portée de main. Image non disponible

Comment ça ? Un pack d'images sous la main ?

Oui ! La démonstration se sert d'images qui sont dans le même dossier que notre page HTML. Nous allons donc utiliser ces images.


Créer et ajouter un élément sur la carte avec pushElement()

Pour créer et ajouter un élément, nous devons faire appel à une méthode pushElement(). Voici son prototype :

 
Sélectionnez
SantaLib.pushElement(axe_x, axe_y, nom_image);

Explications des paramètres :

  • axe_x : c'est le point d'abscisse du coin supérieur gauche de l'élément ;
  • axe_y : c'est le point d'ordonnée du coin supérieur gauche de l'élément ;
  • nom_image : c'est le chemin qui pointe vers l'image que vous attribuerez à l'élément. Il faut écrire le nom de l'image sans son extension.

Si vous êtes fainéant, il existe également un alias de la méthode qui s'appelle pushEl(). Image non disponible

Par exemple, je choisis l'image perso1.png et je crée un élément qui se situera en (10;10).

 
Sélectionnez
game.pushElement(10, 10, "perso1");

Pour obtenir le point d'abscisse d'un élément on utilise la méthode suivante :

 
Sélectionnez
SantaLib.getItemCoordX(nom_image);

Voici la méthode pour le point d'ordonnée d'un élément :

 
Sélectionnez
SantaLib.getItemCoordY(nom_image);

Maintenant, il faut blitter la carte ainsi que tous ses éléments.

Blitter signifie dans le jargon des bibliothèques graphiques (telles la SDL, la SFML, etc.) afficher ou coller un élément dans la fenêtre de jeu.

Blitter la carte avec pushMap()

Pour blitter la carte, il faut appeler pushMap(). Voici son prototype :

 
Sélectionnez
SantaLib.pushMap();

Cette fonction ne prend aucun paramètre, donc pas d'explication. Image non disponible

Pour finir, nous allons donc blitter notre élément sur la carte et afficher la mise à jour.

 
Sélectionnez
game.pushMap();

Voici un résumé de notre code :

 
Sélectionnez
var game = new SantaLib();          
game.init(30, 10, 1, true);
game.pushElement(10, 10, 'perso1');
game.pushMap();

Ça y est ! Vous pouvez enfin reposer vos doigts endoloris et admirer le résultat. Image non disponible

Image non disponible

Pour rendre le conteneur du jeu plus visible, changez le background-color de votre body à la valeur #000000.

A.I.iv. Des formes géométriques avec Mario

Précédemment nous avons appris à installer et à initialiser la bibliothèque. Nous avons également appris comment l'instancier, comment créer un élément et comment blitter la carte. Comme vous avez pu le remarquer, le code est vraiment minimaliste. On reste dans la simplicité la plus totale avec cette bibliothèque. C'est d'ailleurs cette simplicité qui fait sa force. Parce que plus c'est simple et plus vous avez l'occasion... de créer des choses compliquées ! Image non disponible

Mon Dieu, tu vas nous obliger à programmer Call of Duty sur notre navigateur avec nos doigts de pieds la tête en bas ?

À vrai dire, j'y avais pensé. Mais je préfère faire quelque chose de plus utile : on va réapprendre la géométrie avec Mario ! D'ailleurs, les différentes parties de ce TP ressembleront plus à des exercices qu'à plusieurs étapes de réalisation d'un quelconque jeu.

1re partie - Consignes

À l'aide de vos connaissances en JavaScript et en algorithmique, réalisez une fonction qui permet de dessiner une forme de rectangle avec l'image que nous avons utilisée dans les sous-parties précédentes.

Contrainte (ou aide Image non disponible) : le prototype de la fonction doit être identique à ce modèle : creerRectangle(longueur, largeur, nom_image);. Je ne vous aide pas car c'est relativement simple à réaliser. Normalement vous n'aurez qu'à creuser vos méninges pendant cinq petites minutes pour trouver la solution.

La longueur ou la largeur ne doivent pas être supérieures à celles de la fenêtre. Si vous souhaitez faire de grandes formes, modifiez la longueur et la largeur dans la méthode game.init().

Correction

Je vais vous montrer la fonction que j'ai réalisée. Néanmoins, il existe plusieurs solutions. Tant que vous arrivez au même résultat que le mien, il n'y a pas de souci.

 
Sélectionnez
function creerRectangle(longueur, largeur, nom_image) {        
    for(var i = 0; i <= longueur; i++) {                
        for(var j = 0; j <= largeur; j++) {               
            game.pushElement(i, j, nom_image);                          
        }                              
    }                             
}

Explication du code : on réalise deux boucles for qui s'incrémentent jusqu'à atteindre la longueur et la largeur souhaitées. À chaque tour de boucle, un Mario est créé en longueur ou en largeur.

Résultat

Voici ce que ça donne si on appelle creerRectangle(10, 10, "perso1"); :

Image non disponible

Pour récapituler, votre code devrait ressembler à ceci :

 
Sélectionnez
function creerRectangle(longueur, largeur, nom_image) {
   for(var i = 0; i <= longueur; i++) {                 
      for(var j = 0; j <= largeur; j++) {                    
         game.pushElement(i, j, nom_image);                           
      }                                     
   }                             
}

function main()
{
   var game = new SantaLib();          
   game.init(30, 10, 1, true);
   creerRectangle(10, 10, "perso1");
   game.pushMap();
}

Vous n'avez pas réussi ?

Alors je vous invite à relire votre code, à trouver la faute et à réessayer de faire la fonction sans la correction. Image non disponible

2e partie - Consignes

Dans notre premier TP nous avons vu comment créer des formes géométriques. Image non disponible Maintenant nous allons voir comment le mettre en pratique pour créer un petit décor pour notre super Mario ! Car le pauvre, depuis le début de ce tutoriel, il est comme un poisson rouge dans un bocal vide. Et hop, de l'herbe ! Image non disponible On enregistre cette image dans le même dossier que notre projet et on la renomme en "herbe" (pour faire simple Image non disponible). Donc maintenant on va repartir de notre ancien code :

 
Sélectionnez
function creerRectangle(longueur, largeur, nom_image) {
    for(var i = 0; i <= longueur; i++) {    
        for(var j = 0; j <= largeur; j++) {   
            game.pushElement(i, j, nom_image);                 
        }                
    }                 
}

Et l'améliorer de façon à créer un sol rempli d'herbe à notre super Mario. Image non disponible

Pour commencer, nous allons rajouter deux paramètres importants à notre fonction, la position x et y où l'on souhaite positionner notre triangle. Je vous laisse à vos claviers faire vos tests (et pas de triche !).

Tenez compte de la taille de la Map. Si vous positionnez un rectangle trop grand à l'extrémité de la Map, vous ne parviendrez pas à faire fonctionner le jeu.

Correction

Voici la solution que je vous propose, il y a de multiples façons de le faire, le principal reste que vous réussissiez l'exercice.

 
Sélectionnez
function creerRectangle(x, y,longueur, largeur, nom_image) {
   longueur += x;
   largeur += y;
   for(var i = x; i <= longueur; i++) {                 
      for(var j = y; j <= largeur; j++) {                    
         game.pushElement(i, j, nom_image);                           
      }                                     
   }                             
}

Résultat

Notre objectif est… (ralala aucune mémoire !!!) de mettre de l'herbe sous les pieds de notre Mario. Image non disponible

Image non disponible

En modifiant cette fonction, votre code devrait ressembler à peu près à celui-ci :

 
Sélectionnez
function creerRectangle(x, y,longueur, largeur, nom_image) {
   longueur += x;
   largeur += y;
   for(var i = x; i <= longueur; i++) {                 
      for(var j = y; j <= largeur; j++) {                    
         game.pushElement(i, j, nom_image);                           
      }                                     
   }                             
}

function main()
{
   var game = new SantaLib();          
   game.init(30, 10, 1, true);
   creerRectangle(10,1,0, 29, "herbe");
   game.pushMap();
}

Hey ! Vous venez de réaliser votre première Map SantaLib !

A.I.v. Utilisation du clavier

Bon bon, c'est bien d'avoir une Map, mais ce n'est pas drôle s'il n'y a pas d'animation. Image non disponible

Cette sous-partie va vous permettre de donner vie à votre super Mario, et probablement à d'autres créations Super Mega Top Cool de votre génie. Image non disponible

Moins drôle tout d'abord, nous allons faire un peu de théorie. Image non disponible Si vous n'avez pas encore initialisé votre clavier via game.init(30, 10, 1, true); ou "1" signale que le clavier doit être activé, il est temps pour vous d'activer cette fonctionnalité ! Image non disponible (Oui je sais, vous regrettez déjà amèrement de ne pas l'avoir fait dès le début.) Voici donc comment l'activer (le clavier, on parle toujours du clavier Image non disponible) :

 
Sélectionnez
game.useKeyBoard();

L'appel de la fonction useKeyBoard() peut se faire à n'importe quel moment.

Dans votre jeu, vous pourrez récupérer des touches grâce à une petite fonction magique getTouche();. Pas besoin de paramètre :

 
Sélectionnez
game.getTouche();

Apprentissage au maniement de getTouche()

Dans ce TP nous allons afficher un alert à chaque fois que l'utilisateur pressera une touche. L'exercice est simple. Vous allez faire une fonction "récursive" Image non disponible (WTF ! Il est fou ce type !)

Une fonction dite récursive est une fonction qui s'appelle elle-même.

Bon, vous noterez que j'ai mis entre guillemets le "récursive". Il vous faudra trouver une solution pour que la fonction se rappelle en boucle, sans que le navigateur ne s'enflamme… Allez, bande de fainéants, au boulot ! Et pas de quartier !
Indice : Google -> setTimeout();.

Correction

Voici la petite fonction que j'ai faite :

 
Sélectionnez
function recuperationDeTouche() {
   var Touche = game.getTouche();
   
   if (Touche){
      alert(Touche);
   }
   
   setTimeout(recuperationDeTouche, 250);
}

Résultat

La fonction se rappelle toutes les 0.250 seconde et si une touche est pressée elle nous l'affiche dans un alert(). Donc testez quelques touches directionnelles. Voici un exemple lorsque j'appuie sur la touche directionnelle gauche :

Image non disponible

Faire bouger notre personnage

Dans ce TP nous allons voir, en réutilisant notre fonction, comment déplacer notre personnage sur notre belle pelouse. Image non disponible Ne commencez pas tout de suite à pleurer, je vous garantis que c'est facile. Image non disponible La SantaLib possède une petite série de fonctions liées au déplacement d'éléments sur la Map :

 
Sélectionnez
game.moveRight(element);
game.moveLeft(element);
game.moveUp(element);
game.moveDown(element);

Ces quatre fonctions sont reliées à une fonction "mère" : game.move(element, x, y, param). Cette fonction est beaucoup plus fortiche que toutes les autres ! On lui indique que l'on souhaite déplacer un élément en x et en y ! param est un booléen permettant de rafraichir ou non les zones de déplacement !
Bref STOP la théorie, on veut de la pratique. Image non disponible

Pour déplacer notre super Mario sur la droite, nous procéderons ainsi : game.moveRight(element). Maintenant votre objectif va être de déplacer votre super Mario à droite ou à gauche en fonction des touches directionnelles. C'est parti ! Vous avez trois minutes !

Correction

Une petite esquisse de mon grand cervelet.

 
Sélectionnez
function deplacementGaucheDroite() {
   var Touche = game.getTouche();

   switch(Touche){
      case 37:
      game.moveLeft('perso1');
      break;
      case 39:
      game.moveRight('perso1');
      break;
   }
   
   setTimeout(deplacementGaucheDroite(), 100);
}

Résultat

Voilà : avec ça votre personnage pourra se déplacer à gauche et à droite de votre Map !

Image non disponible


Pour la suite des opérations et pour repartir sur de bonnes bases, je vous joins mon code complet :

 
Sélectionnez
function creerRectangle(x, y,longueur, largeur, nom_image) {
   longueur += x;
   largeur += y;
   
   for(var i = x; i <= longueur; i++) {                 
      for(var j = y; j <= largeur; j++) {                    
         game.pushElement(i, j, nom_image);                           
      }                                     
   }                             
}
		
function deplacementGaucheDroite() {
   var Touche = game.getTouche();
   
   switch(Touche){
      case 37:
      game.moveLeft('perso1');
      break;
      case 39:
      game.moveRight('perso1');
      break;
   }
   
   setTimeout(deplacementGaucheDroite, 100);
}

function main()
{		
   var game = new SantaLib();          
   game.init(30, 10, 1, true);
   creerRectangle(10,1,0, 29, "herbe");
   game.pushElement(9, 2, 'perso1');
   game.pushMap();
   deplacementGaucheDroite()
}

Vous voyez, ce n'était pas dur. Image non disponible

En annexe à ce TP : les touches récupérées par getTouche() ont une courte durée de vie et sont effacées régulièrement. Pour conserver un accès à la touche sans qu'elle soit effacée, utilisez ceci :

 
Sélectionnez
game.manageBloquant = false;

Voilà, vous êtes maintenant un pro de la gestion clavier et des déplacements !

A.I.vi. Actions

Vous y êtes parvenu, vous êtes là bien en chair et en os ! De vrais guerriers suintant de sueur ! Ce que vous avez vu n'est rien, vous allez en baver ! Mouahahaha...

Dans cette sous-partie nous allons voir quelques tâches automatisées par la SantaLib, comme gérer la pesanteur, gérer des collisions entre ennemis, donner les capacités à notre personnage d'être manœuvrable depuis les flèches directionnelles…

Tout commence en rajoutant un ennemi à notre Mario ! Il s'appelle badboy0. Image non disponible
Placez-le à l'opposé de super Mario sur votre Map de façon à obtenir ceci :

Image non disponible

Tapi dans l'ombre, caché à l'autre bout de la Map, il attend !

Voici l'horrible secret qui permet au méchant de faire du mal à Mario :

 
Sélectionnez
game.addEnnemy('cible','tueur');

À vous de jouer. Vous devez faire en sorte que l'ennemi de Mario devienne désormais un tueur ! Voici la solution :

 
Sélectionnez
game.addEnnemy('perso1','badboy0');

Cependant, Mario sait qu'il dispose d'un pouvoir magique. Il sait envoyer des boules de feu ! Image non disponible La boule de feu étant le point faible de badboy0, Mario a maintenant l'avantage !

Pour faire partir un élément depuis un autre (effet missile) servez-vous de ces fonctions-ci :

 
Sélectionnez
game.SendFireLeft('boule2feu', 'perso1'); 
game.SendFireRight('boule2feu', 'perso1'); 
game.SendFireUp('boule2feu', 'perso1'); 
game.SendFireDown('boule2feu', 'perso1');

Et utilisez la fonction getTouche() pour faire tirer des boules de feu à Mario ! Cependant, n'oubliez pas de définir la boule de feu (boule2feu) comme ennemi de notre fameux badboy0.

Image non disponible

Solution

Pour ma part j'ai choisi la touche espace pour faire tirer à mon super Mario des boules de feu. En retouchant un peu à notre fonction deplacementGaucheDroite(), j'ai modifié notre switch :

 
Sélectionnez
function deplacementGaucheDroite() {
   var Touche = game.getTouche();
   
   switch(Touche){
      case 37:
      game.moveLeft('perso1');
      break;
      case 39:
      game.moveRight('perso1');
      break;
      case 32 :
      game.SendFireRight('boule2feu', 'perso1'); 
      break;
   }
   
   setTimeout(deplacementGaucheDroite,100);
}

J'ai aussi ajouté une ligne pour définir la boule2feu comme ennemi de badboy0 :

 
Sélectionnez
game.addEnnemy('badboy0','boule2feu');

ET PAF ! Ça fait des chocapics ! Image non disponible

Jouons de la pesanteur

Vous êtes bien d'accord que si le sol se dérobe sous vos pieds, vous tombez. Il en est de même pour nos personnages. On appelle ça la pesanteur. Image non disponible (Cours de sciences appliquées fini.) Voili Voilà, passons aux choses sérieuses ! Peach a été capturée par notre méchant (pas d'idée misogyne messieurs Image non disponible). Image non disponible

Et au travail : placez Peach au-dessus de badboy0.

Image non disponible

C'est ici que les choses se corsent ! Malgré votre indépendance (petite blague pour les Corses Image non disponible). Si le méchant disparait subitement, Peach devra tomber dans l'herbe (en toute logique... Ne me regardez pas comme ça). Servez-vous donc de ceci pour la soumettre à la pesanteur :

 
Sélectionnez
game.initializeApesanteur('peach');

Voilà, une boule de feu, le badboy0 disparait et Peach tombe dans l'herbe. C'est beau ça, non ? Image non disponible

Un peu d'interaction dans ce jeu 'statique'

Une fonction de la SantaLib permet d'animer de façon aléatoire des éléments de votre Map. On l'utilise généralement par flemme de donner un raisonnement à des méchants, ou pour mettre des passants dans votre RPG… Dans le cas présent, nous allons utiliser cette super fonction pour mettre des nuages dans le ciel vide de Mario. Image non disponible Votre objectif est de placer le nuage dans le ciel de notre jeu et d'utiliser le code ci-dessous pour votre nuage :

 
Sélectionnez
game.isBot('nuage');

Votre nuage sera converti en bot et donc prendra vie !

Image non disponible

Pour simplifier vos lignes de code et ne pas avoir à faire une fonction qui gère les déplacements de votre personnage principal, une fonction toute faite vous permet de les gérer. Par exemple, dans notre super Mario, au lieu d'avoir notre code comme ça :

 
Sélectionnez
function creerRectangle(x, y,longueur, largeur, nom_image) {
   longueur += x;
   largeur += y;
   
   for(var i = x; i <= longueur; i++) {                 
      for(var j = y; j <= largeur; j++) {                    
         game.pushElement(i, j, nom_image);                           
      }                                     
   }                             
}
		
function deplacementGaucheDroite() {
   var Touche = game.getTouche();
   
   switch(Touche){
      case 37:
      game.moveLeft('perso1');
      break;
      case 39:
      game.moveRight('perso1');
      break;
      case 32 :
      game.SendFireRight('boule2feu', 'perso1'); 
      break;
   }
   
   setTimeout(deplacementGaucheDroite, 100);
}

function main()
{		
   var game = new SantaLib();          
   game.init(30, 10, 1, true);
   creerRectangle(10,1,0, 29, "herbe");
   game.pushElement(9, 2, 'perso1');
   game.pushElement(8, 28, 'peach');
   game.pushElement(9, 28, 'badboy0');
   game.addEnnemy('perso1','badboy0');
   game.addEnnemy('badboy0','boule2feu');
   game.pushElement(5, 15, 'nuage');
   game.isBot('nuage');
   game.pushMap();
   deplacementGaucheDroite();
}

Oui, n'oublions pas que nous travaillons sur le même code depuis le début.
Nous aurons juste ça :

 
Sélectionnez
function creerRectangle(x, y,longueur, largeur, nom_image) {
   longueur += x;
   largeur += y;
   
   for(var i = x; i <= longueur; i++) {                 
      for(var j = y; j <= largeur; j++) {                    
         game.pushElement(i, j, nom_image);                           
      }                                     
   }                             
}
		
function deplacementGaucheDroite() {
   var Touche = game.getTouche();
   
   switch(Touche){
      case 32 :
      game.SendFireRight('boule2feu', 'perso1'); 
      break;
   }
   
   setTimeout(deplacementGaucheDroite, 100);
}

function main()
{		
   var game = new SantaLib();          
   game.init(30, 10, 1, true);
   creerRectangle(10,1,0, 29, "herbe");
   game.pushElement(9, 2, 'perso1');
   game.pushElement(8, 28, 'peach');
   game.pushElement(9, 28, 'badboy0');
   game.addEnnemy('perso1','badboy0');
   game.addEnnemy('badboy0','boule2feu');
   game.pushElement(5, 15, 'nuage');
   game.isBot('nuage');
   game.pushMap();
   game.managePerso('perso1');
   deplacementGaucheDroite();
}

Déterminer quand on a gagné la partie

Mario a pour objectif de tuer badboy0. Cependant, une fois badboy0 mort, rien ne se passe… Votre mission dans ce TP est de détecter quand badboy0 aura été éliminé, donc aura reçu une boule de feu en pleine poire ! Servons-nous de notre fonction actuelle deplacementGaucheDroite() que nous renommerons partout maintenant routine() car c'est un peu la routine de notre jeu. Image non disponible Nous y placerons un test de continuité. Si Mario ou badboy0 ne sont plus sur la Map, alors elle s'arrête. Pour savoir si Mario est toujours sur la Map, la fonction utilisée est :

 
Sélectionnez
game.ExistItem('perso1');

Elle retourne un booléen à true lorsque Mario est sur la Map, sinon… Image non disponible il aura disparu. À vous de jouer. Vous devez mettre en place le cas ou Mario gagnerait… ou bien l'inverse !

Solution

Vous l'attendiez, voici la solution !

Image non disponible
 
Sélectionnez
function creerRectangle(x, y,longueur, largeur, nom_image) {
   longueur += x;
   largeur += y;
   
   for(var i = x; i <= longueur; i++) {                 
      for(var j = y; j <= largeur; j++) {                    
         game.pushElement(i, j, nom_image);                           
      }                                     
   }                             
}
		
function routine() {
   var Touche = game.getTouche();
   
   switch(Touche){
      case 32 :
      game.SendFireRight('boule2feu', 'perso1'); 
      break;
   }
   
   if (game.ExistItem('perso1')  && game.ExistItem('badboy0')){
      setTimeout("routine();",100);
      return 0;
   }
   else
   {
      alert('Fin de la partie');
   }
}

function main()
{		
   var game = new SantaLib();          
   game.init(30, 10, 1, true);
   creerRectangle(10,1,0, 29, "herbe");
   game.pushElement(9, 2, 'perso1');
   game.pushElement(8, 28, 'peach');
   game.pushElement(9, 28, 'badboy0');
   game.initializeApesanteur('perso1');
   game.initializeApesanteur('peach');
   game.initializeApesanteur('perso1');
   game.addEnnemy('perso1','badboy0');
   game.addEnnemy('badboy0','boule2feu');
   game.pushElement(5, 15, 'nuage');
   game.isBot('nuage');
   game.pushMap();
   game.managePerso('perso1');
   game.manageBloquant = false;
   routine();
}

Voili voilou, vous commencez à devenir des experts de la SantaLib, de vrais champions. Ce n'est pas si compliqué. Image non disponible

Ne pas confondre la SantaLib Objs et la SantaLib Originale, l'une est une bibliothèque, l'autre permet de concevoir à partir de l'existant.

A.II. Annexes : propriétés et méthodes de la bibliothèque

A.II.i. Les méthodes avancées

Voici quelques méthodes spécifiques, utiles pour déboguer vos programmes.

Concernant le débogage :
Cette fonction rafraichira les images autour des coordonnées x et y.

 
Sélectionnez
game.refreshZone(x,y);
Image non disponible

Celle-ci affichera la Map sous forme de caractères contenus dans le tableau de données :

 
Sélectionnez
game.pushMapChar();

On peut à tout moment récupérer le tableau de la Map pour un traitement (sauvegarde, jeux en réseau…).

 
Sélectionnez
game.postMap(page, nom)
  • page : la page qui recevra la Map ;
  • nom : le nom qui sera donné à notre Map.

Par exemple :

 
Sélectionnez
game.postMap("save.php", "MaPartie")

La page save.php recevra un $_POST['MaPartie'] qui contiendra la Map. Image non disponible

Il est possible de simuler une touche avec la méthode :

 
Sélectionnez
game.simulateTouch(keycode);

keycode correspond au code de la touche que vous souhaitez simuler dans le jeu. Par exemple, vous voulez simuler la touche droite :

 
Sélectionnez
game.simulateTouch(39);

La sérialisation est un outil intéressant pour voir ce qui se passe ou bien comment sont construits vos objets. Rien de plus simple :

 
Sélectionnez
game.serialize(cequevousvoulez)

cequevoulez : une variable, un objet…


Les actions préprogrammées :
La SantaLib permet de gérer une pile d'actions que l'on peut modifier, supprimer, ajouter, exécuter individuellement ou collectivement. Utile pour des jeux avec des animations ou des jeux qui nécessitent des règles comme les jeux d'échecs. Pour ajouter des actions à la pile, on utilise :

 
Sélectionnez
game.addAction(nom, action);
  • nom : le nom de l'action ;
  • action : la fonction à exécuter.

Par exemple :

 
Sélectionnez
game.addAction('cavalier','moveUp("5")'); 
game.addAction('Dame','moveLeft("666")');

Ce code ajoutera deux éléments à la pile "cavalier" et "Dame" qui auront chacun une action définie. Il est possible de la modifier :

 
Sélectionnez
game.setAction(nom, action);

Par exemple :

 
Sélectionnez
game.addAction('Dame','moveLeft("666")'); 
game.setAction('Dame','moveRight("666")');

L'action "Dame" sera définie pour aller à gauche, puis modifiée pour aller à droite. On peut exécuter une action individuelle :

 
Sélectionnez
game.setAction(name)

name : nom de l'action à exécuter.

Ou tout exécuter d'un coup :

 
Sélectionnez
game.runAllAction();

Par exemple :

 
Sélectionnez
game.addAction('cavalier','moveUp("5")'); 
game.addAction('Dame','moveLeft("666")');
game.runAction("cavalier");
game.runnAllAction();

J'ai défini deux actions, "cavalier" et "Dame". J'ai exécuté "Cavalier", puis j'ai exécuté toute la liste d'actions. Il est possible de vider la pile d'action (une RAZ) :

 
Sélectionnez
game.resetAction()


Concernant la customisation (INPUT, DIV, HTML, CSS…)
Avec la SantaLib il est également possible de générer des "input" personnalisés en se servant de :

 
Sélectionnez
game.CreateForm(type,style,id)

Je m'explique, il suffit de renseigner l'id que l'on souhaite donner à l'élément que nous allons créer, puis le style css et le type d'input que l'on souhaite. Par exemple, je souhaite créer un champ texte, qui s'appelle toto, et dans lequel on peut écrire en rouge :

 
Sélectionnez
game.CreateForm('text','color:red','toto')

On peut par le biais des méthodes décrites ci-dessous utiliser ces éléments. Image non disponible Pour récupérer la valeur de notre champ 'toto' nouvellement créé on utilisera :

 
Sélectionnez
game.GetValue(id);

Qui permet de renvoyer la valeur de l'élément grâce à son id.

 
Sélectionnez
game.GetValue('toto');

On peut aussi modifier la valeur de notre petit input :

 
Sélectionnez
game.ChangeValue(id,value);

On lui indique ainsi l'id de l'élément et la valeur à lui affecter. Admettons que je souhaite écrire 'tadam !' dans mon champ texte, je m'y prendrais ainsi :

 
Sélectionnez
game.ChangeValue('toto','tadam !');

Et pour plus de customisation, SantaLib permet de toucher directement au code HTML de la page ! Comme pour la création d'input nous avons un :

 
Sélectionnez
game.GetHTML(id)

Qui permet de retourner le contenu HTML d'une div. Et :

 
Sélectionnez
game.ChangeValue(id, HTML)

Qui permettra de remplacer, écrire, ou bien modifier le contenu HTML de la div indiquée !

A.II.ii. Les propriétés avancées

La SantaLib est un objet. Elle possède donc des paramètres tels que :

  • this.version : permet de récupérer le numéro de version ou de le modifier.

Les tailles de la Map :

  • this.width : largeur de la Map ;
  • this.height : hauteur de la Map ;
  • this.CoefM: spécifique, ne pas toucher. Fait le lien entre le tableau de données et l'affichage graphique.

Il est conseillé de les modifier en utilisant les méthodes de redimensionnement de la Map.

La couleur de la div contenant le jeu est à modifier avant d'utiliser le loading :

  • this.bgcolor.

La propriété suivante permet de passer les touches en non bloquantes (onkeypress != onkeyup)

  • manageBloquant.

Celle-ci permet de contrôler la pesanteur qui lie tous les éléments :

  • this.apesanteur : passé à false, aucun élément ne sera soumis à la pesanteur ;
  • this.timeApesanteur : on peut aussi augmenter la pesanteur ou la diminuer.

A.II.iii. Les cookies

On initialise un cookie de cette manière, rien de plus simple, un nom, une valeur et le tour est joué :

 
Sélectionnez
game.SetCookie(name,value)

Pour récupérer son contenu, rien de plus simple :

 
Sélectionnez
game.ReadCookie(name)

A.II.iv. La date et l'heure

Commençons par récupérer l'heure :

 
Sélectionnez
game.GetTime()

Puis la date :

 
Sélectionnez
game.GetDate()

Alors, pas si difficile. Image non disponible

A.II.v. Animation

Il est possible que pendant vos jeux vous souhaitiez faire un affichage progressif d'images un peu comme une vidéo qui raconterait l'histoire du jeu. SantaLib fournit une méthode :

 
Sélectionnez
game.DrawPicture(picture, timing)

En clair, il suffit de renseigner le lien de l'image (picture) et le temps d'affichage (timing) de celle-ci. Par exemple :

 
Sélectionnez
game.DrawPicture('http://www.developpez.com/template/images/logo.png', 2)

Cette instruction affichera le logo de Developpez sur votre écran pendant deux secondes.

B. SantaLib Objs et Ajax : SantaJax

Pour rappel, la SantaLib Objs vous permet de concevoir en PHP ou en JavaScript des jeux à une vitesse folle. Cependant, avant la version 0.3.0, les capacités de l'Ajax n'étaient pas incluses par défaut. Un gros défaut pour une bibliothèque de jeux qui se dit être complète. Pour y remédier, l'équipe a decidé de mettre au point sa propre version d'utilisation de l'Ajax. À la fin de ce tutoriel, vous serez capable d'utiliser la SantaJax !

B.I. Définition, prototypage

Nous allons commencer par étudier l'appel de la SantaJax :

 
Sélectionnez
function SantaJax(method, url, array,action)
  • method : "POST" ou "GET" ;
  • url : la page cible ;
  • array : un tableau de valeurs ;
  • action : code JavaScript à exécuter après réception de la réponse.

La réponse du serveur se fera au travers de : SantaJax.reponse.

Afin de mieux comprendre son fonctionnement, nous allons faire un exercice. L'objectif sera d'envoyer une requête GET et une requête POST avec des données vers une page PHP.

B.II. Une page PHP

Nous allons donc faire une page PHP qui recevra nos données et les affichera. Créons un fichier SantaJax_Demo.php.

 
Sélectionnez
<?php
 print_r($_GET);
 print_r($_POST);
?>

Un code basique dans lequel on affiche les tableaux POST et GET reçus.

B.III. Appel depuis la SantaLib

Dans un même dossier, nous allons télécharger depuis le site la dernière version de la SantaLib et créer une page : SantaJax_Demo.html.

 
Sélectionnez
<html>
   <head>
      <title>Démo de SantaJax</title>
      <script src="santalibObjs.js"></script>
      <script type="text/javascript">
      function main()
      {
         // ...
      }
      </script>
   </head>
   <body onload="main();">
   </body>
</html>

Jusque-là, rien de bien méchant. On a juste inclus la bibliothèque. Nous allons maintenant créer notre script qui appellera notre page : SantaJax_Demo.php.

 
Sélectionnez
function main()
{
   array  = new Array();
   array['nom']='John Conor';
   array['type']='Humain';
   array['age']='24';

   SantaJax("POST", "SantaJax_Demo.php", array,"alert('Requête POST =>'+SantaJax.reponse);");
   SantaJax("GET", "SantaJax_Demo.php", array,"alert('Requête GET =>'+SantaJax.reponse);");
}

Analysons un peu les deux requêtes. On voit donc de façon très explicite le type de requête (POST/GET) et la page cible. Maintenant, analysons un peu "array". C'est un tableau. On lui affecte trois colonnes : nom, type et age qui contiennent des valeurs. Quant au dernier paramètre, c'est juste le code qui sera exécuté après la requête. Image non disponible Ici, on se contentera d'afficher un message contenant la réponse.

B.IV. Aperçu final

On peut maintenant constater le rendu final :

Image non disponible

Suivi de :

Image non disponible

Vous êtes maintenant en mesure d'utiliser la SantaJax.

C. Remerciements

Developpez remercie Mario Gosparini, Corentin Pillet et Erulk pour nous avoir autorisé à publier cet article.
Developpez remercie également ClaudeLELOUP pour sa relecture orthographique attentive et djibril pour ses conseils de mise en page.