C'est le 13 mars dernier que nos amis de LIDD.fr évoquaient pour la première fois un jeu qui s'est rapidement avéré addictif pour la planète geek : 2048. Ce petit bout de code diffusé sous licence MIT par un jeune homme de 19 ans est non seulement prenant, mais il a aussi été à l'origine de nombreux dérivés.
Ce n'est pas parce que la mécanique est complexe qu'un jeu fonctionne. Si des solutions commerciales telles que Candy Crush l'ont déjà largement démontré, on en a eu la confirmation à de nombreuses reprises, comme lors de la découverte de Flappy Bird ou de 2048. Évoqué sur LIDD.fr il y a deux semaines, celui-ci a été l'objet d'un véritable raz de marée ces derniers jours.
L'open source mène parfois aux projets les plus fous
On ne compte ainsi pas les articles plus ou moins sérieux sur le sujet, ou encore les dérivés. Nous en avions d'ailleurs évoqués deux : Doge2048 et Flappy 2048. Slate a pour sa part décidé d'en dédier un aux municipales alors que l'on en trouve pour les physiciens nucléaires, mais aussi d'autres adaptés pour Radio France ou à la série Dr Who, via un site permettant à chacun de créer le sien en quelques clics.
Si cela est possible, c'est que Gabriele Cirulli, le développeur de 19 ans à l'origine du projet a fait les choses simplement, et de manière ouverte. En effet, il a diffusé son code sous la très permissive licence MIT et via la plateforme GitHub. Ainsi, n'importe quel membre (la création de compte est gratuite) peut créer son propre fork en appuyant sur un simple bouton, s'il souhaite tout faire en manuel. Il lui suffit ensuite de récupérer le code, via GitHub pour Windows par exemple, de modifier le contenu de la branche « gh-pages » avec n'importe quel éditeur de texte ou IDE, et de republier ses modifications. Quelques minutes plus tard, elles seront en ligne.
Le code est simplement composé d'HTML5 et de JavaScript. Pour remplacer les chiffres par une image, il vous suffit de créer un répertoire contenant 13 fichiers de 107x107 pixels, puis d'éditer le fichier « main.css » dans le répertoire « style » à partir de la ligne 315. Vous y trouverez les règles CSS correspondantes aux cases du jeu en fonction de l'élément qu'elles contiennent. Il suffit alors de remplacer le fond coloré par une simple image. Dans notre cas pour la case 2, les lignes 315 à 317 sont ainsi devenues :
.tile.tile-2 .tile-inner {
background: #eee4da url('../img/harou.png');
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }Pour supprimer le résultat qui s'affiche alors par-dessus l'image, il faut éditer le fichier « html_actuator.js » dans le répertoire « js » et supprimer la ligne 65. Une fois ceci effectué, il vous suffit d'ouvrir le fichier index.html dans votre navigateur afin de jouer à votre jeu. GitHub propose un système d'hébergement pour chacun de ses dépôts, qui est la solution utilisée par 2048 à la base. Vous pourrez trouver plus de détails sur son fonctionnement par ici.
Envie de perdre votre après-midi ? Jouez à la version pensée pour les INpactiens
Bien entendu, vous êtes ensuite libres d'adapter le code HTML selon vos besoins. Pour notre part nous avons par exemple repris les codes de PC INpact, adapté et traduit les textes, en plus de la mise en place de photos de 11 membres de l'équipe, dont Harou. Pour rappel, le but est simplement de jouer des touches fléchées de votre clavier afin de faire se rencontrer des cases identiques et les faire fusionner vers un élément supérieur, afin d'atteindre la case ultime. Dans notre cas : Teuf.
Vous pourrez retrouver le dépôt de notre version et l'ensemble des correctifs apportés par là. Une version indépendante est jouable à cette adresse. Mais nous avons aussi mis en place un petit widget intégrable que vous retrouverez ci-dessous. Désolé pour les longues heures que vous allez perdre à chercher à voir Teuf et Titia ;)
Cliquez dans la fenêtre pour que les touches du clavier soient prises en compte
