Crystann Onlann
Crystann Onlann part d'un petit défi que je m'étais lancé. Il consiste en un ensemble de jeux des années 80, que j'ai adaptés en tant que jeux en ligne (directement dans la fenêtre du navigateur) en utilisant uniquement des technologies de type "client léger" (Javascript, HTML, CSS...).

Il est à constater que de plus en plus de petits jeux sont disponibles en ligne dernièrement, notamment grâce au plug-in d'animations vectorielles Flash. Certains jeux, notamment sur des sites réellement professionnels sont d'excellente qualité. Mais d'autres, la majorité, sont du niveau de jeux des années 80. Il s'agit donc essentiellement de jeux de platte-formes où l'on déplace un bonhomme. Il me semble totalement aberrhant d'utiliser Flash lorsque l'on veut faire un petit jeu tout simple qui ne nécessite aucune animation vectorielle, car le plug-in Flash est gros à télécharger, les applications Flash sont elles-même assez grosses, et de plus Flash est lourd à exécuter pour les machines à moins de 500MHz (le cas de mon serveur).
Le pire que j'ai vu était un jeu très simpliste: il y avait 2 images semblables et il fallait cliquer sur les différences sur lesquelles s'affichait alors une croix rouge (et en plus, il fallait se taper 1Mo de téléchargement pour chaque image, car le programme Flash venait compilé avec chaque image, et non séparément avec l'image en paramètre). Et ce n'était même pas un site d'amateur... Ca aurait été tellement simple à faire rien qu'avec du HTML et du Javascript.
Je ne comprends pas cet attrait systématique et irréfléchi pour le Flash, lorsque l'on a des solutions légères comme le Javascript (depuis longtemps) et le CSS. Il est d'ailleurs curieux de constater que à ma connaissance, ces 2 technologies n'ont jamais été utilisées pour réaliser des jeux. Il est vrai que Javascript a la réputation de ne pas marcher sur tous les navigateurs. C'est faux. Le problème avec Javascript, c'est que nombre de sites Internet amateurs grouillent de fonctions Javascript compatibles uniquement avec Internet Explorer. Il suffit de programmer proprement en utilisant des fonctions standard pour que ca marche partout et je vais vous le prouver.

Que nous faut-il pour déplacer un bonhomme sur une carte ou salle comme celle-ci?

Plusieurs choix ultra-légers à télécharger et exécuter s'offrent à nous:
  • 1) tout simple: en HTML, on dessine la carte ou la salle grâce à des images carrées ou rectangulaires représentant les divers objets, on y place et déplace le bonhomme avec du Javascript en changeant une image du tableau.
  • 2) un peu moins simple: imaginons que notre bonhomme ne soit pas un simple rectangle plein mais ait une forme, il faut donc voir ce qui est derrière lui. En HTML, on fait un tableau de cellules avec chacune un background pour représenter la carte. On remplit chaque cellule avec une image totalement transparente. En Javascript on y place et déplace ensuite le bonhomme en remplacant les images vides du tableau par l'image transparente du bonhomme qui laisse donc voir ce qu'il y a derrière lui.
  • 3) imaginons maintenant que notre bonhomme ne se déplace pas case par case, mais puisse être entre 2 cases. On oublie alors la technique du remplacement d'images en Javascript. Il nous suffit d'utiliser du CSS pour positionner l'image à n'importe-quel endroit dans la fenêtre du navigateur.
Voici les jeux que je vous présente qui illustrent ces différents cas:
  • cas 1: Crystann de Loriciels (simple bonhomme à déplacer en remplacant les cases de la salle/carte)
  • cas 2: Mandragore (carte uniquement) de Infogrammes (bonhomme transparent à superposer aux cases de la salle/carte)
  • cas 3: Androides de Infogrammes (bonhomme transparent à superposer entre les cases)
Remarque: Loriciels n'existe plus, quant à Infogrammes, si la publication de ces 2 jeux les dérangent, il leur suffit de me le dire et ils seront retirés


J'ai pu tester ces jeux avec succès sur divers navigateurs: Internet Explorer, Netscape Navigator, Opera, Mozilla, Mozilla FireBird. Cela prouve la propreté des fonctions que j'ai utilisées. J'ai donc des jeux rapides à lancer, légers, et qui en plus tournent chez tout-le-monde!!!
En conclusion, je peux donc dire que ca fait longtemps que l'on aurait pu sortir des jeux style années 80, et je ne comprends pas pourquoi ce domaine semble avoir été oublié, puisque l'on a attendu la lourdeur, la grosseur et la lenteur de Flash pour faire la même chose. Les 2 premiers jeux que je vous ai présentés, atteignent je pense la limite de ce que l'on peut faire raisonnablement en Javascript/HTML. Le 3ème avec l'association de CSS, ouvre de toutes nouvelles perspectives pour les jeux en client léger. Si le polymorphisme de Javascript selon les divers navigateurs a découragé les professionnels de l'utiliser plus que le strict minimum, peut-être que le CSS dont la norme est très clairement définie sur w3c.org fera demain en mieux ce que Javascript n'a pas fait.

Crystann Onlann
(la page web est construite autour du jeu Crystann, les 2 autres jeux sont présentés dans la section "bonus")


Remarque: début 2003, mon code a servi à des étudiants qui réalisaient dans le cadre d'un concours une page sur la vie au temps de la Nouvelle-France, afin de permettre à un petit bonhomme de se balader dans une seigneurie virtuelle. Ils ont d'ailleurs obtenu le 1er prix. Voici leur site: Une vie de colon