TP1 Jeux Multijoueurs 2020-2021

Introduction

On va pour ce TP commencer à étudier un squelette qui montre ce qu'on peut faire mais qui n'est pas génial, pour faire un jeu multijoueurs. On va utiliser un serveur NodeJS et les modules npm express et socket.io pour transformer notre back-end en serveur HTTP et en serveur de WebSockets.

Travail à faire : 

• Si ce n'est pas déjà fait, installez NodeJS sur votre machine (une des deux versions proposées), et VisualStudio Code ou équivalent, qui nous sera bien utile.
• Récupérer cette archive zippée. La dezipper quelque part, puis faire "npm install" et "node simpleChatServer.js", ouvrez ensuite plusieurs onglets sur l'URL http://localhost:8082, jouez avec le chat, jouez avec la souris. Essayez avec plusieurs joueurs.

Etudiez le code, il s'agit d'une structure typique d'un projet NodeJS à base de websockets :

• Le code de la partie "cliente" est dans le répertoire "public", la page d'accueil est le fichier index.html.
• Cette page utilisera des fichiers CSS, JS, des assets et des librairies situées elles aussi dans des sous-répertoire du répertoire "public".
   
• La partie "serveur" est entièrement contenue dans le fichier simpleChatServer.js, regardez-le en détail.

Travail à faire pour comprendre l'automate d'états finis qui est derrière ce code :

1. Que se passe-t-il dans le/les clients, et dans le serveur, lorsque un joueur se connecte ? Quelle fonction du serveur est appelée ? Quel type(s) de message(s) renvoie-t-il et à qui, quel est le code du client qui est appelé et que fait-il ?
2. Que se passe-t-il lorsqu'un joueur se déconnecte ? Mêmes questions.
3. Que se passe-t-il lorsqu'un joueur tape un message dans le chat et l'envoie en cliquant sur le bouton ou en appuyant sur ENTREE ? Mêmes questions.
   
    
4. Que se passe-t-il lorsqu'un joueur déplace la souris dans le canvas ? Comment le dessin du joueur est-il synchronisé ? Mêmes questions : que reçoit le serveur, que renvoit-il ? Quel code envoit-il aux clients ?

Questions :

• Cette solution est-elle satisfaisante ? Que manque-t-il ?
• Que proposez-vous comme solution (discussion pendant la visio).... ?

Codage d'un premier jeu :

• En vous inspirant de l'exemple fait en live coding pendant le cours, on veut déplacer avec les touches du clavier DE MANIERE TRES FLUIDE, un petit carré de couleur sur son écran, par exemple de 20x20 pixels.
• Lorsque plusieurs joueurs sont connectés, on veut voir tous les joueurs se déplacer. Cela ressemble à ce qu'on a fait avec la souris, mais cette fois-ci avec le clavier. Vous écouterez les événements keyup, keydown du clavier.
• Vous donnerez des points de départ aux joueurs dans la partie gauche de l'écran, pas très loin les uns des autres, car vous allez implémenter un jeu de course où le premier qui atteindra la sortie aura gagné.
• Vous dessinerez (à l'aide d'un rectangle spécial ou d'un cercle) une sortie dans la partie droite de l'écran.
• Le premier joueur à atteindre la sortie a gagné.
• Quand tous les joueurs atteignent la sortie, on passe au niveau suivant.
• Réfléchissez à comment augmenter la difficulté entre chaque niveau, par exemple en ajoutant des obstacles (murs fixes par exemple)
• Réfléchissez à comment animer les obstacles ex: murs mouvants)
   
• Pour la détection de collisions vous pourrez utiliser les fonctions données dans ces JsBins (collisions cercle-cercle, rectangle-rectangle mais alignés sur les axes, et cercle-rectangle). Il existe d'autres fonctions de détection de formes 2D plus évoluées (par exemple basées sur l'algorithme SAT pour les collisions entre polygones convexes SAT = Separation Axes Theorem).