Premiers tests de minis jeux en Canvas & HTML

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

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 là !

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 😉