I. Objectif▲
Nous allons réaliser un jeu simple où il nous faudra trouver Charli sur une carte et le ramener dans sa maison.
Tout d'abord, nous allons télécharger la version 0.3.5Version 0.3.5 de la bibliothèque.
II. Initialisation▲
Maintenant que nous avons un objectif et nos outils, il va nous falloir s'en servir pour faire quelque chose !
Pour commencer, écrivez simplement un fichier HTML dans lequel vous appellerez le fichier santalibObjs.js comme nous l'avons vu dans notre tutoriel précédent. ^^ Quoi ?! Vous n'avez pas lu ce tutoriel !!! Raaaaah, bon donc je reprends, mais soyez attentif cette fois.
Une page HTML commence systématiquement par une balise html et termine par une balise de fermeture /html (waouh je sens que vous venez de faire une découverte là). Donc nous allons créer un fichier Charli.html qui contiendra :
<html>
</html>Ensuite on va donner à notre fichier HTML une tête head pour qu'il ne la perde pas (blague Malabar…). Entre nos deux balises, faisons un peu de place pour y mettre ceci :
Et à notre nouveau fichier HTML tout beau tout propre, il faut un corps parce qu'un corps sans tête on en a vu à l'époque de Louis XVI mais une tête sans corps… Bref son corps c'est le body :
Notre fichier HTML possède à présent les caractéristiques standards. Nous n'allons pas nous attarder sur des détails comme lui donner un title, une description, des balises, … Contentons-nous des bases pour faire simple !
Notre fichier a une tête, mais elle est vide… Nous allons donc lui donner quelques connaissances. On va lui demander d'apprendre le SantalibObjs ! Eh oui, c'est une page très douée pour apprendre, elle saura le faire en un quart de seconde. Plaçons donc dans sa tête l'ajout de la bibliothèque :
Hey ! Nous avons donc fait une bonne partie de ce tutoriel, soufflons un peu !
Ensuite vous allez faire un fichier game.js pour l'instant vide. Celui-là même dans lequel nous allons coder le jeu. Puis vous allez l'inclure à notre page :
<html>
<head>
<script src= 'santalibObjs.js'></script>
<script src= 'game.js'></script>
</head>
<body>
</body>
</html>Chose très importante, il ne faut pas que notre fichier HTML parte le ventre vide. SantaLib-Objs nécessite que notre corps ait mangé une div :
<div id="init_SantaLib"></div>Donc nous devrions partir d'un fichier typé comme ceci :
<html>
<head>
<script src= 'santalibObjs.js'></script>
<script src= 'game.js'></script>
</head>
<body>
<div id="init_SantaLib"></div>
</body>
</html>Maintenant nous allons ajouter en entête du fichier game.js une ligne très importante pour la suite :
game sera en quelques sortes notre moteur !
Mais un moteur qui ne démarre pas ne sert pas à grand-chose, n'est-ce pas ? Je vais donc vous proposer de créer une fonction start() qui démarrera notre jeu ! Si vous avez bien lu le tutoriel sur les bases, vous allez faire dans cette fonction une carte (Map) de 30 par 20 avec une gestion du clavier et une bordure. ^^
TIC ... TAC ... TIC ... TAC 
III. Création d'une Map▲
Bon, vous devriez avoir fini. Votre fichier game.js doit normalement contenir :
var game = new SantaLib();
function start(){
game.init(30, 20, 1, true);
game.pushMap();
}Cette fonction sera le démarrage de notre moteur. Cependant, il nous faut l'appeler pour la faire démarrer. C'est là que nous aurons besoin une dernière fois de notre fichier HTML. On indique à la balise body d'exécuter notre fonction start en la modifiant légèrement :
<body onload="start();">C'est ça ! Vous vous en sortez comme des petits chefs ! Continuons sur cette lancée ! En essayant d'afficher dans votre navigateur notre fichier HTML, vous devriez voir qu'une Map blanche est apparue. ^^
IV. Ajout d'un élément▲
Tout est dans l'intitulé de cette rubrique. Une Map vide c'est bien, mais l'agrémenter de quelques petites choses, c'est mieux. ^^ Pour cela, retournons à notre fichier game.js. Vous avez dû retenir dans notre précédent tutoriel la façon de positionner un élément. Pour commencer, voici l'élément sur lequel nous allons travailler :
Il s'appellera donc charli et nous allons le positionner en 9 sur 3. Je vous laisse le loisir de nous montrer votre fameuse mémoire de notre précédent tutoriel.
Ce n'était pas dur et vous y êtes parvenu :
game.pushElement(9,3,'charli');Voilà donc ce que nous allons mettre dans notre fonction start entre le init() et le pushMap() :
var game = new SantaLib();
function start(){
game.init(30, 20, 1, true);
game.pushElement(9,3,'charli');
game.pushMap();
}Super ! En réactualisant notre page, cela devrait donner ceci :
J'ai fait exprès de mettre la carte sur un fond noir pour que vous puissiez mieux la voir.
V. Ajout de l'événement click sur la zone▲
Voili voilou, nous avons un Charli sur une Map blanche, rien de plus banal. Nous allons voir dans cette rubrique comment utiliser l'événementiel sur notre Map par le biais de cette magnifique fonction :
game.addClickZone(x,y, evenement, action)Où x et y sont les coordonnées où vous souhaitez mettre en place un événement. Et evenement est le type d'événement que vous souhaitez. Par exemple : onclick, onmouseover, … Tandis que action est la fonction que vous souhaitez appeler !
Nous allons donc voir comment l'utiliser. Notre petit Charli s'ennuie et n'a rien à faire. Cependant, il n'aime guère qu'on lui clique dessus ! Faites-le réagir à un clic en appelant une fonction step1 qui affichera un alert('Naaaannnn tu m\'as trouvé !!!');.
Top chrono !
Voici le résultat :
var game = new SantaLib();
function start(){
game.init(30, 20, 1, true);
game.pushElement(9,3,'charli');
game.addClickZone(9,3,"onclick","step1()");
game.pushMap();
}
function step1(){
alert('Naaaannnn tu m\'as trouvé !!!') ;
}
VI. Utilisation de la fonction de déplacement tactile▲
Hé hé, encore une des petites nouveautés, voici la fonction :
game.useTactile(personnage,booleen);En fait, c'est l'équivalent du managePerso. Cette fonction permet de déplacer le personnage en fonction de l'endroit où on clique.
- Le personnage est un élément comme charli.
- Le booleen sert à déterminer si vous voulez que l'élément touché par cette fonction se déplace jusqu'à l'endroit cliqué (false) ou s'il n'avance que d'une case vers l'endroit cliqué (true) !
Vous allez faire en sorte que Charli puisse être déplacé via cette fonction après qu'on ait cliqué dessus ! Donc c'est dans step1() après votre alert().
… Temps écoulé ! Voici le résultat :
var game = new SantaLib();
function start(){
game.init(30, 20, 1, true);
game.pushElement(9,3,'charli');
game.addClickZone(9,3,"onclick","step1()");
game.pushMap();
}
function step1(){
alert('Naaaannnn tu m\'as trouvé !!!') ;
game.useTactile('charli',false);
}Faites un test, rafraîchissez votre page, cliquez sur Charli. Hop, une alerte. Et maintenant cliquez à n'importe quel endroit de la Map. Hey, Charli se déplace !
VII. Finalisation du jeu▲
Bon, je vous ai pas mal aidé, mais maintenant c'est fini.
Vous allez faire en sorte d'afficher une maison sur la Map dès que l'on clique sur Charli. Il faut la définir comme ennemi de Charli (pour qu'à leur collision, Charli disparaisse comme s'il entrait dans la maison). Et tester dans une fonction récursive l'existence de Charli pour déterminer la fin du jeu. Sur ce, bon courage.
…
Voici le résultat :
var game = new SantaLib();
function start(){
game.init(30, 20, 1, true);
game.pushElement(9,3,'charli');
game.addEnnemy('charli','home');
game.pushMap();
game.addClickZone(9,3,"onclick","step1()");
}
function step1(){
alert("Naaaannnn tu m\'as trouvé !!! \n"+
"Je veux rentrer à ma maison \n"+
"Guide-moi vers ma maison en cliquant dans sa direction") ;
game.pushElement(9,15,'home');
game.refreshZone(9,15);
game.useTactile('charli',false);
step2();
}
function step2(){
if (game.ExistItem('charli')){
setTimeout("step2()",50);
return 0;
}
alert("Et ne viens plus jamais m'embêter !");
game.ReplaceItem('home','back')
}VIII. Conclusion▲
Et bien voilà, merci d'avoir été patient. Vous êtes maintenant fin prêt à jouer de la SantaLib pour vos sites Web "spéciale tablette tactile". ;) En espérant vous retrouver dans un prochain tutoriel.
IX. Remerciements▲
Developpez remercie Mario Gosparini pour nous avoir autorisé à publier cet article.
Developpez remercie également zoom61 pour sa relecture orthographique attentive.