En faisant une brève introduction au jeu, vous arriverez à comprendre plus ou moins en détail, les rudiments. Le joueur de ce jeu par navigateur dispose d’un temps défini pour répondre aux questions à choix multiples. Une fois que toutes les questions ont été répondues, le jeu se termine et affiche le nombre de bonnes réponses.
Deux fonctions d’aide seront disponibles pour assister le joueur tout en compliquant la vie du développeur : le fifty-fifty, qui supprime deux réponses incorrectes parmi les quatre options, et l’appel à un allié, qui sera simulé par un appel arbitraire (biaisé dans le bon sens).
Récupération des fichiers
Récupérez le fichier HTML et les fichiers de style suivants :
- Quizz.html
- Quizz.css
- Bootstrap.min.css
Le fichier Quizz.html contient deux divs principaux :
- Le jeu principal, composé de la foire aux questions et des quatre réponses possibles, est contenu dans le jeu d’identification :
- Le texte de la question doit aller dans le paragraphe de la question d’identification.
L’identifiant correspond au nom de la réponse (A, B, C ou D). Appuyez sur le bouton “Identification OK” pour valider une réponse. Le score final, un commentaire et un bouton pour continuer le jeu peuvent tous être affichés en identifiant les résultats. Pour le dire plus précisément : Appuyez sur le bouton de redémarrage pour redémarrer le jeu.
L’étudiant qui termine le développement du jeu sera responsable de la gestion des deux jokers qui sont fournis. Ces jokers sont identifiés par les noms appel (à un ami) et cinquante (50/50).
A lire aussi : combien coute un détecteur de métaux
Architecture générale et premières fonctions
Pratiquement tout le code JavaScript sera placé dans un objet de jeu, dont les méthodes lanceront le jeu, modifieront la question et enregistreront les résultats. Nous allons utiliser un premier attribut et une première méthode pour créer notre jeu d’objets sous forme de préchauffage. Pour apprendre la syntaxe des objets JavaScript, reportez-vous au cours que vous avez vu précédemment. Créez un premier attribut resultsContainer pour l’objet de jeu qui utilise un sélecteur de requête pour choisir les résultats. Faire une première itération de la méthode start qui met en cache resultsContainer en y ajoutant la classe CSS hidden. Ensuite, vérifiez votre code dans la console.
Pour consolider le code JavaScript dans un fichier Quizz.js externe, il importe de créer le fichier JavaScript Quiz.js à l’aide du code susmentionné. On doit ajouter le fichier JavaScript Quizz.js à la page Quizz.html à l’aide du CSS.