Présentation de SantaLib-Objs, la bibliothèque de jeux en JavaScript

JavaScript : pour les personnes qui souhaitent approfondir leurs jeux.
HTML et CSS :pour les personnes qui souhaitent personnaliser leurs jeux.
Minimum :la notion de tableau à deux dimensions.

Dans ce tutoriel, nous commencerons par analyser la SantaLib Objs, puis nous terminerons par un exemple de son utilisation. Sur ce, bon tutoriel !

Placez ce code impérativement là où vous souhaitez utiliser la SantaLib :

<div id="init_SantaLib"></div>
<script src="santalibObjs.js"></script>

Où santalibObjs.js est la bibliothèque que vous aurez bien sûr téléchargée au préalable sur le site officiel, pointant au bon endroit sur votre serveur.

On commence par initialiser la bibliothèque et paramétrer son utilisation (obligatoire, nécessite que tout soit bien paramétré avant) :

var plop = new SantaLib(); //On initialise notre bibliothèque.

plop.setHeight(10); //Hauteur Map.

plop.setWidth(30); //Largeur Map.

plop.loading(); //Charge la SantaLib.

plop.setBorder(); //Définit des bordures à notre Map (facultatif mais conseillé).

plop.pushMap(); //Provoque le chargement de la Map.

L'instanciation est simplifiée au maximum, on renseigne les coordonnées et le nom de l'élément. Attention le nom de l'élément correspond à son image :

plop.pushEl(ordonnée,abscisse,'element'); //element.png

plop.pushEl(0,25,'5'); //Ici on positionne l'élément '5' correspondant à l'image 5.png à une position 0 en
ordonnée et 25 en abscisse.

On commence par initialiser le clavier :

plop.useKeyBoard();

À partir de là, on peut récupérer la dernière touche du clavier via :

plop.getTouche() ;

et passer les touches en non bloquantes :

this.manageBloquant = false ;

La SantaLib permet d'affecter des actions à des éléments.

Déclarer un ennemi à un élément :

plop.addBadBoy('element','enemi');

plop.addBadBoy('5','666'); //On déclare 666 comme ennemi de 5. En cas de contact entre ces deux-là, le 5 est éliminé.

Soumettre un élément à la gravité :

plop.initializeApesanteur('element');
plop.initializeApesanteur('5'); //On soumet '5' à la pesanteur.

Déplacer un élément sur la Map :

plop.goLeft('5') //Dirige l'élément '5' vers la gauche.
plop.goRight('5') //Dirige l'élément '5' vers la droite.
plop.goUp('5') //Dirige l'élément '5' vers le haut.
plop.goDown('5') //Dirige l'élément '5' vers le bas.

Transformer un élément en bot. Autonome, il se déplacera tout seul où il veut sur la Map. On peut aussi le soumettre à la pesanteur :

plop.isBot('element') ; //L'élément sera converti en bot.
plop.isBot('5') ; //On indique que l'élément '5' sera un bot.

Rendre un élément déplaçable avec les flèches :

plop.managePerso ('element') ; //L'élément sera déplaçable avec les flèches.
plop.managePerso ('5') ; //On indique que l'élément '5' sera un bot.

Tester l'existence d'un élément :

plop.ExistItem('5') //Si l'élément 5 existe : retourne true sinon false

La SantaLib est un objet, donc elle possède des paramètres tels que :

this.version //Permet de récupérer le numéro de version, ou de la 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, mais 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, à modifier avant d'utiliser le loading :

this.bgcolor //color background

manageBloquant //Permet de passer les touches en non bloquantes (onkeypress != onkeyup).

Permet de contrôler la pesanteur qui lie tous les éléments :

this.apesanteur //Passé à false, aucun élément ne sera soumis à la pesanteur.

On peut aussi augmenter la pesanteur ou la diminuer :

this.timeApesanteur

Ici quelques méthodes spécifiques, aidant pas mal pour déboguer vos programmes :

Concernant le DEBUGGING
Rafraichira, les images autour des coordonnées x et y :

plop.refreshZone(x,y);

Affichera la Map, sous la forme de caractères contenus dans le tableau de données :

plop.pushMapChar()

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

plop.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 :

plop.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 :

plop.GetValue(id); //Qui permet de renvoyer la valeur de l'élément grâce à son id.
plop.GetValue('toto'); //Nous renverra donc le contenu de toto.

On peut aussi modifier la valeur de notre petit input :

plop.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 text, je m'y prendrais ainsi :

plop.ChangeValue('toto','tadam !');

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

plop.GetHTML(id)

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

plop.ChangeValue(id, HTML)

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

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

plop.SetCookie(name,value)

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

plop.ReadCookie(name)

Rien de plus simple pour récupérer la date et l'heure. Commençons par récupérer l'heure :

plop.GetTime()

Puis la date :

plop.GetDate()

Alors ?
Pas si dur.

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 s'y soumet par le biais d'une méthode :

plop.DrawPicture(picture, timing)

En clair, il suffit que vous renseigniez le lien de l'image (picture) et le temps d'affichage (timing) de celle-ci. Un petit exemple :

plop.DrawPicture('http://www.developpez.net/template/images/logo.png', 2)

affichera le logo du Developpez pendant deux secondes sur votre écran.

<div id="init_SantaLib"></div>
<script src="santalibObjs.js"></script>
<script>
var plop = new SantaLib();
//Initialisation et paramétrage.
plop.setHeight(10);
plop.setWidth(30);
plop.loading();
plop.setBorder();
plop.useKeyBoard();


//Ajout de personnages.
plop.pushEl(5,15,'5');
plop.pushEl(9,2,'666');
plop.pushEl(5,2,'666');
plop.pushEl(1,2,'666');
plop.pushEl(1,15,'666');
plop.pushEl(9,15,'666');
plop.pushEl(9,29,'666');
plop.pushEl(5,29,'666');
plop.pushEl(1,29,'666');

//Affichage complet de la Map.
plop.pushMap();

//Paramétrage des personnages.
plop.addBadBoy('5','666');
plop.isBot('666');
plop.managePerso('5');

</script>

Nous allons étudier pas à pas la création de cet exemple. Nous commençons par initialiser notre bibliothèque :

<div id="init_SantaLib"></div>
<script src="santalibObjs.js"></script>

Puis nous allons travailler notre jeu dans une autre balise script :

<script> /* Notre jeu sera développé ici. */</script>

Commençons par initialiser notre bibliothèque dans un objet :

var plop = new SantaLib();

L'objet Demo nous permettra maintenant de jouer avec les attributs et les méthodes de notre bibliothèque. Nous allons donc maintenant paramétrer notre Map afin de pouvoir, par la suite, avoir un visuel :

plop.setHeight(10);

Notre Map fera donc 10 'block' de hauteur.

plop.setWidth(30);

Et 30 'block' de largeur.

plop.loading();

Nous lui indiquons de générer l'espace et les éléments nécessaires à notre jeu.

plop.setBorder();

Pour empêcher nos personnages de sortir de la Map, nous l'emprisonnons d'une bordure.

plop.useKeyBoard();

Et afin de pouvoir récupérer les touches frappées, nous initialisons le clavier.

Voilà, notre Map est donc prête à être utilisée, mais nous n'avons toujours pas de personnage. Nous allons donc en rajouter :

plop.pushEl(5,15,'5'); 
plop.pushEl(9,2,'666'); 
plop.pushEl(5,2,'666');
plop.pushEl(1,2,'666');
plop.pushEl(1,15,'666'); 
plop.pushEl(9,15,'666'); 
plop.pushEl(9,29,'666'); 
plop.pushEl(5,29,'666'); 
plop.pushEl(1,29,'666');

Nous plaçons donc à différents endroits de la Map, deux catégories d'éléments : 666 et 5.

Le but de notre jeu est de faire survivre notre personnage 5 parmi les « méchants » qui seront les 666. Nous définissons à présent 666 comme ennemi de 5 :

plop.addBadBoy('5','666');

Une petite variante dans l'objectif du jeu serait que 5 ait pour but de manger les 666. Pour cela, rien de plus simple, on remplacerait :

plop.addBadBoy('5','666');

par :

plop.addBadBoy('666','5');

Et pour corser cette variante, on soumettrait 5 à la pesanteur :

plop.initializeApesanteur('5');

Ce qui lui rendrait la tâche compliquée pour choper les 666. Bref, une variante comme une autre.

Bon, maintenant c'est bien, nous avons établi un lien entre 5 et 666, mais ni l'un ni l'autre ne bougent. Nous allons donner un peu d'automatisme à nos méchants '666' (les déclarer comme bots, ils bougeront tout seul après ça), comme ça pas besoin de s'en occuper par la suite :

plop.isBot('666');

Puis, de façon à nous donner une interaction avec notre personnage '5', nous allons lui demander d'obéir aux touches directionnelles du clavier. Il sera donc manœuvrable :

plop.managePerso('5');

Voili voilou, vous venez donc de créer votre premier petit jeu en SantaLib Objs.

Que vous pourrez retrouver ici : http://santalib.fr/Object_santaLib.php.
La bibliothèque se télécharge depuis : http://santalib.fr/.

Voilà, j'espère que l'utilisation de la SantaLib vous plaira aussi. Ne pas confondre la SantaLib Objs et la SantaLib Originale. L'une est une bibliothèque, l'autre permet de concevoir à partir du déjà fait.

Developpez tient à remercier chaleureusement Mario Gosparini pour l'avoir autorisé à publier son article.
Developpez remercie également ClaudeLELOUP pour sa relecture orthographique attentive.