contact@luc-mergault.fr

Premiers tests de minis jeux en Canvas & HTML

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

Jeu de test

Premiers tests de minis jeux en Canvas & HTML

5
(1)

Présentation dans cette article des différents tests de jeux que j'ai effectué avec la technologie Canvas et HTML !


Cet article est une archive du 22 Mai 2016 ( En savoir plus ).


Informations
Début de réalisation : 25 Février 2016
Fin de réalisation : 29 Février 2016

Hello !

Alors aujourd'hui après vous avoir montré mes premiers tests en canvas, je vais vous présenter un nouveau petit projet que je me suis amusé à créer.

Celui-ci, ne porte pas spécialement de nom, on va dire que c'est un test ^^

Utiliser Canvas et HTML ?

Pourquoi ne pas le faire en flash ?

Parce que Flash est clairement insuffisant en terme d'optimisation, ainsi qu'il n'est pas forcément supporté par tous les navigateurs.

C'est pour cela que j'ai choisi d'utiliser du JavaScript et HTML.

Donc l'idée, c'était de réaliser un petit jeu 2D, dans le genre Habbo.

J'ai dans un premier temps, réalisé une première version, créée à l'aide de Canvas et JavaScript !

Fonctionnement du jeu

Du coup là, on se retrouve avec un personnage, qui va pouvoir se déplacer sur la map.

La map va aussi se déplacer en fonction du personnage.

On va aussi avoir un système de chat, qui sera utile par la suite ( Voir la suite de l'article ).

A la base, j'ai développé une première version qui était juste orientée solo.

Rendre le jeu multijoueurs ?

Par la suite, je me suis dit que cela pouvait être intéressant de rendre le jeu multijoueurs.

Ce que j'ai finalement réussi à faire.

L'idée était d'enregistrer les donnés du perso dans une base de données, et ensuite de les retranscrire sur chaque jeu côté client.

Jusque là, pas de problème, l'idée était fonctionnelle.

Comment gérer la sécurité multijoueurs ?

Mais comme tout bon développeur, il est important de ne pas avoir de failles de sécurité dans nos projets.

Sauf que dans mon cas, si on recherche bien, il y a une énorme faille de sécurité : On enregistre les données du client !

Ce qui veut dire que le client peut modifier ces donnés et par exemple, changer la position de son perso très rapidement !

A partie de là, je me suis dit qu'il fallait que je trouve un autre moyen.

Une nouvelle version sans Canvas ?

J'ai par la suite arrêté de développer cette première version.

Et c'est ainsi que j'ai commencé à développer une deuxième version !

Le jeu et l'idée étaient strictement identiques, cependant, la façon de le développer était complètement différente.

Premièrement, j'ai ajouté un mini espace membre.

Une fois l'utilisateur connecté, il arrive sur la même interface que la première version.

Cependant, pour cette interface, au lieu d'utiliser Canvas, je n'ai utilisé que du HTML ainsi que du Javascript !

Contrairement à la première version qui utilisait Canvas.

Cette deuxième version a tout d'abord été pensée directement pour le multi, et cette fois de façon sécurisée !

Au lieu d'enregistrer les donnés de l'utilisateur, on va envoyer ce que je vais appeler des "packets".

Par exemple, quand le perso voudra avancer, on va envoyer un packet "avancer", et là, c'est coté serveur que toute la gestion ( Calcules ) va se faire !

Le client lui s'occupera de traiter les données ensuite renvoyées par le serveur ( Position et autres ).

Bien évidement, je ne vais pas rentrer dans les détails, mais l'idée est !

Il s'avère que cette méthode est plutôt efficace, malgré les quelques problèmes de latence dues à l'envoi des Packets.

Conclusion

J'ai aussi développé un système pour changer ses touches, rien de bien impressionnant ^^

Je ne vais par contre pas fournir d'exemple, ou les codes, tout simplement car, le jeu étant géré en multi, il demande une base de données.

Sauf que je ne peux pas me permettre de mettre la base de données sur mon site.

L'idée était vraiment de vous présenter ce que j'ai pu faire, et de toute façon, vous aurez bientôt un nouveau projet dans le même genre ( Dispo pour tous ).

Bref voila, je pense en avoir fini pour la présentation de ce projet !

Si vous avez des questions, une idée, ou quoi que ce soit d'autre à dire, n'hésitez pas dans l'espace des commentaires !

Sur ce, je vous souhaite une 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