Récupérez le code source initial ici, puis collez-le dans un éditeur de texte brut genre Notepad++.
Exécutez la page dans le navigateur (inutile de passer par Apache : il n'y a pas de PHP). Si tout va bien, vous devriez obtenir le superbe résultat suivant :
La fonction reset_and_start_game() initialise une nouvelle partie. Il faut l'appeler dès que la page a fini de se charger.
Quand ça marche, vous devez voir apparaître l'arrière-plan, ainsi que la fenêtre noire de vie et de score.
Cette étape est indispensable avant de passer à la suite.
La fonction reset_and_start_game() initialise une nouvelle partie. Elle doit se terminer par un appel à la fonction game(), qui gère la dynamique du jeu et s'auto-planifie pour maintenir les animations.
À la fin de la fonction reset_and_start_game(), ajoutez un appel à la fonction game().
Quand ça marche, vous voyez votre oiseau apparaître et battre des ailes. Ce n'est qu'une animation GIF et n'a rien à voir avec la dynamique du jeu, qu'on va activer à l'étape suivante.
Cette étape est indispensable avant de passer à la suite.
La fonction game() gère toute la dynamique du jeu : mouvements de l'oiseau et des colonnes, collisions, etc.
Quand ça marche, votre oiseau doit s'écraser au sol comme une fiente.
Cette étape est importante avant de passer à la suite.
(ou n'importe quelle touche en fait)
Lorsqu'on appuie sur une touche, l'oiseau va recevoir une poussée vers le haut pour ne pas s'écraser au sol comme une fiente.
Créez un événement onkeyup sur l'objet document. Dans la fonction liée à cet événement, on donne une poussée à l'oiseau grâce à :
oiseau_vitesse_y = - oiseau_puissance_de_la_poussee_vers_le_haut
Quand ça marche, vous pouvez sauver l'oiseau du crash en appuyant sur les touches du clavier.
Cette étape n'est pas indispensable pour la suite.
Notre oiseau va lever la tête quand il monte, et piquer du nez quand il descend.
Changez la valeur de la propriété style.transform de l'oiseau (img id=oiseau) pour rotate (45deg), où 45 ne doit pas être une constante mais est le contenu de la variable oiseau_vitesse_y.
Par exemple, si oiseau_vitesse_y=10, alors la propriété style.transform vaudra rotate (10deg).
Cette étape n'est pas indispensable pour la suite.
La fonction faire_apparaitre_une_nouvelle_colonne() fait apparaître les nouvelles colonnes à droite de l'écran.
Planifiez la fonction faire_apparaitre_une_nouvelle_colonne() pour qu'elle s'exécute toutes les 1800 millisecondes.
Quand ça marche, vous verrez des colonnes blanches apparaître à droite de la fenêtre, mais elles ne glissent pas encore vers vous (c'est l'étape suivante).
Cette étape n'est pas indispensable pour la suite.
Les colonnes ne vous viennent pas dans le bec ? Le TODO_7 doit parcourir toutes les balises de classe "colonne"
On ne va pas utiliser getElementsByTagName (dans ce cas on récupérerait des <div> qui ne sont pas des colonnes, ça ne nous intéresse pas).
On va donc récupérer les colonnes grâce à getElementsByClassName('colonne').
Parcourez toutes les colonnes grâce à une boucle for. Les colonnes doivent être dans le tableau tab_colonnes et le compteur doit être iColonne.
Quand ça marche, les colonnes doivent glisser vers vous.
Cette étape n'est pas indispensable pour la suite.
| // TODO_8
Les colonnes sont très moches, essayez d'améliorer leur esthétique avec un peu de CSS. Ici j'ai utilisé les propriétés : |
Cette étape n'est pas indispensable pour la suite.
Au moment des collisions de l'oiseau contre le plafond, le sol ou les colonnes, on change l'image pour bien marquer la collision.
Remplacer le src de l'image de l'oiseau (id=oiseau) par http://www.bts-sio.com/divers/flappy-bird/canard_en_sang.png
Cette étape n'est pas indispensable pour la suite.
La fonction mettre_oiseau_en_sang reçoit en paramètre un message.
Afficher ce message dans la balise <div id=messages>
Lorsque cela marche, vous devez voir des messages s'afficher lors des collisions, par exemple : "Vous avez mangé la poussière".
Cette étape n'est pas indispensable pour la suite.
Lorsqu'on termine la partie, le jeu propose un lien hypertexte "Retourner travailler" pour vous rediriger vers http://www.bts-sio.com.