Interro Javascript : Floppy Bird
Réponse AJAX
Attention : faites vos tests sous Google Chrome uniquement. Le jeu n'a pas encore été adapté pour Firefox ni IE.

Recommandations...

Récupération du code source initial

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 :

Au chargement de la page : initialisation d'une nouvelle partie.

// TODO_1

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 la page a fini de se charger, appelez la fonction reset_and_start_game().

Votre réponse n°1

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.

Premier appel à la 'boucle' du jeu

// TODO_2

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().

Votre réponse n°2

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.

Répéter la 'boucle' du jeu pour activer la dynamique de l'oiseau et du jeu

// TODO_3

La fonction game() gère toute la dynamique du jeu : mouvements de l'oiseau et des colonnes, collisions, etc.

La fonction game() doit s'autoplanifier toutes les 30 millisecondes.

Votre réponse n°3

Quand ça marche, votre oiseau doit s'écraser au sol comme une fiente.

Cette étape est importante avant de passer à la suite.

Faire voler l'oiseau avec la touche "espace"

// TODO_4

(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

Votre réponse n°4

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.

Changer l'orientation de l'oiseau

// TODO_5

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).

Votre réponse n°5

Cette étape n'est pas indispensable pour la suite.

Planifier l'apparition des colonnes

// TODO_6

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.

Votre réponse n°6

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.

Glissement des colonnes vers l'oiseau

// TODO_7

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.

Votre réponse n°7

Quand ça marche, les colonnes doivent glisser vers vous.

Cette étape n'est pas indispensable pour la suite.

Améliorer l'esthétique des colonnes

// 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 :

  • background-image:linear-gradient,
  • border-radius,
  • border.
  • Collez ici le code CSS des colonnes :

    Votre réponse n°8

    Cette étape n'est pas indispensable pour la suite.

    (question annulée, ne compte pas)

    // TODO_9

    Votre réponse n°9

    Collisions : remplacer l'image de l'oiseau par un oiseau en sang

    // TODO_10

    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

    Votre réponse n°10

    Cette étape n'est pas indispensable pour la suite.

    Affichage des messages de collision

    // TODO_11

    La fonction mettre_oiseau_en_sang reçoit en paramètre un message.

    Afficher ce message dans la balise <div id=messages>

    (la balise rouge en haut à droite de l'écran)
    Votre réponse n°11

    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.

    Recommencer une partie ou retourner travailler ?

    // TODO_12

    Lorsqu'on termine la partie, le jeu propose un lien hypertexte "Retourner travailler" pour vous rediriger vers http://www.bts-sio.com.

    Ajoutez un message de confirmation en Javascript : si l'utilisateur clique sur OK, alors il retourne bien sur le site des cours. Mais s'il clique sur Annuler, on relance une nouvelle partie en appelant la fonction reset_and_start_game().

    Votre réponse n°12