1

Quelques exemples et liens vers les API les plus “récentes” ou, en tous cas, les plus intéressantes à connaître. Il n’est pas nécessaire de savoir les utiliser parfaitement (de toute façon, elles évolueront), mais avoir connaissance de leur existence vous évitera de vous jeter sur des frameworks lourds et vous permettra de les intégrer dans vos gameplays.

ArrayBufferView

Terme générique, désignant des “arrays binaires”, c’est à dire une liste de Float (16, 32, 64 bits), d’integers (8, 16,… signés ou non). Ce genre de tableau sera à privilégier si vous avez besoin de manipuler une longue liste de nombre (pixels d’une image, donnée numérique sur les cases d’un jeu, etc).

ArrayBufferView sur le MDN

Cette interface n’existe pas réellement: elle sert juste de terme générique.

Atomics

Une interface pour la manipulation concurrente de la mémoire (dans le cas de plusieurs scripts JS exécutés en parallèles). Autant dire que l’API Atomics est surtout le reflet d’une architecture trop lourde, et ne devrait probablement pas être utilisée dans un jeu web.

Audio API

L’Audio API permet de manipuler des sons, et d’en générer à la volée. A éviter, car cela reflèterait un jeu web trop lourd et bien plus facilement faisable via un SDK.

Blob/File

Deux API (Blob et File) permettent de créer des données binaires et de les manipuler (Binary Large OBbject). Ces données peuvent éventuellement venir d’un fichier sélectionné par l’utilisateur (via input type="file"). Ces deux APIs sont complétées par FileReader, qui permet de lire les données du fichier sélectionné par l’utilisateur.

Il n’est pas possible d’accéder directement aux fichiers sur le système du client (PC/mobile): il faut que l’utilisateur le sélectionne dans un input file, ou qu’il l’enregistre manuellement.

BroadcastChannel

Cette API permet de créer un canal de communication entre les browsing contexts d’un client, c’est à dire entre les onglets d’un même site ou entre un onglet et des iframes. C’est une API conçue pour le “One To many”, c’est à dire qu’un onglet/une iframe va envoyer un message sur le channel, et les autres onglets/iframes qui y ont souscrit recevront ce message et pourront le traiter.

BroadCast Channel (MDN)

Le BroadcastChannel est fait pour le one-to-many et pour une origin donnée, contrairement au window.postMessage et Channel Messaging API, plus orientés one-to-one et cross-origin. Le devblog Google l’explique bien.

Budget API

Non, cette API ne permet pas de faire des micro-paiements, mais de piloter le temps de calcul qu’un script JS prend (pour limiter la charge de votre site par exemple). Elle n’est pas implémentée à l’heure actuelle (cf le MDN).

Canvas API

Inutile de vous jeter dessus pour le moindre jeu web. Pour rappel: <canvas> can be used to draw graphics, like graphs, photo compositions, create animations, or even do real-time video processing or rendering. C’est donc bien plus orienté “dessin final” que “rendu d’un jeu avec des interactions dessus”. Pour faire des cartes 2D interactives, privilégiez le SVG. Et pour la 3D interactive, optez pour un SDK (classique AAA ou web). Battalia par exemple en fait un usage intéressant (couplé à webGL) pour créer un rendu dynamique (évoluant en fonction des décisions de jeu) des planètes du joueur.

Canvas API (MDN)

Console

Très pratique pour les débogages, l’API Console est utilisée pour afficher des informations sur des variables ou des évènements internes au . Néanmoins, elle est bien plus vaste que le seul log(myString): stack de messages, affichage d’objets et de leurs propriétés en temps réel, lien vers le DOM, mesures de performance, etc sont autant de raisons de prendre 5 minutes pour découvrir les autres méthodes de cette API.

L’API Console (MDN)

Crypto API

Permet de faire des manipulations cryptographiques, comme du salage/hashage (sans nécessiter de lib externe: window.crypto.subtle.digest('sha-256', new TextEncoder('ascii').encode('Hello, world!')).then(h => console.log(Array.from(new Uint8Array(h)).map(e => e.toString(16)).join('') ))) ou du cryptage à clef publique. Cela peut être intéressant dans le cadre de certains jeux pair-à-pair, qui ont besoin de vérifier l’intégrité des données des autres joueurs. Mais pour les autres cas, cela ne vous servira pas.

La Crypto API (MDN)

Hashage: SubtleCrypto (MDN)

CSS

Il existe une interface CSS en (à ne pas confondre avec le langage CSS en général), permettant entre autre d’échapper les caractères spéciaux dans un sélecteur (escape()) ou de vérifier la prise en charge d’une fonctionnalité CSS par le navigateur (supports()). Il y a peu de cas d’application, mais connaître son existence sera toujours un plus.

L’interface CSS

Voir aussi les interfaces StyleSheet et LinkStyle décrites sur le MDN.

CSS Object Model

Un ensemble d’API permettant de manipuler le CSS d’une page à la volée.

Cette API est très complexe à gérer: évitez toute notion de “CSS dynamique”, ou préférez éventuellement la création d’une balise style que vous remplirez dynamiquement.

Document

Une API vaste, qui regroupe toutes les méthodes et fonctions accessibles depuis document.: events, propriétés (stylsheetset pour gérer des skins, documentURI et location pour l’adresse de la page, etc), et méthodes comme querySelector, querySelectorAll (qui renvoie une NodeList itérable via forEach), getElementById, closest() (remplaçant “ancestor” de jQuery), et TreeWalker pour des sélecteurs plus complexes et customisés. Il serait vain de paraphraser le MDN, donc, je vous invite à le lire.

L’API “Document” sur le MDN

requestPointerLock

La méthode requestPointerLock() permet à la page de prendre le contrôle du pointeur de souris: il sera donc possible de faire une action quand la souris est déplacé, sans que le pointeur ne bouge réellement. Le site web peut donc se servir des mouvements de la souris comme d’une entrée utilisateur.

Cette API devrait être utilisée avec parcimonie, car il n’y a pas de pointeur sur un appareil tactile. De plus, si elle est adaptée à un mini-jeu, mieux vaut vous tourner vers un SDK si vous voulez faire un FPS ou un jeu AAA qui aurait besoin d’utiliser la souris comme entrée de jeu.

scrollIntoView

La méthode scrollIntoView() appelée sur un élément HTML permet de dire au navigateur de scroller la vue jusqu’à rendre cet élément visible. Le scroll peut-être doux ou instantané, et se rendre au début, au milieu ou à la fin de l’élément ciblé.

DOMParser

Cette API vous permet de construire un arbre DOM à partir d’une chaîne de texte, à l’image de ce que le $ magique de jQuery fait. La différence, ici, est d’avoir une fonction ne servant qu’à cela (ce qui limite les injections et failles) et sans aucune dépendance externe (bye bye jQuery).

DOMParser (MDN)

Gamepad API

Très certainement inutile, sauf éventuellement là encore pour des minis-jeux ciblés, cette API vous permet d’accéder aux manettes branchées sur la machine. Si vous en venez à des jeux requérant ce genre d’accès, je vous conseille quand même de vous demander si vous faites un jeu web ou si vous réinventez juste un jeu AAA…

Gamepad API (MDN)

Géolocalisation

Il est maintenant possible d’utiliser la position (approximative) de vos joueurs dans le monde réel pour enrichir votre jeu, via la géolocalisation (comme le fait D’Gang Go). Vous pourrez récupérer les coordonnées GPS du joueur, observer ses changements de position et trouver de nouvelles applications de ces données aux jeux web.

Attention à ne pas être inutilement intrusif: beaucoup de joueurs pourraient refuser à votre jeu web de connaître leur position GPS.

Intersection Observer

Permet de surveiller la part “visible” d’un élément HTML, soit dans l’écran, soit par rapport à un autre élément HTML. Quelques utilisation possibles sont: déclencher une pub quand celle-ci est visible à l’écran, lancer le chargement d’une vidéo/GIF/carte/composant de page etc une fois visible (pour les fans de scroll-inifni tel Twitter; Polymer doit probablement le faire aussi), ou, pour les jeux web, l’affichage d’info-bulles d’aide peut être une piste d’usage.

(new IntersectionObserver(
  entries => {
    // target is out of view when intersectionRatio == 0
    if (entries[0].intersectionRatio < = 0) {
      return;
    }
    console.log('Do something!');
  }, {
    'root': document.querySelector('#container')
  }))
    .observe(document.querySelector('.target-element'));
Exemple d’utilisation de IntersectionObserver

Intersection Observer sur le MDN (EN)

Au vu des applications possibles, il y a quand même peu de chances que cette API concerne vos jeux.

MediaQueryList

Utile pour détecter les changements de dimension, ratio, orientation, etc du terminal. Attention: n’allez pas vous en servir pour refaire les @media de CSS: l’event change de MediaQueryList sert surtout à lancer un traitement JS lors de ces changements (ie: redirection, message d’alerte, etc), et non à faire des modifications de présentation.

Media Query List (MDN)

L’API Screen peut permettre de compléter les Media Query List

Ne recodez pas l’interpréteur CSS en JS: faites d’abord les choses en CSS, abandonnez des features si vous ne pouvez pas le faire en CSS, plutôt que de les bricoler en JS.

MediaDevices API

Cette API vous permet d’accéder au micro et à la caméra du terminal (qui n’existent pas forcément, et qui sont spoofables!). Un exemple d’usage peut être le mini-jeu “Keep the Ball on Track”. Soyez inventif pour trouver des gameplay se servant de ces APIs!

MediaDevices

Mutation Observer

Très pratique pour un GreaseMonkey, cette API permet d’exécuter un code JS quand un noeud DOM est supprimé/ajouté/modifié dans la page web. Néanmoins, il y a de grandes chances pour que le recours à cette API, lente, soit le reflet d’une mauvaise architecture de code. Le seul cas pratique et incontournable réside dans l’écoute des modifications d’une page sur laquelle vous n’avez pas la main (typiquement, un user script dans GreaseMonkey).

Mutation Observer (MDN)

Notification

Une API permettant de notifier l’utilisateur d’un évènement, comme un nouveau message privé, une attaque en cours, un succès déverrouillé, etc.

Notification API (MDN)

Performance API

La Performance API vous permet de mesurer des durées précises dans l’exécution de votre code Javascript. Toutefois, je ne vous la recommande pas: elle ne vous sera probablement pas utile car si vous avez besoin d’optimisations aussi poussées, alors vous devriez plutôt vous tourner vers un SDK classique. Elle peut toutefois être utile si vous avez quelques traitements lourds et ponctuels à optimiser (génération d’une image du jeu, calculs de graph pour le A*, etc).

La Performance API (MDN)

Permission API

Cette API vous permet de gérer les autorisations de vos sites: est-ce que vous pouvez afficher des notifications? Utiliser le microphone/la webcam du client? etc.

Cette API est encore très mal implémentée.

La Permission API (MDN)

Server Side Events

L’API Server Side Events permet au serveur d’envoyer des informations au client, sans que le client n’ait eu besoin de faire une requête. Cela permet donc de “pusher” des données du serveur vers le client, comme l’arrivée d’une flotte spatiale (dans un space-opera), l’approche d’une troupe ennemie, ou la réception d’un nouveau message. Voyez aussi la classe correspondante: EventSource.

Service Worker

L’API Service Worker permet à votre code Javascript d’intercepter toutes les requêtes que le navigateur va faire vers votre serveur web, et de les manipuler. Vous pouvez donc coupler cette API à IndexedDB pour créer un mode “hors-ligne”. Mais ce genre d’utilisation sera lourde à mettre en place, et probablement complètement inutile pour un jeu web: le bon usage des headers HTTP sera souvent suffisant.

Speech API

API permettant de faire de la reconnaissance vocal, et de la lecture de texte (autrement dit, “voix vers texte” et “texte vers voix”). La première, la reconnaissance, est encore un peu bancale mais la seconde est aboutie. A vous de trouver de bons gameplays pour utiliser cette API!

La Web Speech API (MDN)

window.speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, world!"));
Le texte Hello, world! sera lu par le navigateur

TextEncoder/Decoder

Permet de manipuler des l’encodage des chaînes de caractères. Mais, franchement, évitez-la… A n’utiliser que si vous n’avez vraiment pas d’autre choix (un serveur tiers qui répond un encodage spécifique par exemple). Voir TextEncoder et TextDecoder sur le MDN.

Touch

Récupéré via les event tactiles (touchstart touchend touchmove etc), cet objet permet d’avoir des informations sur le point de contact: pression, rayon, orientation, etc. Attention car son utilisation implique que vous n’êtes plus “web”, mais uniquement compatible pour les écrans tactiles.

Touch (MDN)

URL

L’objet URL permet la manipulation simple des URI en JS. URLSearchParams (constructible directement ou récupérable via URL.searchParams) permet de récupérer et traiter les paramètres GET.

IL est donc maintenant interdit d’utiliser des "a=b&c=d".indexOf("&") pour récupérer des données GET en JS!

ValidityState

Faisant partie de la “Constraint API”, l’objet ValidityState permet de tester la validité d’un champ input avant la soumission d’un formulaire. C’est donc un bon complément des différents types d’input possibles, pour améliorer l’expérience utilisateur. Evidemment, cela ne dispense pas de faire également une validation des données côté serveur.

Vibration API

Très simple à utiliser (navigator.vibrate(...)), cette API permet de faire vibrer le terminal, sur mobile par exemple. Si le terminal n’a pas cette fonction (ie: PC, TV, etc), alors l’appel à vibrate ne fait rien. Cela peut être utile pour améliorer un poil l’immersion dans les minis-jeux mobiles, mais n’en abusez pas. D’autant que l’utilisateur doit donner son consentement pour que cette API marche, ce qui peut le freiner voir nuire à l’UX.

Vibration API (MDN)

D’autres APIs seront rajoutées dans cet article au fil du temps.

VR (Réalité Virtuelle) API

Je vous laisse découvrir cette API sur le MDN, mais sachez que l’utiliser sera inutilement lourd et compliqué: privilégiez un jeu AAA classique (et utilisez un SDK) plutôt qu’un jeu web.

XSL et XPath

La manipulation et la transformation de données XML peut se faire en Javascript via XPathExpression (également très utile pour sélectionner des noeuds textes du DOM) et via XSLTProcessor.

document.createExpression('//div[following-sibling::div]', null).evaluate(document, XPathResult.ANY_TYPE, null).iterateNext()
Sélectionner les div qui sont suivies d’une autre div, infaisable via les sélecteurs CSS mais faisable facilement en XPath

WebAssembly

Je survole, mais c’est une techno qui permet en gros de faire tourner du C/C++ compilé dans le navigateur, et de le faire dialoguer avec du Javascript. Très certainement trop, mais vraiment trop, lourd à mettre en place pour un petit jeu web amateur. En revanche, les SDK type Unity/Neoaxis pourront s’en servir pour permettre d’exporter votre jeu “AAA” pour le rendre jouable sur le web, sans plugin.

WebAssembly (MDN)

Web Components

Un pack de 4 APIs groupées en une, permettant d’importer un HTML dans un autre, de créer des éléments HTML customs, etc. Bon, la plupart du temps, cela ne vous servira pas (n’atomisez pas inutilement vos pages web!) surtout si le serveur se charge déjà d’appliquer le template HTML à vos données (ie: PHP, JSP, etc). Voir aussi slot et template.

WebRTC

Cette technologie permet de faire communiquer vos clients (joueurs) directement entre eux, en temps réel. Cela vous permettra, par exemple, d’implémenter un multi-joueur sur vos minis-jeux (ce que j’essayerai de faire pour tous les minis-jeux Reinom) ou de mettre en place un tchat sans devoir passer par votre serveur web (qui pourrait ne servir qu’à historiser les messages). La quantité de données transférée peut être importante (vidéo) si la connexion entre les joueurs est bonne.

Voir la démo (tchat) de WebRTC

Voir la démo vidéo

WebSocket

L’API WebSocket permet de faire une communication “temps-réel” entre serveur et client (navigateur). Je vous la déconseille: préférez un SDK pour ces cas-là, sans devoir vous plonger dans l’étude de la classe WebSocket et la mise en place d’un serveur adapté.

Web Worker

Cette API permet de faire des traitements lourds en arrière-plan, sans interférer avec la fluidité de la page web. Cela peut servir au calcul de chemin, à la création d’un IA, ou à la génération de contenu.

Attention car ces exemples d’applications sont complexes et chronophages: vous gagnerez peut-être du temps à délégant ces tâches à des bibliothèques existantes, ou à un SDK. La Background Task API sera également utile (et plus simple) pour les tâches d’arrière-plan.

Window

L’objet window contient énormément de méthodes, dont je vous laisserai faire le tour. La méthode .fetch() est d’ailleurs très intéressante, puisqu’elle permet de faire des requêtes (type AJAX via XMLHttpRequest, mais pas que) très facilement, en utilisant les Promise.

1