Accueil > Intranet Michel Buffa > ESTIA MBDS 2022-2023

ESTIA MBDS 2022-2023

De $1

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

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

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 :  

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

VIDEOS ENREGISTREES : 

  • 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)
     
     
Mots clés:
 
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.