Introduction
Dans ce cours on va étudier les technologies Web front end (HTML5/CSS3/JS) en vue du concours de jeux vidéo 3D (utilisant la librairie babylonJS). On se focalisera donc dans un premier temps sur une introduction assez poussée à JavaScript et aux techniques d'interaction/animation.
Obligatoire : vous inscrire aux MOOCS suivants sur la plateforme edX :
Ces cours sont fait par le W3C (organisme qui fait les standards du Web), Michel Buffa est l'auteur de trois d'entre eux. Ils sont 100% gratuits à moins que vous ne vouliez afficher un certificat sur votre profil LinkedIn.
Séance 1 : quelques rappels HTML/CSS/JS, présentation d'outils de développement
On va faire des petits rappels HTML/CSS/JS aujourd'hui. Je ne sais pas encore à l'avance ce que l'on va faire exactement, mais l'objectif est de monter en compétence sur les technos Web de base (notamment JavaScript), sur l'utilisation de GIT, sur la manière dont on gère un projet open source quand on travaille à plusieurs. Nous allons commencer par des choses amusantes ayant trait aux graphiques et à l'animation.
Live coding fait en classe:
A FAIRE POUR LA PROCHAINE SEANCE:
- Vous inscrire aux quatre MOOCs (voir début de page)
- Vous inscrire sur github
- Regardez tout ce qui concerne la librairie graphique babylonJS : tutoriaux, visitez le baylonjs playground, etc.
- Contrôle continu (noté): suivre la semaines 3 du MOOC HTML5 coding essentials and best practices et répondre aux quizzes à la fin de la semaines 3 , vous serez noté sur les résultats. RETARD = 0 au CC !!!
- Vous me donnerez lors de la prochaine séance le mail que vous avez utilisé pour vous inscrire sur edx. Je pourrai voir vos résultats et ça fera une note de contrôle continu.
- A RENDRE (noté): un exemple sur jsbin.com qui
-
- A l'aide de rectangles, cercles, demi-cercles, polygones, dessine en 2D un ou deux chars d'assauts ou véhicules armés divers
- Si ils sont gros, augmentez la taille du canvas
- Ils seront codés à l'aide de classe JavaScript et chaque char sera une instance, comme dans le dernier exemple de live coding que nous avons fait
- Des propriétés seront utilisées pour la position x, y, optionnellement l'angle, la couleur, la vitesse min, max, la taille, etc.
- Ils ne pourront pas sortir de l'écran (tests de collisions avec les murs
- Ils se déplaceront aléatoirement ou selon des trajectoires prédéfinies (bonus si ça a l'air réaliste)
- Optionnel : ils pourront tirer à des instants aléatoires, les tirs partiront dans leur direction
- Optionnel : vous avez le droit de rajouter un fond d'écran, d'autres choses, etc. si vous êtes bons, ou avez déjà des connaissances en JS, impressionnez-moi!
- Ajoutez ce que vous voulez en plus (mais fait par vous ou du moins, que vous comprenez bien)
- Vous poserez le HTML/CSS/JS sur jsbin.com et me rendrez l'URL jsbin.com par mail.
Vous n'êtes pas connecté. Connexion 