Boîte à outils

Comment je suis devenu développeur en un mois : leçon n°3, cueillir des vaches en OVNI

Dans ce jeu, essentiellement codé en JavaScript, l'internaute contrôle une soucoupe volante qui kidnappe des vaches.
Dans ce jeu, essentiellement codé en JavaScript, l'internaute contrôle une soucoupe volante qui kidnappe des vaches. © PC/L'Etudiant
Par Paul Conge, publié le 27 janvier 2017
1 min

CARNET DE BORD (3/4). Peut-on en un mois percer les mystères du code ? Notre journaliste tente l'expérience. Depuis trois semaines, il suit les cours de langage JavaScript du site Openclassrooms. Dans cet épisode, il crée un jeu de collecte spatiale de vaches...

Résumé des épisodes précédents. Après une première semaine à passer en revue les rudiments du langage JavaScript  – boucles, conditions, variables – et son engeance, la seconde fut consacrée à coder des pages Web qui réagissent aux actions de l'internaute, clics, touches du clavier, etc. Désormais, la tension monte d'un cran.

Lire aussi : Comment je suis devenu développeur en un mois : leçon n°2, créer un mini-jeu

Cette 3e semaine, notre excursion se poursuit dans le parcours Openclassrooms de "développeur front-end", ce développeur qui charpente, grosso modo, les éléments qui s'affichent à l'écran. Il fallait utiliser nos acquis (encore fragiles) afin de mettre sur pied de véritables jeux vidéo bidimensionnels. Les codes s'allongent, de même que la complexité des algorithmes à inventer.

D'autre part, l'échéance se rapproche : il ne reste plus que deux semaines de code, toujours au rythme de deux heures par jour. Défi fixé : parvenir au bout du deuxième projet que propose le cursus, celui qui consiste à créer un jeu de combat sur plateau.

Jour 15 : des tableaux, encore des tableaux

Les "miaous" de notre tête de chat qui se déplace au gré des clics de la semaine dernière ne sont plus qu'un lointain écho. On ingère aujourd'hui quelques fonctions ($.grep, $.map...) qui permettent de réaliser des choses comme un diaporama photo interactif. Et, du même coup, on apprend à fouiner dans des tableaux de données. Comme sur Excel. L'éventail des applications possibles dans la vraie vie (celle du journalisme, par exemple) saute aux yeux : chercher des valeurs, les compiler, les mettre en équation, les transformer...

Jour 16 : encore un truc de codeur

Pour s'exercer, l'auteur des cours propose un nouveau TP. Encore un truc de codeur : il s'agit de générer une sorte d'interface où l'internaute a la mainmise sur l'allure de la page. Il doit pouvoir en modifier la couleur de fond, la police de caractères... Les fichiers de code se complexifient et ressemblent à cela :

null

En attendant, les échanges avec Stéphane, notre mentor assigné en début de parcours, continuent. Ils se déroulaient auparavant sur Slack, une plate-forme de messagerie très usitée en milieu professionnel. Ils ont lieu désormais sur WorkPlace, le module de Facebook destiné au travail collaboratif. Tel un Facebook parallèle uniquement dédié au travail (un cauchemar). Tous les élèves d'Openclassrooms y sont réunis, discutent, se structurent en réseaux d'élèves. Ceux qui étudient le JavaScript ont leur groupe dédié, ainsi que ceux qui ont le même mentor. 

Lire aussi : Travailler chez Facebook, ça ressemble à quoi ?

Jour 17 : un jeu de collecte de vaches

"Jeu de collecte spatiale", le nom du prochain TP (encore un) est alléchant. Le pitch : un joueur pilote une soucoupe de l'espace venue kidnapper des vaches. Il les happe dans son vaisseau à leur survol. Dans le même temps, cet OVNI doit éviter les collisions avec de vilaines voitures noires (qui ont le mauvais goût d'être extra-terrestrophobes).

Quelle est la recette ? À quelques effets d'animations, ajoutez des commandes du clavier (les flèches). Prévoyez une image pour chaque élément, y compris le décor. L'arrière-plan n'est rien d'autre qu'une image de pelouse qui défile à l'infini, pour que cela génère une impression de déplacement. Répétez l'apparition des bovidés et des voitures. Qu'ils jaillissent aléatoirement sur la pelouse en la remontant. Saupoudrez enfin de quelques subtilités de code, c'est prêt. Dégustez chaud.

Au passage, il y a bien quelques données mathématiques à prendre en compte. Parmi elles, la taille des images, les positions relatives (Quelle distance sépare la vache de la soucoupe ? À quel moment est-elle capturée, sachant qu'elle est constamment en train de se déplacer ? Etc.) L'univers du code n'est pas réservé aux seuls cracks en maths. Cela dit, une petite fibre matheuse peut aider à se dépatouiller plus facilement.

Pour finir, montrez le résultat à votre copine, elle sera épatée.


Jeu de collecte spatiale de vaches

Cliquez sur l'onglet "Result". Pour déplacer la soucoupe, utilisez les 4 flèches du clavier. Passez au-dessus des vaches pour les capturer, et esquivez les voitures.

Jour 18 : bis repetita

La réalisation de ce jeu codé la veille, pas si compliqué, démontre que tout devient possible avec le JavaScript. Une infinité de variantes se présentent au codeur. Par exemple, pourquoi ne pas imaginer un jeu où un prof volant capture des élèves qui sèchent les cours ? Le brevet est en passe d'être déposé.

On embraye sur une autre activité : créer un générateur de formulaires avec des animations. Que l'on soumet à la correction collective, comme c'est l'usage. Il va falloir attendre le feedback.

Jour 19 : "On approche de la date butoir..."

Ce mercredi, dernier tête-à-tête matinal sur Google Hangouts avec Stéphane, notre mentor, avant la remise finale du gros défi du parcours. Rappellez-vous : le défi est de coder ce fameux jeu de plateau en deux dimensions, où deux joueurs s'échangent des coups de savate ou de bazooka. Le temps est compté. "Comme on approche de la date butoir, si tu galères, écris-moi que je sache si je dois te donner un coup de pouce. En fin de parcours, on s'acharne toujours un peu sur nos mentorés de Pôle emploi pour qu'ils aillent au bout...", plaisante Stéphane. Des mentorés de Pôle emploi ? Oui : le site ouvre ses formations "Premium Solo" à tous les demandeurs d'emploi pendant trois mois.

Jour 20 : bienfaits et méfaits de la correction "peer-to-peer"

L'activité qu'on envoyait deux jours plus tôt à l'attention des correcteurs a (enfin) reçu ses appréciations. En effet, l'un des inconvénients de l'évaluation "peer-to-peer" (on est corrigé par les "pairs") reste la durée de correction. Le temps d'attente dépend du nombre de personnes qui suivent le cours en simultané, ceux qui sont parés pour corriger. Malgré sa forte communauté, Openclassrooms n'échappe pas à ce petit écueil et les durées peuvent s'allonger (deux à trois jours en moyenne).

Il y a toutefois un fort intérêt à être de l'autre côté du miroir. Avec cette pédagogie P2P, on corrige trois copies de nos comparses sous 24 heures, à l'aide, si besoin, d'un corrigé. C'est comme percer les cloisons mentales d'autres codeurs. Au fur et à mesure de la lecture de leurs lignes de JavaScript, on découvre des solutions que l'on n'avait pas envisagées. À l'instar de Tony, qui a coiffé son code de plusieurs fonctions vouées à simplifier l'écriture. Inspirant. Sur les trois copies à décortiquer, d'autres comportent de grosses erreurs. Rassurant ?

En attendant, le compte-à-rebours continue... Plus qu'une semaine avant la remise du projet. 

Vous aimerez aussi

Contenus supplémentaires

Partagez sur les réseaux sociaux !