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 

Séances 5 et 6 : mode projet, on continue le jeu 

VIDEOS ENREGISTREES : 

• Séance 5 : https://youtu.be/ZP9FvQKzZ5k
• Séance 6 : https://youtu.be/Gu0jVbsSFYY

• Ennemi ou joueur qui suit la souris (et qui tire) : Regardez cet exemple http://miageprojet2.<wbr/>unice.fr/@api/deki/files/3051/<wbr/>=CharQuiTire.zip
   
  autre exemple simple : https://jsbin.com/jegamas/<wbr/>edit?js,output
  

   

  Le principe pour suivre le joueur c'est de calcule l'angle entre le joueur et l'ennemi :

  let dx = joueur.x - ennemi.x;

  let dy = joueur.y - ennemi.y;

   

  ennemi.angle = Math.atan2(dy/dx);       rappel, tan(angle) = côté opposé/côté adjacent, donc angle = arc tangeante (dy/dx), en JS, la fonction s'appelle Math.atan2

   

  Une fois que tu as l'angle, tu faire un ctx.rotate(angle) de l'ennemi (attention, si il est rectangulaire, ça tournera autours de son coin en haut à gauche,

  il faut "recentrer le point de rotation", regarde comment j'ai fait dans l'exemple du char...

  Puis tu vas déplacer les coordonnées x et y de l'ennemi pour qu'il avance vers le joueur :

   

  ennemi.x += ennemi.vitesse * Math.cos(ennemi.angle)

  ennemi.y += ennemi.vitesse * Math.sin(ennemi.angle)