Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 10:14, 4 Mai 2011 par MichelBuffa
0

Examen HTML5 M2 MBDS 2011

De $1

Version de 03:32, 26 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

    1. 1.1. Introduction
    2. 1.2. Conseils
  2. 2. Préliminaires
    1. 2.1. Intégrer le chat au projet
    2. 2.2. Gérer côté serveur les messages /id cardXXX
    3. 2.3. Gérer un tableau avec les joueurs connectés

Introduction

Puisque vous n'avez pas fait correctement le code permettant au pictionary de devenir multi-joueurs, vous allez devoir effectuer un travail équivalent (quoique plus simple) à partir d'un jeu de Memory. Vous savez, le jeu qui consiste à retourner des cartes et à les mettre en correspondance deux à deux. Vous pourrez bien sûr vous inspirer du travail fait sur le memory, vous avez accès au web, aux docs, à vos TPs. La chose qui est interdite c'est de me rendre le travail fait par quelqu'un d'autre qui passe cet examen en même temps que vous. Je serai vigilant, au moindre doute cette fois-ci c'est zéro à l'examen, pas de récidive.

Conseils

N'oubliez pas comment on debugge du javascript :

  • méthode sys.log(message) pour debugger côté serveur,
  • ctrl-shif-i pour faire apparaitre le debugger de Chrome, toujours regarder dans la console si on a pas d'erreur javascript,
  • utiliser un bon éditeur pour html et surtout pour javascript (ultraedit, netbeans, eclipse...)
  • Regarder la doc javascript si on arrive pas à faire un truc basique (par exemple extraire une sous-chaine), la doc la plus pratique pour cet examen est le site de référence javascript thématique : http://www.toutjavascript.com/refere...lice&parent=92

Préliminaires

  1. Récupérer l'archive du projet, la désarchiver, la faire tourner dans Chrome :
  2. Jouer au jeu, comprendre son fonctionnement (3mns). Remarquez que les cartes sont toujours au même endroit, c'est voulu (les cartes qui vont ensembles sont toujours dans la même colonne, séparées par une ligne).
  3. Regarder le code html/js de la page index.html, comprendre la structure. Pas besoin de comprendre tout le code dans le détail, lire les commentaires. Comprenez-vous pourquoi on ne mélange pas les cartes ? (15 Mns)

Intégrer le chat au projet

Intégrer le code html du chat, ajouter une balise script pour le code javascript du chat. Tester que le chat fonctionne. Ensuite écrire une méthode envoyerMsg(msg) qui envoie un message au serveur et qui le broadcaste.  5 points.

Snap2.jpg

Gérer côté serveur les messages /id cardXXX

Côté serveur, traiter le fait qu'on puisse recevoir un message /id card1 par ex, lorsqu'on reçoit un message commençant par /id on récupère le paramètre qui suit et on broadcaste le tout. On peut utiliser la commande sys.log(message) du serveur pour debugger et afficher le fait que vous avez bien détecté le message.  3 points.

Gérer un tableau avec les joueurs connectés

Vous allez utiliser une variable pour gérer la liste des clients connectés (normalement que deux, mais ce n'est pas grave si vous ne gérez pas pour le moment cet aspect). Ce que l'on veut, c'est que à chaque connexion, ce tableau contienne les informations sur les clients connectés : leur id de connexion et leur nom.

var tableClient = new Array(); // le serveur stocke tous les clients

Lors de chaque connexion vous ajouterez un client à ce tableau, et afficherez à l'aide de la commande syslog les détails de tous les clients dans ce tableau.Par exemple :

Snap1.jpg
 

  1. Maintenant on ne veut envoyer le message qu'à l'autre joueur, donc plus de broadcast ! Vous devrez gérer un tableau avec les deux joueurs. Je vous conseille d'utiliser un tableau pour stocker l'id de la connexion et le nom du joueur. Chaque fois que vous recevrez un message /id cardxxx vous parcourez le tableau des joueurs, pour celui dont le nom est différent de vous vous envoyez le message (rappel : server.send(id_connexion, message) permet de n'écrire qu'à un seul client(entre 5mns et 1h)
  2. Pensez à supprimer un client du tableau lorsqu'il se déconnecte (méthode splice() de la classe Array par ex, voir http://www.toutjavascript.com/refere...lice&parent=92)
  3. Maintenant côté client, dans le code du chat qui reçoit les message, détectez lorsqu'on reçoit un message /id cardxxx, récupérez le paramètre et appelez la méthode receptionClicSurUneCarte(id) qui devrait simuler côté récepteur un clic. Là déjà le jeu devrait tourner en multi-joueur.

 

 
Powered by MindTouch Deki Open Source Edition v.8.08