Heiphaistos TutorialsHeiphaistosTutorials
🪟Windows🖥️CMD / PowerShell💬Discord🍎macOS🔐Sécurité🐧Linux🌐Réseau💻Programmation🤖Android📦Applications🔥Applications Heiphaistos📦Logiciels📦HeiApps

⚒ Heiphaistos Tutorials

Forge ton savoir informatique.
Tutoriels clairs, sans blabla.

Navigation

  • Accueil
  • Tous les tutoriels
  • Windows
  • Discord

Ressources

  • Flux RSS
  • heiphaistos.org

© 2026 Heiphaistos Tutorials — tuto.heiphaistos.org

Mentions légalesConfidentialitéCGU

Forge ton savoir.

Accueil/Programmation/JavaScript : coder un mini-jeu dans le navigateur (canvas)
💻ProgrammationVidéo

JavaScript : coder un mini-jeu dans le navigateur (canvas)

Créer un petit jeu en JavaScript avec l'élément canvas : boucle de jeu avec requestAnimationFrame, dessin, déplacement au clavier, collision et score.

9 octobre 20261 min de lecture
#programmation#javascript#canvas#jeu
Votre navigateur ne supporte pas la lecture vidéo.
VitesseSous-titres : bouton CC du lecteur

Sommaire

  • La page
  • La boucle de jeu
  • Améliorer

La page

<canvas width="400" height="400"></canvas>
<script src="jeu.js"></script>

La boucle de jeu

function boucle() {
  mettreAJour();       // positions, collisions, score
  ctx.clearRect(0, 0, 400, 400);
  dessiner();
  requestAnimationFrame(boucle);
}
boucle();

Améliorer

  • Vitesse indépendante de l'écran : utiliser le temps écoulé (paramètre de requestAnimationFrame).
  • Images : ctx.drawImage() ; sons : new Audio().
  • Meilleur score : localStorage.
  • Moteurs de jeu : Phaser, Kaboom.

Bases : événements.

Commentaires

Aucun commentaire pour l'instant. Soyez le premier !

Laisser un commentaire

En envoyant un commentaire, vous acceptez les conditions d'utilisation et la publication de votre pseudo après modération (voir la politique de confidentialité).