1 / 10

Programmation d’un jeu en utilisant canvas - Fastclick

420-B63 Programmation Web Avancée Auteur : Frédéric Thériault. Programmation d’un jeu en utilisant canvas - Fastclick. Wassup. But du jeu…. Cliquer le plus de fois possible l’oiseau en moins de 10 secondes. Fonctionnement du jeu.

aletha
Download Presentation

Programmation d’un jeu en utilisant canvas - Fastclick

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 d’un jeu en utilisant canvas - Fastclick

  2. Wassup

  3. But du jeu… • Cliquer le plus de fois possible l’oiseau en moins de 10 secondes

  4. Fonctionnement du jeu • Lorsque la page Web est chargée, le jeu invite l’utilisateur à jouer. Pour commencer la partie, celui-ci doit cliquer sur l’oiseau

  5. Fonctionnement du jeu (suite) • L’oiseau apparaît à un endroit aléatoire dans le canvas • Lorsque l’usager clique sur l’oiseau (événement onclick), alors celui-ci disparait et apparaît de nouveau à un autre endroit. • La partie se termine après 10 secondes

  6. Fonctionnement du jeu (suite) • Lorsque les 10 secondes sont écoulées, la partie se termine et on arrive à l’écran de fin.

  7. Fonctionnement du jeu (suite) • Lorsque la partie est terminée et que l’écran de fin est affichée, l’usager peut recommencer la partie en cliquant sur l’oiseau • Notes: • Dans l’écran de jeu, il y a 2 informations affichées: • Le nombre de secondes restantes au jeu • Le nombre de cliques fait par l’usager

  8. Version améliorée • Lorsquevotrejeuestterminé, faire une version oùl’oiseaubougedansl’écran. • Utilisez la méthodevue en classe (tick/update/worldStep)

  9. Conseils pour biendébuter • Vousdevriez commencer par faire unefonction “tick()”, qui estappelé à chaque 30 msec. • Créez 3 objets JavaScript “SceneSplash”, “SceneGame”, “SceneGameOver” qui possèdentleurfonction “update()”. • La fonctionprincipale “tick()” fait 2 choses: 1 - Fait un clearRect du canvas 2- Appel le update d’une scène, dépendemmentsi on estdans le splash, le jeuou le game over.

  10. Thème #2 – pour ceux qui n’aiment pas les oiseaux • Vous avez aussi les images pour faire le jeu avec cet aspect visuel :

More Related