420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.

Présentation au sujet: "420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1."— Transcription de la présentation:

1 420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1

2 Spaceball 2

3 Description Ce laboratoire consiste à mettre en pratique la programmation objet en JavaScript ainsi que la balise Canvas. Notez que Canvas nest actuellement pas supporté par Internet Explorer Ce laboratoire est expliqué étape par étape, il est fortement (mais pas obligatoirement) conseillé de les suivre. 3

4 But du jeu Aller le plus loin possible avec la balle sans quelle ne tombe entre les blocs Les commandes : A = Aller vers la gauche D = Aller vers la droite Barre despace = Sauter (faire bondir la balle) La logique est telle que lorsque la balle nest pas en collision avec un bloc, sa vélocité verticale (y) augmente de 0.4 à chaque frame/boucle/temps de jeu. 4

5 Étape 0 - Compréhension de Algorithme Initialisation du monde (ex: function initialiserMonde() {...} ) Création de lobjet balle Création des blocs Chargement en mémoire de limage de fond Quand limage est chargée, alors débuter le jeu Fonction principale du jeu Dessiner limage de fond Pour chaque bloc Dessiner Faire le déplacement de la balle Vérifier pour les collisions avec la balle Si sa position Y est trop grande, alors la balle est tombée / Fin de la partie 5

6 Étape 0 - Compréhension de Algorithme (suite) Si ce nest pas la fin de la partie afficher la balle Rappeler la fonction principale du jeu (dans 30ms) 6

7 Étape 1 – Fonctions de base La première étape consiste à faire une balise Canvas Une fonction JavaScript : initWorld() ou initialiserMonde() Cette fonction place le contexte du Canvas comme variable globale Faire la fonction worldStep() qui est rappelé à chaque 30ms 7

8 Étape 2 – Image de fond Ajouter la logique permettant de dessiner limage de fond au jeu (space.jpg) Cette logique doit être la première étape de la méthode principale du jeu (worldStep) 8

9 Étape 3 – Les blocs La troisième étape : Créer la classe Bloc Propriétés : posX,posY, grosseur (40px) Méthodes step()// sa couleur rgba(0, 0, 200, 0.4) verifierCollision(x, y) Après avoir créé la classe, fiare une série de blocs et les conserver dans un tableau La création devrait avoir lieu dans la méthode initWorld() À ce point-ci, il est possible de faire une logique permettant de faire des espaces vides entre les blocs 9

10 Étape 4 – Création de lobjet Balle La quatrième étape : Créer la classe Balle Propriétés: posX, posY, estTombé (booléen) velociteX, velociteY Méthodes: Step : Cette méthode permet de : -dessiner la balle -Vérifier les collisions (à faire à la fin) ajouterForceX, ajouterForceY -Permet de modifier la vélocité (x et y) Sauter -Si la vélocité y est à 0, alors on la met à -15 10

11 Étape 4 - suite La vélocité est une force de déplacement dans une direction. À chaque itération du jeu (worldStep), on modifie la position de la balle selon sa vélocité: posX = posX + velocityX posY = posY + velocityY Les contrôles (A,D,Espace) ne modifient donc pas directement la position de la balle, mais plutôt sa vélocité. Si saute, velocityY = -15; (par exemple) 11

12 Étape 5 – Ajouter les contrôles de la balle Voici une logique de base pour le contrôle de la balle. Ceci permet de gérer les événements au clavier document.onkeydown = keydown; document.onkeyup = keyup; var leftPushed = false; var rightPushed = false; function getKeyCode(e) { if (navigator.appName == "Microsoft Internet Explorer") { return event.keyCode; // not a typo. } return e.which; } 12

13 Étape 5 - Suite function keydown(e) { var unicode = getKeyCode(e); if (unicode == 65 || unicode == 97) { leftPushed = true; } else if (unicode == 68 || unicode == 100) { rightPushed = true; } else if (unicode == 32) { // ball.jump(); - à lier avec la balle, selon votre nom de variable/fonction } function keyup(e) { var unicode = getKeyCode(e); if (unicode == 65 || unicode == 97) { leftPushed = false; } else if (unicode == 68 || unicode == 100) { rightPushed = false; } 13

14 Étape 6 – Faire lalgorithme de collision Pour chaque bloc, on verifie sil y a collision avec x, y (qui est le posX et posY de la balle). Si aucune collision, on ajoute à la vélocitéY: 0.4 Sil y a un collision, on inverse la vélocité divisé par 2 14

15 Étape 7 et + Les étapes précédentes permettent de donner une base pour le développement du jeu. Ces étapes sont cependant incomplètes pour donner une version pareille à la version de lenseignant Le but du laboratoire est cependant atteint : La programmation objet en JavaScript La balise Canvas 15