Web Sciences 2016-2017, Master 1 IFI

Introduction

Cette année nous allons étudier les techniques de création d'un jeu vidéo multijoueurs, dans le style retro-gaming. Au travers de ce long TP fil rouge, vous apprendrez le langage JavaScript, les techniques d'animation, detection de collision, animations à base de sprites (images animés), les effets de particules, la gestion des événements (clavier, souris, gamepad), comment faire des sons/musiques pour un jeu, avec les contraintes spécifiques qui vont avec, et vous apprendrez à structurer du code JavaScript, à maitriser les aspects asynchrones du langage (la partie la plus complexe), à faire de l'objet en JavaScript, etc.

Séance 1: comprendre les bases de JavaScript, du dessin, de l'animation, gestion des événements, écriture du squelette d'un moteur de jeu en utilisant une conception "Black Box"

Préliminaires :

• s'inscrire à deux MOOCs : HTML5 (part 1 et part 2) sur le site W3Cx 
• Les chapitres pertinents sont les Weeks 3 et 4 de premier MOOC (Canvas API), et Weeks 2 du second MOOC (game programming with HTML5), on utilisera aussi la fin de la Week 1 sur WebAudio plus tard.

Premier exemple fait en cours :

• Ici sur jsbin : http://jsbin.com/dujowo/edit?html,cs...console,output
• Ici en zip et fichiers : WebSciences2017.zip 

 Séance 2: aspects multijoueur en réseau, WebSockets

• Support de cours : transparents ici 
• TP sur les WebSockets version simple (chat multi participants mais sans salles virtuelle, montre aussi comment syncrhoniser des positions dans un jeu).
  • Autre version du TP, avec jQuery et chat multiroom. 

Quelques ressources pour faire un shoot'em'up old school:

• La librairie Bullet ML version JS, exemples dans le github et y'a aussi un tutorial. Vous avez aussi plein de patterns toutes faites en XML dans la page de Kenta Cho (auteur de nombreux shmups et de bulletML).
• Cherchez aussi le shmup tmshooter qui l'utilise pour voir ce qu'elle a dans le ventre.
• Ici plein de shoots en JS 
• http://jlongster.com/Making-Sprite-b...es-with-Canvas
• http://jp.wgld.org/jsstg/
• http://jp.wgld.org/jsstg/2015f/
•