Web Sciences 2016-2017, Master 1 IFI

De $1

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 :

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

Un jeu que j'aimerais bien que vous refassiezhttp://cachacachacom.appspot.com/Blo...AZU/index.html mélange de casse-brique et de shoot (avec les bullets)

Comment charger images, sons, ressources diverses (on appelle cela des "assets") avant de démarrer le jeu:

  • En Ajax avec des requêtes XhR2: voir assets.js et la fin du fichier game.js de ce jeu développé à partir des modules du Mooc HTML5 part 2: gameForMooc.zip

  • Vous pouvez aussi préférer la syntaxe plus moderne de l'API fetch (tourne dans les browsers récents) qui utilisent les promesses de ES2015/ES2016. Ici un exemple qui charge deux sons et les décode avant de les utiliser: http://jsbin.com/bituzu/edit?html,js (cet exemple utilise aussi un polyfill pour que ça marche dans les anciens browsers).

Quelques ressources pour faire un shoot'em'up old school. Note : ceux qui font un shoot "bullet hell" ne devront pas sync les balles mais juste les parties avec éventuellement des interactions entre joueurs envoi de malus, inversement des touches, à vous de voir... Pour des jeux plus "simples", on peut imaginer un vrai jeu synchrone (à la doodle jump, cassebrique, etc.)

CONCOURS W3C JEU / AUDIO VISUALISATION / CSS ICIhttps://www.w3.org/2017/WWW26/contests.html 

A FAIRE POUR LA PROCHAINE SEANCE (noté, pas de retard accepté, je ramasse en classe):

  1. Avoir un petit proto de jeu qui peut se jouer à plusieurs
    • Si vous êtes pas forts ou perdu ou pas assez de temps : suivre le MOOC jq la fin de la partie "html5 games", et avoir un petit jeu avec un truc que vous bougez au clavier et à la souris, et quelques obstacles/ennemis qui bougent et des collisions.
      Ex: raquette et balles, vaisseau et aliens, bonhomme et obstacles, etc.
       
    • Ensuite vous mettez votre petit jeu en mode 2 joueurs locaux avec touches sur le même clavier. Il faudra avoir non pas une variable qui correspond au joueur mais un tableau de joueurs.
       
    • Ensuite vous mettez votre jeu dans le TP du chat. Là on doit avoir le chat qui marche et votre jeu qui marche, sans synchronisation.
       
    • Ensuite vous essayez de syncrhoniser la position des joueurs (cf les rectangles verts), on peut échanger directement les positions comme dans le TP websockets (sendPos, updatePos).
       
    • Vous pouvez réfléchir à syncrhoniser la création des obstacles/niveaux/ennemis pour que sur chaque écran on ait l'impression que le même jeu se déroule.