ESTIA MBDS 2022-2023

Introduction

Dans ce cours nous allons étudier le langage JavaScript et son interaction avec HTML et CSS. Nous développerons un petit jeu vidéo pour illustrer les capacités du langage. Vous verrez aussi comment utiliser un back-end léger, par exemple pour sauvegarder les hi-scores.

Séance 1 : premiers pas, créer un projet de jeu utilisant le canvas HTML5, introduction aux structures de base du langage: variables, fonctions, objets, etc.

VIDEO ENREGISTREE DE CETTE SEANCE : https://youtu.be/8P-m09iykL0

Support de cours : les MOOCS que j'ai écrits

• JavaScript Introduction (le principal que vous utiliserez)
• HTML5 Coding Essentials and Best Practices (surtout les chapitres 2 et 3 sur le dessin et l'animation dans un canvas HTML5)
• HTML5 Apps and Games (chapitre sur l'écriture de jeux HTML5 et aussi la partie "WebAudio" du chapitre 1.

Le reste ce sont des exemples en live coding que je ferai, et que je partagerai ici :

• Repository GitHub du cours : https://github.com/micbuffa/ESTIA2023.git 
• Petit exemple fait en cours (en ligne) et qui montre XXX:
• etc.

Séance 2 : introduction aux classes, objets prédéfinis, machines d'états, manipulation d'images 

VIDEO ENREGISTREE DE CETTE SEANCE : https://youtu.be/Gt7tsLlByBc  

On travaille surtout sur le repository github du projet. On a introduit les classes, l'héritage et le polymorphisme, on a ajouté une classe Sortie, et on a commencé à réfléchir à la structure des niveaux.

Séance 3 : gestion des assets (images, sons musiques)

VIDEO ENREGISTREE DE CETTE SEANCE : https://youtu.be/2k9fuxVGFqw 

Séance 4 : on continue le jeu, gestion de champs <input> et événements

VIDEO ENREGISTREE DE CETTE SEANCE : https://youtu.be/tpy1MZSMOA0 

Exemples faits en live coding en classe :  

• gestion des événements : https://jsbin.com/rojecep/edit?html,css,js,console,output 
• Un exemple avec des balles qui rebondissent sur les obstacles : https://jsbin.com/gacezog/edit?output