2
Premiers tests de minis jeux en Canvas & HTML

Type : Code - Posté le
Premiers tests de minis jeux en Canvas & HTML

Hello !

Alors aujourd'hui après vous avoir montré mes premiers tests en canvas ( https://www.luluwebmaster.fr/creation-40/un-debut-de-jeu-en-canvas-deuxieme-test-canvas.htm ), 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 ^^



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 !
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.
Par la suite, je me suis dit que cela pouvait être intéressant de rendre le jeu multi joueurs.
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.
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 énomme 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 !
Donc là, je me suis dit qu'il fallait que je trouve un autre moyen !
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 differente.
Premièrement, j'ai ajouté un mini espace membre.



Ensuite, 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 appeller 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 va se faire !
Le client lui s'occupera de traitrer 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à !
Et il s'avère que cette méthode est plutôt efficace, malgré les quelques problèmes de latence dues à l'envoi des Packets.
Après, j'avais aussi developpé 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 cette création !

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

Grand merci à @Mine_Build_ qui a vérifié le texte !

Poster un commentaire