contact@luc-mergault.fr

Lulu.io – Le nouveau agar.io

Je partage à travers ce blog mes projets et ma passion pour l'informatique en général.

Lulu.io – Le nouveau agar.io

5
(1)

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 ).


Informations
Début de réalisation : 18 Juin 2016
Fin de réalisation : 9 Juillet 2016
Télécharger l’animation d’exemple : Mega

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 :

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 :

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 !

  • Bitcoin
  • Ethereum
  • Binance coin
  • MetaMask
Scan to Donate Bitcoin to bc1qrunuqqs7e8e5x7lctmgflvde8claupv44qa9fg

Soutenez moi en envoyant des Bitcoin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Bitcoin 😃

Scan to Donate Ethereum to 0x81D56c63Df07ef938425e53185984DC5670E206C

Soutenez moi en envoyant des Ethereum !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Ethereum 😃

Scan to Donate Binance coin to bnb18dy3mv3f6y7h4uems5d8emn8g7zgfq7vlslkpk

Soutenez moi en envoyant des Binance coin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Binance coin 😃

Donner avec MetaMask

Si vous utilisez Metamask, vous pouvez me soutenir très simplement en cliquant sur ce bouton !

Donnez une note à cet article 😉

Note moyenne 5 / 5. Nombre de vote : 1

Pas encore de note, soyez le premier à donner une note !

Merci ! Partage cet article !

Je suis désolé que cet article ne te plaise pas

Améliorons cet article !

Dis moi ce que je peux améliorer !

 

Aucun commentaire

Ajoutez votre commentaire