Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 08:39, 31 Jan 2023 par MichelBuffa
0

L3 Miage 2022-2023 Introduction à JavaScript et aux API W3C standards

De $1

Version de 20:57, 28 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Séance 1 : introduction à JavaScript, rappels, outils, Moocs de référence
    1. 1.1. Supports de cours
    2. 1.2. TP1 - Ecriture d'un jeu de type Mach3 à l'aide du DOM
    3. 1.3. TP2 : On continue le TP1 !
  2. 2. Séance 2 : rappels JavaScript, encore du live coding, dessin et animation dans un canvas
      1. 2.1.1. Utilisation d'un canvas HTML5
      2. 2.1.2. Comprendre l'utilisation du canvas HTML5 : simple dessin : 
      3. 2.1.3. Exemples vus en classe :
    2. 2.2. TP3 : jeu du TP1 et TP2 mais cette fois-ci dans un canvas HTML5, en utilisant les techniques d'animation à 60 images par seconde
  3. 3. Séance 3 : on termine ce qui a été abordé lors de la séance 2, evénements, détection de collisions, gestion sons et images
  4. 4. Séance 4 : persistence côté client (LocalStorage), requêtes Ajax, Introduction à NodeJS et aux Web Services
    1. 4.1. Persistence simple côté client (ex: sauvegarder les scores dans un espace propre à votre jeu, côté navigateur)
    2. 4.2. Requêtes Ajax GET, promesses, async/await
    3. 4.3. Utilisation de Web Services avec pour le CRUD (requêtes HTTP POST/PUT/DELETE avec fetch)

Séance 1 : introduction à JavaScript, rappels, outils, Moocs de référence

Supports de cours

Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements...

TP1 - Ecriture d'un jeu de type Mach3 à l'aide du DOM

  • Sujet du TP : dans cette première version on va commencer à coder un jeu à la Candy Crush / Mach 3, en utilisant des divs pour représenter la grille et les cases. On utilisera l'API standard du DOM pour la gestion des événements et pour implémenter le drag'n'drop.

TP2 : On continue le TP1 !

Le TP1 étant assez long, vous le continuerez dans cette séance.

Séance 2 : rappels JavaScript, encore du live coding, dessin et animation dans un canvas

A FAIRE : vous inscrire aux MOOCS : (celui sur JavaScript, et les deux ci-dessous sur HTML5). Les non alternants : vous inscrire au concours de jeu.

On va principalement faire du live coding. Les exemples vus en cours seront soit ici si disponibles en ligne, soit dans le repository github du projet.

Supports de cours dans les MOOCs (pour le dessin et l'animation dans canvas) :

Utilisation d'un canvas HTML5

Code du cours : https://jsbin.com/vekafeh/edit?js,console,output 

  1. Comprendre l'utilisation du canvas HTML5 : simple dessin : 

  2. Animation à 60 images secondes avec requestAnimationFrame : https://jsbin.com/vekafeh/edit?js,output 
  3. Animer plusieurs objets,
  4. Déclencher des animations (et les arrêter) à des fréquences < 60 images/s,
  5. Non vu en cours (on y reviendra) Avancé : gérer l'animation en fonction du temps,
  6. Animer un joueur et gérer les événements clavier,
  7. Non vu en cours : Gérer les événements souris,
  8. Non vu en cours : Détecter les collisions entre objets et obstacles,
  9. Utiliser des classes, faire un petit moteur de jeu
  10. Travailler avec des images ou avec des sprites.

Exemples vus en classe :

  • Exemple simple de dessin et d'animation dans un canvas : XXX
    • le chargement et le dessin d'une image, la gestion de la souris, comment récupérer sa position exacte avec getBoundingRect(), etc. Pour aller plus loin, voir les chapitres 2 et 3 du MOOC "HTML5 coding essentials and best practices",
    • Pour le chargement multiple d'images et de sons, le programme proposé dans le TP3 (à venir) propose un "asset loader" utilisant la librairie HowlerJS pour la gestion des sons et musiques. Vous trouverez l'exemple fait en live coding dans le repository github du cours, dans TP3/TP3_faitEnCours 
       

Exemples dont j'ai parlé en TP :

  • Exemple simple d'animation et contrôle pour qu'un objet suive la souris : https://jsbin.com/jegamas/edit?js,output
     
  • Petite évolution de l'exemple précédent : https://jsbin.com/voyowo/3/edit?js,output (montre un "monstre rectangulaire qui suit la souris. Animation à 60im/s avec request animation frame et "animation secondaire" à l'aide de setInterval pour qu'il change de couleur toutes les n secondes. Je montre aussi dans cet exemple comment on peut mesurer précisément le temps dans la boucle d'animation.
     
  • Ici exemple de tests de collision, gestion du déplacement d'un objet, affichage d'obstacles : https://jsbin.com/gacezog/edit?output
     
  • Ici un exemple de char qui tire (souris + barre espace et bouton 1 souris) :Projet zip avec un char qui tire et suit la souris. Dezipper, ouvrir le folder avec Visual Studio Code, ouvrir le fichier index.html et le lancer avec click droit/Open With Live Server (si vous n'avez pas cette option, installez l'extension VSCode "Live Server"). C'est un bon exemple de squelette de jeu minimal pour faire un jeu de chars. Montre les classes, les événements, le dessin et l'animation dans un canvas HTML5. Pour approfondir les fonctions de dessins dans le canvas, voir les chapitres 3 et 4 du MOOC HTML5 Coding Essentials and best practices.

Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)

TP3 : jeu du TP1 et TP2 mais cette fois-ci dans un canvas HTML5, en utilisant les techniques d'animation à 60 images par seconde

Séance 3 : on termine ce qui a été abordé lors de la séance 2, evénements, détection de collisions, gestion sons et images

On va compléter l'exemple vu en cours : https://jsbin.com/vekafeh/edit?js,output et on le transformera en projet composé de multiples fichiers, on le rajoutera dans le github du cours. Cela montrera aussi comment organiser son code.

Notamment, on ajoutera :

  1. Déclencher des animations (et les arrêter) à des fréquences < 60 images/s avec setInterval

  2. Gérer l'animation en fonction du temps, voir Mooc "HTML5 Apps and Games", chapitre 2.4 
  3. Gérer les événements souris, voir MOOC "JavaScript Introduction" chapitre 2.4.8 
  4. Détecter les collisions entre objets et obstacles, voir MOOC "HTML5 Apps and Games"', chapitre 2.5 et voir exemple jsbin fait en classe en live coding.
  5. Travailler avec des images ou avec des sprites, voir "MOOC HTML5 Apps and Games", chapitre 2.6 

On reviendra aussi sur ce qui a été vu en TP : comment débugguer, les interfaces classlist et dataset de HTML5, etc.

Séance 4 : persistence côté client (LocalStorage), requêtes Ajax, Introduction à NodeJS et aux Web Services

Persistence simple côté client (ex: sauvegarder les scores dans un espace propre à votre jeu, côté navigateur)

Requêtes Ajax GET, promesses, async/await

  • Premiers exemple de requêtes GET sur des Web Services existants (on utilise pour ces premiers exemples le site https://jsonplaceholder.typicode.com/ 

    • Attention: pour les requêtes GET ce site est très bien, pour comprendre les bonnes pratiques de nommage des Web Services, il est très bien, mais pour les reqêtes HTTP POST, PUT et DELETE il s'appuie sur un format de données un peu ancien. On aura tendance à utiliser une autre méthode à base d'objets JavaScript FormData (qui sont aussi associés aux formulaires dits "multipart" qui sont la manière la plus moderne d'envoyer des données)
       
  • Exemple simple de récupération de données JSON sur un Web service à l'aide de l'API fetch : https://jsbin.com/neworos/edit?js,console 
  • Avec affichage dans une table HTML (utilisation du DOM et de l'API des tables HTM5) : https://codepen.io/w3devcampus/pen/BaxGMVP
  • Autre exemple avec une API un peu plus compliquée (et on voit en live coding comment débugguer le format des données) : https://codepen.io/w3devcampus/pen/jOxQRGG 
  • Exemple de récupération de fichiers binaires audio (conversion de la réponse en ArrayBuffer) : https://codepen.io/w3devcampus/pen/YzLRBRr 
  • Exemple d'envoi de plusieurs requêtes en parallèle avec Promise.all et fetch : https://codepen.io/w3devcampus/pen/gOzQyKw 

 Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await 

Utilisation de Web Services avec pour le CRUD (requêtes HTTP POST/PUT/DELETE avec fetch)

 
Powered by MindTouch Deki Open Source Edition v.8.08