Le développement de jeu et d’interactivité poussée sur le web est possible aujourd’hui notamment grâce aux nouveaux composants du HTML5.

En tant que langages (Html/CSS/JS) et technologie du web actuel, le HTML5 embarque en effet :

• le composant Canvas, gérant le dessin 2D (et 3D)
• l’interface de programmation 3D WebGL, gérant spécialement l’affichage 3D

Ces composant permettront de prendre en main les possibilités graphiques et interactives du HTML5 à un niveau particulièrement poussé.

Le déroulement d’un jeu en HTML5 se construit bien souvent sur l’exécution d’une fonction apellé à chaque frame (à l’execution de la méthode window.requestAnimationFrame prenant une fonction en callback).

C’est à partir de cette fonction que le canvas est mit à jour en redessinant à chaque frame les éléments graphiques (nécessitant d’efface à chaque fois le canvas).

Afin de faciliter cela, des framework existent :

• Canvas Engine (Obsolète)
  Une ancienne librairie (2013) tirant partie des premiers nouvelles opportunité du composant CANVAS
• Phaser 2 (2017) et Phaser 3 (2018)
  A priori une des librairie de développement de jeu vidéo HTML5 les plus développés et les mieux maintenus pour Canvas et WebGL
  https://phaser.io/
  Doc : https://photonstorm.github.io/phaser-ce/index.html
• Quintus
  http://www.html5quintus.com/
  Librairie de création de jeu orienté sur l’objet Canvas
• Superpowers
  Une application qui peut tourner en local (ou en ligne pour du travail collaboratif) et utilisant TypeScript pour créer des jeux 2D et 3D
  https://korben.info/creer-jeu-html5.html

ainsi que des librairies :

• three.js dédié à la 3D,
• limeJS,
• Crafty
• easelJS

 

 

Sources :

• https://www.developper-jeux-video.com/html5-tutorial-canvas/
• https://developer.mozilla.org/en-US/docs/Games/Introduction_to_HTML5_Game_Gevelopment_(summary)
• https://www.developper-jeux-video.com/initialiser-developpement-jeu-video/
• https://www.developper-jeux-video.com/javascript-html5-afficher-sprites/
• https://www.developper-jeux-video.com/javascript-html5-collisions-sprites/
• https://www.developper-jeux-video.com/html5-tutorial-son-audio/

1. https://www.developper-jeux-video.com/coder-jeu-video-pong-html5/
2. https://www.developper-jeux-video.com/coder-jeu-video-pong-html5-raquettes-balle/
3. https://www.developper-jeux-video.com/coder-jeu-video-pong-html5-animer-balle/
4. https://www.developper-jeux-video.com/coder-jeu-video-html5-animer-raquette/
5. https://www.developper-jeux-video.com/coder-jeu-video-html5-pong-controle-souris/
6. https://www.developper-jeux-video.com/coder-jeu-video-html5-pong-renvoi-balle/
7. https://www.developper-jeux-video.com/coder-jeu-video-html5-pong-ajout-son/
8. https://www.developper-jeux-video.com/coder-jeu-video-html5-pong-intelligence-artificielle/

Sources OBSOLETES :