Comment ajouter des commandes tactiles à un jeu par navigateur prévu pour le clavier ?

Posez sur le jeu une couche tactile distincte qui lui transmet les entrées qu'il comprend déjà. Voici comment nous l'avons fait pour KittenGalaxy, et ce que nous n'avons pas encore testé.

Ajoutez une couche distincte de commandes à l'écran qui transforme les touchers en entrées que votre jeu gère déjà, et affichez des commandes différentes pour chaque écran du jeu. Vous n'avez pas à réécrire le jeu. C'est ce que nous avons fait pour rendre KittenGalaxy jouable sur téléphone, et cet article passe en revue les décisions prises, y compris les parties que nous n'avons pas encore pu tester.

Qu'attendait le jeu auparavant ?

KittenGalaxy est un jeu de tir d'arcade écrit dans un seul fichier JavaScript qui dessine sur un canvas. Toutes ses entrées arrivaient de trois façons : des touches pour voler, tirer et naviguer dans les menus ; des caractères saisis pour le nom d'un pilote ; et des clics de souris pour la liste de la boutique et pour un pavé numérique dessiné sur le canvas dans ses défis de maths.

Sur un téléphone, le joueur n'a alors rien sur quoi appuyer. Il n'y a pas de touches, et les touches numériques du canvas, dessinées sur 38 unités de large dans une aire de jeu de 720 unités, font environ 20 pixels CSS de large sur un téléphone de 375 pixels. C'est trop petit pour viser de façon fiable.

Le toucher doit-il modifier un état d'entrée partagé ou envoyer des événements clavier ?

Il existe deux conceptions courantes.

L'état partagé est la conception la plus propre, et si vous commencez un jeu aujourd'hui, construisez-le ainsi. Nous avons choisi les événements clavier synthétiques pour une raison : KittenGalaxy est développé ailleurs, et nous conservons son fichier octet pour octet tel que nous le recevons, afin que l'adoption d'une version plus récente ne nous oblige jamais à refaire nos modifications. Les événements créés par script atteignent bien les écouteurs ordinaires. Ils ne déclenchent pas les actions par défaut du navigateur, et un jeu n'en a pas besoin.

La couche tactile doit aussi savoir sur quel écran se trouve le jeu. Pour cela, notre étape de build ajoute un petit objet en lecture seule qui expose quelques valeurs, comme l'état courant et la présence d'une roquette. Rien dans cet objet ne peut modifier le jeu.

De quelles commandes chaque écran a-t-il besoin ?

Un jeu de boutons fixe est la première tentative habituelle, et il échoue dès que le jeu a un menu. Listez chaque écran et ce que le joueur doit pouvoir y faire.

Trois détails ont compté plus que prévu.

Utilisez un vrai champ de texte pour le texte. Seul un champ qui a le focus fait apparaître le clavier du téléphone. Nous tenons les frappes de ce champ à l'écart du jeu et saisissons le nom terminé dans le jeu en une seule fois.

Un doigt ne peut pas survoler. À la souris, pointer une ligne de la boutique la sélectionne et cliquer l'achète. Un toucher fait les deux à la fois, ce qui facilite les achats accidentels. La couche transforme le premier toucher sur une ligne en sélection et laisse passer le second comme achat.

Masquez ce qui ne s'applique pas. Le bouton de roquette apparaît quand une roquette est équipée, et le bouton de bombe quand une bombe est en réserve. Moins de boutons, ce sont des boutons plus grands.

Comment construire un stick sous le pouce ?

Le vaisseau du jeu se déplace dans huit directions, comme avec les flèches du clavier ; le stick n'a donc qu'à décider quelles flèches sont enfoncées. Le nôtre apparaît là où le pouce se pose, ignore les mouvements dans une zone morte de 12 pixels, et considère une direction comme enfoncée quand le pouce est assez loin sur cet axe :

const DEAD = 12;
function steer(dx, dy) {
  const far = Math.hypot(dx, dy) > DEAD;
  const want = {
    ArrowLeft:  far && dx < 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowRight: far && dx > 0 && Math.abs(dx) >= Math.abs(dy) * 0.41,
    ArrowUp:    far && dy < 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
    ArrowDown:  far && dy > 0 && Math.abs(dy) >= Math.abs(dx) * 0.41,
  };
  // press the keys that became true, release the ones that became false
}

Le 0,41 est la tangente de 22,5 degrés, ce qui découpe le cercle en huit parts égales. Quand le pouce dépasse le bord, le centre du stick le suit ; inverser la direction ne demande donc qu'un petit mouvement au lieu d'un long.

Nous avons utilisé les événements de pointeur, qui couvrent le toucher, le stylet et la souris avec un seul jeu de gestionnaires, et la capture de pointeur, pour que le stick continue de recevoir un pouce qui en glisse. Le tir est automatique par défaut, avec un interrupteur pour les joueurs qui préfèrent un bouton de tir : garder un pouce appuyé pendant toute une session est fatigant, et un jeu de tir perd peu à tirer en permanence.

Qu'est-ce qui empêche le navigateur de lutter contre le jeu ?

Un navigateur traite les touchers comme du défilement, du zoom et de la sélection de texte, sauf indication contraire.

• Définissez [touch-action: none](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) sur le jeu et ses commandes, pour que les glissements soient à vous.
• Désactivez la sélection de texte et le menu d'appui long au-dessus du jeu.
• Relâchez toutes les touches maintenues quand la fenêtre perd le focus. Sinon, un vaisseau continue de voler vers la gauche après qu'une notification a pris l'écran.
• Démarrez le son à partir d'un vrai toucher. Les navigateurs n'autorisent l'audio qu'après une interaction du joueur avec la page ; le premier toucher réveille donc aussi l'audio du jeu.
• Mettez à jour les commandes depuis un minuteur, pas seulement depuis la boucle de dessin, pour que les bons boutons soient là avant que la première image ne soit dessinée.
• Utilisez les bandes que le jeu laisse vides. En portrait, notre aire de jeu carrée est au milieu ; les commandes vont donc dans les bandes noires au-dessus et en dessous. En paysage, elles vont dans les coins et restent discrètes.

Qu'avons-nous testé, et quoi pas ?

Le jour de la sortie, le 8 octobre 2026, nous avons vérifié la couche tactile dans un navigateur de bureau réglé à la taille d'un téléphone, en portrait (375 × 812) et en paysage (812 × 375), en la pilotant avec des touchers scriptés : création d'un pilote via le champ de texte, lancement d'une partie, les huit directions du stick, la boutique, et réponse à une question de maths sur le pavé numérique.

Nous n'y avons pas encore joué sur un téléphone ou une tablette physiques. L'émulation ne montre pas la sensation du stick sous un vrai pouce, le comportement du clavier de chaque téléphone, ni la façon dont un appareil plus lent s'en sort. La page du jeu dit exactement cela sous son option navigateur mobile, et nous la mettrons à jour une fois de vrais appareils essayés. Si vous y jouez sur votre téléphone, un avis indiquant l'appareil et ce qui s'est passé est la chose la plus utile que vous puissiez envoyer.

Questions fréquentes

Ai-je besoin d'un moteur de jeu pour des commandes tactiles ? Non. Les boutons sont des éléments HTML ordinaires placés au-dessus du canvas, et le navigateur détermine lequel a été touché.

Les boutons doivent-ils être dessinés sur le canvas ou faits en HTML ? En HTML, dans la plupart des cas. Vous obtenez la détection des touchers, le multi-touch et les libellés d'accessibilité sans les écrire, et vous pouvez changer le style en CSS.

Quelle taille doit avoir un bouton tactile ? Les boutons utilisés pendant le jeu font au moins 46 pixels CSS de côté en portrait, et les principaux sont plus grands ; quelques boutons utilitaires dans les coins sont volontairement plus petits. Les touches du canvas que nous avons remplacées faisaient environ 20.

Les joueurs trouveront-ils un geste caché ? Partez du principe que non. Chaque action de notre couche a un bouton visible et libellé.

Puis-je référencer un jeu sur HeapPlay avant que ses commandes mobiles soient terminées ? Oui. Chaque façon de jouer est indiquée et vérifiée séparément ; vous pouvez donc proposer votre jeu avec une option ordinateur maintenant et en ajouter une mobile plus tard. Les développeurs vérifiés peuvent ensuite enregistrer chaque version eux-mêmes ; voir ce que reçoivent les développeurs.