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
Commentaires (79)
C’est donc ça le trou de 3h sans news/brèves/commentaires de la part de l’équipe dans l’après-midi, merci PCI !
" />
Marche pas au boulot
" />
Mais mais mais c’est quoi ça ?
Apres moults essaie j’ai fini par gagner, puis continué avec un score de 28000points
3372 au premier essai… Bon c’est pas comme si je devais réviser pour mes exams
" />
Y a du lourd dans les photos
" />
C’est malin ! J’ai fini l’original hier et je vais encore devoir y passer du temps
" />
Bon, déjà, j’ai chopé les techniques, ça devrait être plus facile….
bon testé
" />
14476 pour moi, et 26 minutes de non productivité, j’envoi la facture à PCi
" />
5460
" /> (1 essai)
Ça bosse dur chez PCI… enfin vous direz, moi aussi du coup.
" />
Merci pour l’outil de création, j’en ai profité pour faire la version la plus mignonne qu’il soit :http://games.usvsth3m.com/2048/redpanda-edition/
" />
" />
" />
Mortel les photos merci PCI (bon, le temps de piger, j’ai abouti à ~2000, je tenterai les 4000 plus tard ^^).
7308 pour ma première partie, c’est pas si mal…
j’ai pas compris ce qu’il faut faire xD
Ça manque de boobs …
" />
c’est plus difficile qu’avec les chiffres car je ne me souviens plus forcément quelle tête va être faite une fois que j’ajoute 2 têtes identiques. Alors que je sais par avance combien font 64+64 par exemple :)
Je dépasse pas le Marc pour l’instant. Laisser moi la soirée et le Teuf sera mien
" />
Cool, peut-être que les commentaires de PCI pourront enfin supporter l’UTF8. :lol:
14580, et pour donner un indice, ki embrasse le chien ?
Ho le magnifique craquage…
Woaaw l’hallu les photos ! :)
" />
" />
Perdu à 4716pts, mais j’ai pu choper Marc donc ça me suffit
http://davidpci.github.io/2048-INpact/img/marc.png
Gagné ! 20320 bon y’a pas de boobs a la fin pour ceux qui voudraient savoir ^^
Je met pas de screenshot pour pas spoil
Sympa de faire la pub du mec qui a fait ce jeu, mais 2048 ne serait pas une copie de Threes! ?
Je ne veux pas être méchant mais ça fait presque peur
" />
C’est quoi le machin vert? Une tétine? ?
Merci pour la réponse David. Je m’étais arrêté à votre news et votre version du jeu. 11508 pour le premier coup et Titia je suppose. ;)
Celle là est plus simple :http://jennypeng.me/2048/
" />
Si des solutions commerciales telles que Candy Crush l’ont déjà largement démontré
Oui enfin on l’a pas attendu pour avoir la démonstration, à moins que Pong soit considéré comme ayant une mécanique complexe.
Zut je n’arrive pas à arriver à la fin, pour voir sans tricher qui a la meilleure tuile
" />
1598 pts… perdu… Vous avez conscience que vous venez de gâcher ma nuit ?
C’est titia à la place du 2 ?
je comprends rien mais je marque des points
" />
Seconde tentative… 3088pts… perdu…
A-t-on le droit de traiter des employés de la sorte!!!
" />
Quel est l’intérêt ? Le jeu original est top, aucun fork ne l’améliore. Enfin bon il parait que cela ne nuit pas à la productivité
Amusez vous : allthe2048.com/
2100 au 1er essai, je suis loiiiiin…
" />
c’était étonnant qu’il n’y ai pas de version MLP alors j’en ai fait une :p
" />
http://games.usvsth3m.com/2048/brony-edition/
La version de “fier panda” est pas mal non plus ^^
Moi je me suis arrêté après avoir vu la photo de titia
" />
" />)
(non je ne fayote pas pour avoir un T-shirt
Fini au 3eme essais
" />
Faut juste avoir trouver la technique et une petite dose de karma pour le random.
je viens de tester et pas de photos de David
" />
" />
David,
" />
" />
" />
T’es un vilain.
Va me faire retirer cela de la tête, maintenant.
Comment vais-je faire pour arrêter alors que j’ai un taf monstre à terminer?
C’est pas Threes le premier ? Il me semble que 2048 a copié Threes, qui est un gros succès récent sur iOS… Donc si on peut au moins citer le vrai premier jeu, ce serait sympa pour le développeur…
http://asherv.com/threes/threemails/