Intégrer le jeu dans l'application (optionnel, même pour les plus avancés)

Pour les participants qui souhaiteraient finir l'application en intégrant le jeu.

• liste des scores après authentification (ficher vue_liste.php) : changer le bouton Créer en Jouer

• Formulaire de création de score (fichier vue_edition.php) :le code du formulaire est remplacé par la structure HTML du jeu (trois div suivants) ainsi qu'une balise input cachée :

$corps = <<<EOT
        <div id="accueil">
        <div id="titre"></div>
        <div id="image"><img src='$image'></div>
        <div id="texte"></div>
        <div id="boutonJeu"></div>   
        </div>
        <div id="jeu">
        <div id="consigne"></div>   
        <div id="animation"></div>   
        <div id="boutonQuitter"></div>       
        </div>
        <div id="bilan">
        <div id="recap"></div>   
        <div id="boutonAccueil"></div>       
        <div id="boutonRejouer"></div>           
        </div>
        <input type='hidden' id='action' value='$action'/>
EOT;
       

• télécharger, décompresser le dossier "projet" et le copier dans public
• nota : pour tester le jeu de façon autonome, ouvrir le fichier index.html dans un navigateur
• nota : le code qui permet l'exécution du jeu est du code JavaScript fichier js/code.js ; lorsque l'écran de fin de jeu s'affiche (fonction afficheBilan()) il y a un appel Ajax à l'URL http://localhost/mooc_ad/s0/fil_rouge/public/score/'+action

(la valeur de action étant préalablement récupérée depuis le champ input : var action = $('#action').val();

•     gabarit (fichier gabarit.php) : intégrer les lignes
  

            <script src="http://localhost/mooc_ad/s0/fil_rouge/public/projet/js/code.js"></script>
            <link rel="stylesheet" type="text/css" href="http://localhost/mooc_ad/s0/fil_rouge/public/projet/css/styles.css">
       

A vous de jouer !