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 :

 
Sélectionnez
<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 :

 
Sélectionnez
<html>
   <head>
   </head>
</html>

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 :

 
Sélectionnez
<html>
   <head>
   </head>
   <body>
   </body>
</html>

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 :

 
Sélectionnez
<html>
   <head>
      <script src= 'santalibObjs.js'></script>
   </head>
   <body>
   </body>
</html>

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 :

 
Sélectionnez
<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 :

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

Donc nous devrions partir d'un fichier typé comme ceci :

 
Sélectionnez
<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 :

 
Sélectionnez
var game = new SantaLib();

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 Image non disponible

III. Création d'une Map

Bon, vous devriez avoir fini. Votre fichier game.js doit normalement contenir :

 
Sélectionnez
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 :

 
Sélectionnez
<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 :

Image non disponible

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.

Image non disponible

Ce n'était pas dur et vous y êtes parvenu :

 
Sélectionnez
game.pushElement(9,3,'charli');

Voilà donc ce que nous allons mettre dans notre fonction start entre le init() et le pushMap() :

 
Sélectionnez
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 :

Image non disponible

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 :

 
Sélectionnez
game.addClickZone(x,y, evenement, action)

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 ! Image non disponible

Voici le résultat :

 
Sélectionnez
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é !!!') ;
}
Image non disponible

VI. Utilisation de la fonction de déplacement tactile

Hé hé, encore une des petites nouveautés, voici la fonction :

 
Sélectionnez
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().

Image non disponible … Temps écoulé ! Voici le résultat :

 
Sélectionnez
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 !

Image non disponible

VII. Finalisation du jeu

Bon, je vous ai pas mal aidé, mais maintenant c'est fini.

Image non disponible

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.

Image non disponible

Voici le résultat :

 
Sélectionnez
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.