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 ! 
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 :
<!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. 
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.
<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.
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 :
<!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... 
Nous avons enfin réussi à installer et à initialiser tout notre bric-à-brac.
On va commencer à coder là ? 
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 :
<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 :
La fonction main() est quant à elle appelée au onload du body. Elle sera appelée une fois que la page sera chargée :
<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 :
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 :
// 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 :
<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 ! 
Oui c'est normal, vous allez tout de suite comprendre pourquoi. 
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.
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 :
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(). 
Par exemple, je choisis l'image perso1.png et je crée un élément qui se situera en (10;10).
game.pushElement(10, 10, "perso1");Pour obtenir le point d'abscisse d'un élément on utilise la méthode suivante :
SantaLib.getItemCoordX(nom_image);Voici la méthode pour le point d'ordonnée d'un élément :
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 :
SantaLib.pushMap();
Cette fonction ne prend aucun paramètre, donc pas d'explication.
Pour finir, nous allons donc blitter notre élément sur la carte et afficher la mise à jour.
game.pushMap();Voici un résumé de notre code :
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.
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 ! 
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 ) : 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.
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"); :
Pour récapituler, votre code devrait ressembler à ceci :
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. 
2e partie - Consignes
Dans notre premier TP nous avons vu comment créer des formes géométriques.
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 ! 
On enregistre cette image dans le même dossier que notre projet et on la renomme en "herbe" (pour faire simple ).
Donc maintenant on va repartir de notre ancien code :
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.
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.
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. 
En modifiant cette fonction, votre code devrait ressembler à peu près à celui-ci :
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. 
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.
Moins drôle tout d'abord, nous allons faire un peu de théorie. 
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é ! (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 
) :
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 :
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" (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 :
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 :
Faire bouger notre personnage
Dans ce TP nous allons voir, en réutilisant notre fonction,
comment déplacer notre personnage sur notre belle pelouse. Ne commencez pas tout de suite à pleurer, je vous garantis que c'est facile. 
La SantaLib possède une petite série de fonctions liées au déplacement d'éléments sur la Map :
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.
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.
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 !
Pour la suite des opérations et pour repartir sur de bonnes bases, je vous joins mon code complet :
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.
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 :
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.
Placez-le à l'opposé de super Mario sur votre Map de façon à obtenir ceci :
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 :
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 :
game.addEnnemy('perso1','badboy0');
Cependant, Mario sait qu'il dispose d'un pouvoir magique. Il sait envoyer des boules de feu ! 
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 :
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.
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 :
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 :
game.addEnnemy('badboy0','boule2feu');
ET PAF ! Ça fait des chocapics !
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. (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 ).
Et au travail : placez Peach au-dessus de badboy0.
C'est ici que les choses se corsent ! Malgré votre indépendance (petite blague pour les Corses ). 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 :
game.initializeApesanteur('peach');
Voilà, une boule de feu, le badboy0 disparait et Peach tombe dans l'herbe. C'est beau ça, non ?
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. 
Votre objectif est de placer le nuage dans le ciel de notre jeu et d'utiliser le code ci-dessous pour votre nuage :
game.isBot('nuage');Votre nuage sera converti en bot et donc prendra vie !
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 :
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 :
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. 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 :
game.ExistItem('perso1');
Elle retourne un booléen à true lorsque Mario est sur la Map, sinon… 
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 !
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é.
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.
game.refreshZone(x,y);
Celle-ci affichera la Map sous forme de caractères contenus dans le tableau de données :
game.pushMapChar();On peut à tout moment récupérer le tableau de la Map pour un traitement (sauvegarde, jeux en réseau…).
game.postMap(page, nom)- page : la page qui recevra la Map ;
- nom : le nom qui sera donné à notre Map.
Par exemple :
game.postMap("save.php", "MaPartie")
La page save.php recevra un $_POST['MaPartie'] qui contiendra la Map.
Il est possible de simuler une touche avec la méthode :
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 :
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 :
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 :
game.addAction(nom, action);- nom : le nom de l'action ;
- action : la fonction à exécuter.
Par exemple :
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 :
game.setAction(nom, action);Par exemple :
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 :
game.setAction(name)name : nom de l'action à exécuter.
Ou tout exécuter d'un coup :
game.runAllAction();Par exemple :
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) :
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 :
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 :
game.CreateForm('text','color:red','toto')
On peut par le biais des méthodes décrites ci-dessous utiliser ces éléments. Pour récupérer la valeur de notre champ 'toto' nouvellement créé on utilisera :
game.GetValue(id);Qui permet de renvoyer la valeur de l'élément grâce à son id.
game.GetValue('toto');On peut aussi modifier la valeur de notre petit input :
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 :
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 :
game.GetHTML(id)Qui permet de retourner le contenu HTML d'une div. Et :
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é :
game.SetCookie(name,value)Pour récupérer son contenu, rien de plus simple :
game.ReadCookie(name)A-II-iv. La date et l'heure▲
Commençons par récupérer l'heure :
game.GetTime()Puis la date :
game.GetDate()
Alors, pas si difficile.
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 :
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 :
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 :
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.
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.
<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.
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.
Ici, on se contentera d'afficher un message contenant la réponse.
B-IV. Aperçu final▲
On peut maintenant constater le rendu final :
Suivi de :
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.