1 / 15

Programmation du jeu SPACEBALL ( oo + canvas)

420-B63 Programmation Web Avancée Auteur : Frédéric Thériault. Programmation du jeu SPACEBALL ( oo + canvas). Spaceball. Description. Ce laboratoire consiste à mettre en pratique la programmation objet en JavaScript ainsi que la balise Canvas .

calida
Télécharger la présentation

Programmation du jeu SPACEBALL ( oo + canvas)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 420-B63 Programmation Web Avancée Auteur : Frédéric Thériault Programmation du jeu SPACEBALL (oo + canvas)

  2. Spaceball

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

  4. But du jeu • Aller le plus loin possible avec la balle sans qu’elle ne tombe entre les blocs • Les commandes : • A = Allervers la gauche • D = Allervers la droite • Barred’espace = Sauter (faire bondir la balle) • La logiqueesttellequelorsque la ballen’est pas en collision avec un bloc, savélocitéverticale (y) augmente de 0.4 à chaque frame/boucle/temps de jeu.

  5. Étape 0 - Compréhension de Algorithme Initialisation du monde (ex: function initialiserMonde() {...} ) Création de l’objetballe Création des blocs Chargement en mémoire de l’image de fond Quandl’imageestchargée, alorsdébuter le jeu Fonctionprincipaledujeu Dessinerl’image de fond Pour chaque bloc Dessiner Faire le déplacement de la balle Vérifier pour les collisions avec la balle Sisa position Y est trop grande, alors la balleesttombée / Fin de la partie

  6. Étape 0 - Compréhension de Algorithme (suite) Sicen’est pas la fin de la partie afficher la balle Rappeler la fonctionprincipaledujeu (dans 30ms)

  7. Étape 1 – Fonctions de base • La première étapeconsiste • à faire unebalise Canvas • Unefonction JavaScript : initWorld() ouinitialiserMonde() • Cettefonction place le contexte du Canvas comme variable globale • Faire la fonctionworldStep() qui estrappelé à chaque 30ms

  8. Étape 2 – Image de fond • Ajouter la logique permettant de dessiner l’image de fond au jeu (space.jpg) • Cettelogiquedoitêtre la première étape de la méthodeprincipaledujeu (worldStep)

  9. Étape 3 – Les blocs • La troisièmeétape : • Créer la classe Bloc • Propriétés : • posX,posY, grosseur (40px) • Méthodes • step() // sacouleurrgba(0, 0, 200, 0.4) • verifierCollision(x, y) • Après avoircréé la classe, fiareunesérie de blocs et les conserver dans un tableau • La créationdevraitavoir lieu dans la méthodeinitWorld() • À ce point-ci, ilest possible de faire unelogiquepermettant de faire des espacesvides entre les blocs

  10. Étape 4 – Création de l’objet Balle • La quatrièmeétape : • Créer la classe “Balle” • Propriétés: • posX, posY, estTombé (booléen) • velociteX, velociteY • Méthodes: • Step : Cetteméthodepermet 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

  11. Étape 4 - suite • La vélocitéestune force de déplacementdansune direction. • À chaqueitérationdujeu (worldStep), on modifie la position de la balleselonsavélocité: posX = posX + velocityX posY = posY + velocityY • Les contrôles (A,D,Espace) nemodifientdonc pas directement la position de la balle, maisplutôtsavélocité. • Sisaute, • velocityY = -15; (par exemple)

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

  13. Étape 5 - Suite functionkeydown(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 } } functionkeyup(e) { var unicode = getKeyCode(e); if (unicode == 65 || unicode == 97) { leftPushed = false; } else if (unicode == 68 || unicode == 100) { rightPushed = false; } }

  14. Étape 6 – Faire l’algorithme de collision • Pour chaque bloc, on verifies’il 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 • S’il y a un collision, on inverse la vélocitédivisé par 2

  15. Étape 7 et + • Les étapesprécédentespermettent de donnerune base pour le développementdujeu. • Cesétapessontcependantincomplètes pour donnerune version pareille à la version de l’enseignant • Le but dulaboratoireestcependantatteint : • La programmationobjet en JavaScript • La balise Canvas

More Related