Slither.io : Chapitre 3.2

 

Difficultés

Le code JS n'est pas évident à analyser pour plusieurs raisons.
  • Il est minifié, mais ce point est facile à corriger même en ligne par un service comme jsbeautifier.org/
  • La quasi totalité du code est comprise dans un seul fichier : game7egig.js. Ce code gère l'écran de login, le jeu, l'écran de changement de skin et pour chaque écran le code JS crée une bonne partie des composants graphiques mais aussi gère le comportement. De ce fait il faut d'abord dé-tricoter le code et identifier chacune des parties.
  • Il n'y a aucune feuille de style CSS de chargée, les composants créés en JS sont aussi stylés en JS, ce qui rend le code encore plus lourd.

Écran d'accueil

L'écran d'accueil est composé du logo, de l'input pour saisie du pseudo, du bouton "Jouer" et des différents items que vous voyez vous-même à l'écran.  Certains items sont cachés on y reviendra.







Voici les différents éléments composant la page d'accueil :


Fond d'écran

Le fond d'écran est la div#nbg déclarée dans le HTML et initialement vide. Le code JS modifie ce fond d'écran pour y incruster une image bruitée, et donner une impression de neige ou de papier, l'intérêt de la chose est assez limité et relève plutôt de la beauté programmatique que du design :
// création d'un fond d'écran de type bruit aléatoire
var nbg = document.getElementById("nbg"),nzbg, sadg, sadu, sadd, p, xx, yy, grw, grh, elem, map, imgd, ctx;
elem = document.createElement("canvas");
var rw = 64,rh = 64;
elem.width = rw;
elem.height = rh;
ctx = elem.getContext("2d");
map = ctx.getImageData(0, 0, rw, rh);
imgd = map.data;
l = imgd.length;
for (p = 0; p < l; p += 4).5 > Math.random() ? imgd[p] = imgd[p + 1] = imgd[p + 2] = 0 : (imgd[p] = 44, imgd[p + 1] = 56, imgd[p + 2] = 68), imgd[p + 3] = Math.floor(32 * Math.random());
ctx.putImageData(map, 0, 0);
nzbg = elem.toDataURL();
nbg.style.backgroundImage = "url(" + nzbg + ")");

Le code crée un élément canvas temporaire, récupère un contexte 2D, mappe le contenu image dans un tableau (imgd) puis y injecte des valeurs aléatoires. Cette image est codée sous forme d'une URI (elem.toDataURL()) puis utilisée comme élément de fond de la div "nbg" qui occupe tout le fond d'écran. Je vous laisse juger de la pertinence de cette solution, en terme de calcul et donc de durée de chargement de la page, une image toute faite aurait surement été une meilleure solution.

Logo

Le logo est la div#logo, elle aussi initialement déclarée dans le HTML et vide. Le code JS crée un élément canvas,  récupère le contexte 2D puis la fonction showLogo() dessine le logo et son animation lors du chargement de la page, on ne va pas y passer trop de temps car ce n'est pas l'intérêt principal de ce jeu :
// création de l'élément qui va intégrer le logo
var lmch = document.createElement("div");
lmch.style.width = "450px";
lmch.style.height = "115px";
var lmc2 = document.createElement("canvas"),lmc = document.createElement("canvas"),lgsc = 1,lw = 900,lh = 270;
lmc.width = lmc2.width = lw;
lmc.height = lmc2.height = lh;
var lctx = lmc.getContext("2d"),lctx2 = lmc2.getContext("2d");
trf(lmc2, "scale(.5, .5)");
trfo(lmc2, "0% 0%");
lmch.appendChild(lmc2);
logo.appendChild(lmch);
...
showLogo();

Qualité


L'icone "high" ou "low quality" en haut à droite permet de modifier les variables want_quality et Localstorage.qual qui impactent le niveau de rendu du jeu. Là aussi le fait que la valeur soit stockée dans LocalStorage permet de conserver le choix effectué par le joueur.

 

Réseaux sociaux

Une iframe en haut à gauche comporte des boutons de liens twitter et facebook, sans interaction avec notre page. Des images/boutons en bas à droite (#twt et #fb) présentent eux aussi un lien vers ces réseaux sociaux, mais cette fois-ci si on clique le code JS vient modifier la valeur localStorage.edttsg = "1". Cette variable étant enregistrée dans le localStorage, le navigateur s'en souviendra lors des prochaines visites. Cette variable indique qu'on a cliqué sur l'un de ces liens et en bonus nous permet d'accéder à l'écran de changement de skin, ce lien apparait sous forme de bouton #csk (pour change skin) en bas à gauche.

Pseudo

Le composant input#nick permet de saisir un pseudo. Lors du lancement du jeu ce pseudo est récupéré, vérifié  par la fonction gdnm() : si le pseudo est trop long, contient des termes injurieux, ou des caractères non ascii, la fonction renvoie False et du coup le pseudo est transformé en une chaine vide. Après vérification le pseudo est envoyé au serveur.
On peut contourner cette contrainte en redéfinissant la fonction : function gdnm(b){return !0;} 

 

Victory

Certains composants sont cachés par défaut comme le composant "victory" qui s'affiche en cas de victoire, on verra à l'analyse plus poussée du fonctionnement du jeu comment fonctionne ce composant :

 

  Écran"Change skin"


Le bouton "change skin" n'apparait que si localstorage.edttsg existe et a pour valeur 1, donc si on a cliqué sur l'un des boutons twitter ou facebook (voir plus haut). 

Les flèches sont créées par le code HTML de la page mais leur affichage est activé par le code JS. Le clic sur l'une des flèches lance la fonction setSkin() avec comme paramètre la variable "snake" et le numéro de la "skin" qui a été choisie, cette fonction modifie la valeur snake.rcv, mais aussi toutes les caractéristiques liées à chaque "skin" comme les antennes, le nombre d'yeux, la couleur etc ... . On peut très bien modifier sa décoration pendant le jeu en lançant la fonction setSkin(snake,"n° de skin"), mais l'intérêt est assez moyen.

psk.onclick = function() {
    if (playing && null != snake) {
        var b = snake.rcv;
        b--;
        0 > b && (b = max_skin_cv);
        gw2k16 || 42 == b && b--;
        setSkin(snake, b)
    }
    return !1
};

L'animation centrale présentant le ver avec la décoration choisie est gérée par la fonction principale d'animation : oef()

Un clic sur le bouton "bien" enregistre le modèle de décoration choisi "localStorage.snakeRcv" et modifie la valeur "dead_mtm" qui inhibe l'affichage de notre ver et les autres composants de cet écran pour revenir à l'écran d'accueil. Voici un résumé des éléments composant cet écran :




Nous avons dévoilé une petite partie du fonctionnement du jeu, principalement l'affichage des composants, le prochain chapitre sera consacré à ce qu'on ne voit pas :la connexion aux serveurs.

Aucun commentaire :

Enregistrer un commentaire

Inscription à : Articles ( Atom )