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... Voir le repo GutHub COURS/ExempleProjetJS
TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :
- Vous inscrire au MOOC JavaScript Introduction,
- Regarder les exemples du module 2 (adding interactivity to web pages), sur les événements, le DOM, etc.
- Pour les non alternants : vous inscrire au concours games on Web 2024
Séance 2: préparation du TP, drag'n'drop, initiation au dessin et à l'animation à 60 images/seconde dans un canvas HTML etc.
Support de cours :
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.
Séance 3: animation dans un canvas, Programmation Orientée Objet en JavaScript
Supports de cours dans les MOOCs :
Utilisation d'un canvas HTML5
- Comprendre l'utilisation du canvas HTML5 : simple dessin
- Animation à 60 images secondes avec requestAnimationFrame
- Animer plusieurs objets,
- Déclencher des animations (et les arrêter) à des fréquences < 60 images/s,
- Avancé : gérer l'animation en fonction du temps,
- Animer un joueur et gérer les événements clavier,
- Gérer les événements souris,
- Détecter les collisions entre objets et obstacles,
- Utiliser des classes, faire un petit moteur de jeu
- Travailler avec des images ou avec des sprites.
Exemples vus en classe :
- Exemple basique JsBin en ligne montrant une animation dans un canvas, 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é en TP, sur lequel j'ai fait du live coding, 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.)
Vous n'êtes pas connecté. Connexion 