Jeux web adaptés aux appareils mobiles

Le mobile est la plus grande plateforme de jeu. Quelques ajustements suffisent pour que votre jeu web fonctionne parfaitement sur les téléphones et les tablettes.

1) Configuration de la zone d’affichage

Empêchez le zoom et assurez une mise à l’échelle correcte :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2) Canvas en plein écran

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: none; /* Prevent browser gestures */
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

Si vous dimensionnez l’interface en fonction de la hauteur de la zone d’affichage plutôt qu’avec height: 100%, préférez les unités dynamiques de zone d’affichage dvh, svh et lvh à vh. Elles tiennent compte de la barre d’outils rétractable du navigateur mobile, contrairement à 100vh (sur iOS, 100vh correspond à la hauteur lorsque la barre d’outils est masquée, ce qui peut couper le bas de votre mise en page). Ces unités ont atteint le statut Baseline Widely Available et sont prises en charge dans Chrome/Edge 108+, Firefox 101+ et Safari/iOS Safari 15.4+, soit environ 92 % des utilisateurs.

3) Gestion des événements tactiles

const canvas = document.getElementById('game')

// Prevent default touch behaviors
canvas.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false })
canvas.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false })

// Track touches
const touches = new Map()

canvas.addEventListener('touchstart', (e) => {
  for (const touch of e.changedTouches) {
    touches.set(touch.identifier, {
      x: touch.clientX,
      y: touch.clientY,
      startX: touch.clientX,
      startY: touch.clientY,
    })
  }
})

canvas.addEventListener('touchmove', (e) => {
  for (const touch of e.changedTouches) {
    const t = touches.get(touch.identifier)
    if (t) {
      t.x = touch.clientX
      t.y = touch.clientY
    }
  }
})

canvas.addEventListener('touchend', (e) => {
  for (const touch of e.changedTouches) {
    touches.delete(touch.identifier)
  }
})

Si votre jeu doit également fonctionner avec une souris ou un stylet, envisagez d’utiliser les événements de pointeur (pointerdown/pointermove/pointerup) plutôt que les événements tactiles. MDN les recommande désormais comme modèle d’entrée unique et indépendant du périphérique : un seul parcours de code gère le tactile, la souris et le stylet, tandis que le multitouch reste disponible grâce à pointerId (l’équivalent de touch.identifier utilisé ci-dessus). Les événements tactiles conviennent toujours parfaitement aux jeux exclusivement tactiles.

4) Joystick virtuel

class VirtualJoystick {
  constructor(x, y, radius) {
    this.baseX = x
    this.baseY = y
    this.radius = radius
    this.knobRadius = radius * 0.4
    this.active = false
    this.touchId = null
    this.dx = 0
    this.dy = 0
  }
  
  handleTouchStart(touch) {
    const dist = Math.hypot(touch.clientX - this.baseX, touch.clientY - this.baseY)
    if (dist < this.radius) {
      this.active = true
      this.touchId = touch.identifier
      this.updatePosition(touch.clientX, touch.clientY)
    }
  }
  
  handleTouchMove(touch) {
    if (touch.identifier === this.touchId) {
      this.updatePosition(touch.clientX, touch.clientY)
    }
  }
  
  handleTouchEnd(touch) {
    if (touch.identifier === this.touchId) {
      this.active = false
      this.touchId = null
      this.dx = 0
      this.dy = 0
    }
  }
  
  updatePosition(x, y) {
    let dx = x - this.baseX
    let dy = y - this.baseY
    const dist = Math.hypot(dx, dy)
    
    if (dist > this.radius) {
      dx = (dx / dist) * this.radius
      dy = (dy / dist) * this.radius
    }
    
    this.dx = dx / this.radius
    this.dy = dy / this.radius
  }
  
  draw(ctx) {
    // Base circle
    ctx.beginPath()
    ctx.arc(this.baseX, this.baseY, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
    ctx.fill()
    
    // Knob
    const knobX = this.baseX + this.dx * this.radius
    const knobY = this.baseY + this.dy * this.radius
    ctx.beginPath()
    ctx.arc(knobX, knobY, this.knobRadius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
    ctx.fill()
  }
  
  getInput() {
    return { x: this.dx, y: this.dy }
  }
}

5) Boutons tactiles

class TouchButton {
  constructor(x, y, radius, label) {
    this.x = x
    this.y = y
    this.radius = radius
    this.label = label
    this.pressed = false
    this.touchId = null
  }
  
  contains(px, py) {
    return Math.hypot(px - this.x, py - this.y) < this.radius
  }
  
  handleTouchStart(touch) {
    if (this.contains(touch.clientX, touch.clientY)) {
      this.pressed = true
      this.touchId = touch.identifier
    }
  }
  
  handleTouchEnd(touch) {
    if (touch.identifier === this.touchId) {
      this.pressed = false
      this.touchId = null
    }
  }
  
  draw(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = this.pressed ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.2)'
    ctx.fill()
    
    ctx.font = 'bold 24px sans-serif'
    ctx.fillStyle = '#fff'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(this.label, this.x, this.y)
  }
}

6) Gestion de l’orientation

function checkOrientation() {
  const isLandscape = window.innerWidth > window.innerHeight
  
  if (!isLandscape) {
    showRotatePrompt()
  } else {
    hideRotatePrompt()
    resizeCanvas()
  }
}

window.addEventListener('resize', checkOrientation)
window.addEventListener('orientationchange', checkOrientation)

function showRotatePrompt() {
  document.getElementById('rotate-prompt').style.display = 'flex'
}

function hideRotatePrompt() {
  document.getElementById('rotate-prompt').style.display = 'none'
}

7) Optimisation des performances

// Reduce resolution on low-end devices
function getDeviceScale() {
  const dpr = window.devicePixelRatio || 1
  const isLowEnd = navigator.hardwareConcurrency <= 2
  return isLowEnd ? Math.min(dpr, 1.5) : Math.min(dpr, 2)
}

// Throttle expensive operations
let lastHeavyUpdate = 0
function maybeDoHeavyWork(timestamp) {
  if (timestamp - lastHeavyUpdate > 100) { // 10 fps for heavy stuff
    doExpensiveCalculations()
    lastHeavyUpdate = timestamp
  }
}

// Use lower quality assets
function getAssetQuality() {
  const memory = navigator.deviceMemory || 4
  if (memory <= 2) return 'low'
  if (memory <= 4) return 'medium'
  return 'high'
}

8) Gestion de la batterie

// Check battery and reduce effects
async function checkBattery() {
  if ('getBattery' in navigator) {
    const battery = await navigator.getBattery()
    
    if (battery.level < 0.2 && !battery.charging) {
      enableBatterySaver()
    }
    
    battery.addEventListener('levelchange', () => {
      if (battery.level < 0.2 && !battery.charging) {
        enableBatterySaver()
      }
    })
  }
}

function enableBatterySaver() {
  game.particleCount = Math.floor(game.particleCount * 0.5)
  game.targetFps = 30
  console.log('Battery saver enabled')
}

9) API Fullscreen

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
    
    // Lock orientation
    if (screen.orientation?.lock) {
      await screen.orientation.lock('landscape')
    }
  } catch (err) {
    console.warn('Fullscreen failed:', err)
  }
}

// Call on user interaction
document.getElementById('play-btn').addEventListener('click', () => {
  requestFullscreen()
  startGame()
})

Une limite à connaître : l’API Fullscreen ne fonctionne pas pour les éléments génériques sur iPhone. Safari sur iOS ne propose le plein écran que pour les éléments vidéo natifs (via la méthode non standard webkitEnterFullscreen). Ainsi, documentElement.requestFullscreen() échouera sur iPhone. Le bloc try/catch ci-dessus gère ce cas proprement : concevez donc votre jeu pour qu’il reste jouable sans véritable plein écran sur iPhone et considérez le plein écran comme une amélioration sur iPad, Android et les ordinateurs où il est pris en charge. L’appel screen.orientation.lock() présente la même limitation sur iPhone ; ne rendez donc pas votre jeu dépendant de cette fonctionnalité.

10) Liste de contrôle pour les tests

Avant la publication :

• Réactivité tactile — Testez sur de vrais appareils, pas uniquement dans des émulateurs
• Différentes tailles d’écran — Téléphone, tablette, iPad Pro
• Les deux orientations — Ou verrouillez-en une
• Appareils d’entrée de gamme — Testez sur des téléphones âgés de 2 à 3 ans
• Réseaux lents — Testez avec une simulation 3G
• Safari sur iOS — Présente des particularités pour l’audio et le plein écran
• Chrome sur Android — Le navigateur le plus courant
• Interruptions — Appels téléphoniques, notifications
• Pression mémoire — Le jeu récupère-t-il correctement après le passage de l’onglet en arrière-plan ?

// Debug touch visualization
function drawTouchDebug(ctx) {
  for (const [id, touch] of touches) {
    ctx.beginPath()
    ctx.arc(touch.x, touch.y, 30, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
    ctx.fill()
    ctx.fillStyle = '#fff'
    ctx.fillText(id.toString(), touch.x, touch.y)
  }
}

Articles connexes

• Gestion des commandes de jeu
• Canvas de jeu responsive
• PWA pour les jeux hors ligne
• API Web Audio pour les jeux — gestion des restrictions audio d’iOS
• Publier un jeu web qui se charge rapidement — optimisation des temps de chargement sur les connexions mobiles
• Intégration de jeux par iframe — considérations propres à l’intégration sur mobile

Ressources externes

• MDN : événements tactiles — gestion du multitouch
• MDN : API Screen Orientation — verrouillage de l’orientation
• MDN : API Fullscreen — passage en plein écran sur mobile
• web.dev : design responsive — modèles responsives applicables aux interfaces de jeu