Le HTML5 pour l’interactivité

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 :

ainsi que des librairies :

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

 

 

Sources :
  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 :

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s