Lulu.io – Le nouveau agar.io

Lulu.io est un projet de jeu vidéo Web visant à proposer une sorte Agar.io à ma manière, développé dans le but d’en apprendre plus !

Cet article est une archive du 10 Juillet 2016 ( En savoir plus ).

Salut à toi qui lis cet article !

Avant toute chose, le nom Lulu.io est un petit troll en référence à Agar.io, je ne compte pas mettre ce projet en ligne.

Ceci étant dit, l’article peut commencer.

Lulu.io : Un jeu multijoueur ?

Vous vous souvenez peut être de mes projets de jeux que j’ai pu poster sur le blog :

• https://www.luc-mergault.fr/blog/debut-de-jeu-en-canvas/
• https://www.luc-mergault.fr/blog/marcraft/
• https://www.luc-mergault.fr/blog/premiers-tests-minis-jeux/

Dans un de ces articles, je vous avais expliqué que le multijoueur posait problème, il rendait le jeu quasiment injouable ( Problème de latence ).

Mais depuis, j’ai appris à utiliser une nouvelle technologie super intéressante qui se nomme « node.js« .

Ce n’est pas spécialement node.js qui va nous permettre de réaliser cela, mais socket.io.

Node.js va simplement servir de structure de base pour socket.io.

Petit point sur Socket.io

Pour ceux qui s’y connaissent un peu en développement web, vous savez déjà ce à quoi sert socket.io.

Mais je vais quand même expliquer pour ceux qui ne savent pas.

Très simplement, socket.io va nous permettre de créer une application en temps réel.

Socket.io utilise la technologie « WebSocket » implémentée maintenant dans la plupart des navigateurs.

WebSocket permet grosso modo de garder une communication entre le client et le serveur.

Classiquement, comment marche un site :

• Le client demande au serveur de charger une page ( Ex : exemple.com )
• Le serveur retourne le code de la page
• Le navigateur traite le code retourné par le serveur

Si l’on souhaite mettre à jour une donnée sur la page, on va devoir faire un nouvel appel au serveur ( Ex : exemple.com/nouvel-appel.html ).

Avec socket.io ( WebSocket ), c’est différent :

• Le client demande au serveur de charger une page ( Ex : exemple.com )
• Le serveur retourne le code de la page
• Le navigateur traite le code retourné par le serveur
• Une connexion est gardée entre le client et le serveur
• Si le serveur souhaite effectuer une update sur la page, il le peut ( Ex : Mettre à jour une image )

En savoir plus sur WebSocket : https://fr.wikipedia.org/wiki/WebSocket

Et voilà, ça, c’est l’idée de socket.io !

Revenons en à Lulu.io

Et donc pour ce nouveau projet, j’ai voulu mettre en pratique l’utilisation de cette technologie.

Le projet est alors d’essayer de recréer une version très simplifiée de agar.io.

Evidemment, pleins de fonctions de agar.io ne sont pas implémentées, mais ce n’était pas l’idée de le recréer à 100%, mais simplement d’apprendre comment mettre en place ce genre d’applications.

Je vais donc vous le présenter vite fait.

Vous allez dans un premier temps vous connecter ( En soit, aucun système de login est vraiment implémenté ).

Une fois que vous êtes connectés, vous pouvez déplacer votre « personnage » ( Avec les flèches directionnelles ), et essayer de prendre le plus de points possible.

Voilà, en soit pas grand-chose de plus à présenter.

Tous les codes sont disponibles sur GitHub :

• https://github.com/luluwebmaster/lulu.io

Comment l’installer ?

Dans un premier temps, installez node.js sur votre machine.

Une fois cela fait, ouvrez une CMD placée au niveau du répertoire racine contenant le fichier « package.json« .

Dans la CMD, entrez cette commande :

• npm install
• node serveur.js

Là, il ne vous reste plus qu’à vous rendre sur l’url suivante :

• http://localhost:8080/

Et c’est à vous de jouer !

Du coup, c’en est fini pour cet article !

Si vous avez des questions, etc, n’hésitez pas dans les commentaires.

Sur ce, merci de m’avoir lu, bonne continuation !