Dossier- Projet Informatique et science du numérique

Transcription

1 Dossier- Projet Informatique et science du numérique Laetitia BIZOT avec la participation Eve ETIENNE Année 2014

2 Table des matières I. But du projet L enjeu du projet La problématique Le cahier des charges Les fonctionnalités du projet avec éventuellement des exemples d'utilisation... 3 II. Taches de chaque membre du groupe... 3 III. Description des étapes du projet... 4 Première étape - 25/02, 26/02 et 27/ Deuxième étape - 28/02, 01/03, 04/03, 11/03 14/03 et 15/ Troisième étape - 18/03, 25/03, 1/04 et 08/ Quatrième étape du 12/04 au 23/ IV. Développement du projet Présenter l'utilisation du programme Tests de validation Résultats final obtenu (saisies écran, ) Décrire les grandes lignes du code Détailler plus précisément une partie ou deux parties du code réalisées individuellement... 8 V. Annexe :... Erreur! Signet non défini. 1

3 I. But du projet 1. L enjeu du projet Notre projet consiste à réaliser une version numérique du jeu de société Qui-est-ce? Ce projet permet d aborder plusieurs aspects de l informatique : d une part, la programmation en JavaScript et en PHP ; d autre part, de travailler sur une base de donnée (avec phpmyadmin), cela dans le but de créer un site web dynamique (adapter à son visiteur) et enfin, le travail sur l image avec feuilles de style CSS. Nous avons choisi de développer un mode de jeu qui fait jouer l utilisateur contre l ordinateur. Le site web permet à l utilisateur d avoir une progression en fonction, des cartes qu il gagne qui lui permettent de débloquer des niveaux. 2. La problématique La dichotomie («couper en deux» en grec) est, en algorithmique, un processus de recherche où, à chaque étape, on coupe en deux parties un espace de recherche qui devient restreint à l'une de ces deux parties. Ainsi on réduit la zone de recherche. On suppose bien sûr qu'il existe un test relativement simple permettant à chaque étape de déterminer l'une des deux parties dans laquelle se trouve une solution. Le Qui-est-ce? nécessite une élimination progressive des personnages en fonction des réponses aux questions posées dont on répond par oui ou non. On se demande comment adapter la méthode de recherche par dichotomie à ce projet. Et comment grâce à une page dynamique pouvons-nous adapter le site, le jeu à l utilisateur et sauvegarder sa progression. Le projet s intègre dans les thèmes du langage, de l algorithme et du stockage d information. 3. Le cahier des charges Les objectifs : Créer des comptes pour les joueur du Qui est ce? (permettre au visiteur de s inscrire, se connecter, se déconnecter, modifier son compte et se désinscrire) Stockage et récupération d informations dans une base de données - information sur le compte joueur [nom, mot de passe, sa progression dans le jeu : cartes et niveau] - stockages de 104 personnages avec leurs caractéristiques L interface de communication entre l ordinateur et le joueur : - afficher un plateau de jeu avec 24 cartes, - permettre au joueur de retourner ses cartes personnages pour les éliminer, - permettre à l ordinateur et au joueur de poser et de répondre aux questions, - validation des réponses de l ordinateur ou du joueur Vérifier que la réponse du joueur est correcte L élimination des personnages par l ordinateur en fonction des réponses aux questions posées à l utilisateur Si le joueur est sur le point des gagner (il ne lui reste plus que 3 personnage sur son plateau), l ordinateur doit pouvoir faire des suppositions sur le personnage à deviner même s il n est pas sure de sa réponse Attribuer un score au joueur à la fin de la partie (en fonction du temps de jeu [faire un chronomètre] et du nombre de questions posées par le joueur) En fonction du score obtenu, le joueur peut gagner 1,2 ou 3 cartes Grâce aux cartes gagnées au fil des parties, le joueur gagne des niveaux allant de 1 à 7. 2

4 Les règles du jeu du Qui-est-ce? : Une partie de Qui-est-ce? Se joue à deux joueurs. Chaque joueur dispose d'un plateau sur lequel sont représentés les portraits de 24 personnages. Au début de la partie, chaque joueur choisit secrètement l'un de ces personnages. Le but du jeu est alors de deviner le personnage choisi par l'adversaire, en posant des questions sur son apparence physique. Chaque joueur pose à tour de rôle une question à son adversaire, pour laquelle il est possible de répondre par oui ou par non. Par exemple : Joueur 1 : A-t-il un chapeau? Joueur 2 : Non. Le joueur 1 peut donc logiquement éliminer tous les personnages coiffés d'un chapeau. Le premier joueur à deviner correctement l'identité du personnage choisi par l'adversaire remporte la partie. 4. Les fonctionnalités du projet avec éventuellement des exemples d'utilisation Le projet a pour fonction le divertissement d un joueur. Il peut être utilisé dans le cadre des jeux en ligne avec la possibilité de créer une dynamique de compétition entre les joueurs et de communication en ligne. II. Taches de chaque membre du groupe Etape La fonction à accomplir Membre Première Faire un programme simplifié du Qui-est-ce? avec trois personnages et trois Eve caractéristiques Première Création d une variable élimination qui compte le nombre de joueur éliminés par Eve l ordinateur Première Le programme met les personnages et leurs caractéristiques dans un tableau et Laetitia supprime les cases contenant les personnages à éliminer en fonction des réponses aux questions posées par l ordinateur Première Rassemblement des travaux des deux membres du groupe et création de Eve variables aléatoires afin de permettre à l ordinateur de poser des questions dans un ordre aléatoire Première Sélectionner des personnages parmi une liste de personnages et développement Laetitia de la partie où l utilisateur doit deviner le personnage choisi par l ordinateur Deuxième Afficher les images des personnages sélectionnés par l ordinateur avec la Laetitia fonction ajouterelement() Deuxième Le joueur pose une question à l ordinateur qui lui répond en appuyant sur l image Eve d une fille, d une paire de lunette ou d un chapeau avec les fonction demanderuti() Deuxième Une fonction test() qui compte le nombre de personnages éliminés par le joueur Eve et affiche une carte retournée Deuxième Une fonction trouve() qui permet au joueur de faire des propositions en appuyant Laetitia sur le bouton j ai trouvé Deuxième Une fonction sortirquestion() qui en fonction de la variable élimination joueur peu Laetitia faire une hypothèse sur le personnage à deviner, dire au joueur le personnage qu il est sur d avoir trouvé ou poser une question au joueur Deuxième Condensation du script afin de réduire le nombre de fonctions, ajout des Laetitia variables nombre de personnages et nombre de question Deuxième Correction des erreurs du code JavaScript après sa condensation Eve Troisième Création d une base de données avec une table membre, puis des pages Laetitia d inscription, de connexion, de déconnexion et de désinscription Troisième Réalisation du CSS des pages connexion, inscription Eve Quatrième Création des 105 personnages et insertion dans une base de données Laetitia 3

5 Quatrième Ajout d un chronomètre et création d une variable score Quatrième Insertion de la variable score dans une base de données et création de niveaux qui sont débloqués quand le score du joueur augmente Quatrième Réalisation du CSS de la page membre.php pour jouer Quatrième Ajout de l encodage UTF-8 Eve Laetitia Eve Laetitia III. Description des étapes du projet Première étape - 25/02, 26/02 et 27/02 Durant l étape 1, nous avons créé une version simplifiée du Qui-est-ce? contenant trois personnages, trois caractéristiques (chapeau, lunette et filles). Le joueur et l ordinateur posent questions et répondent à des questions. Il n y a pas d interface graphique et le programme est réalisé en JavaScript. Cependant, l'ordinateur ne devine pas un personnage du plateau, il n y a pas encore de plateau jeu, le programme ne fait que créer un personnage en fonction des réponses aux questions qu il pose au joueur. Cela pose problème, l'ordinateur et le joueur doivent deviner un personnage déjà existant dans un plateau jeu. Pour cela, il faut un plateau jeu qui présente toutes les personnes (avec les caractéristiques). L'ordinateur et le joueur pourront donc éliminer des personnes du plateau au fur et à mesure que le jeu avance. Le joueur et l ordinateur doivent connaitre le nombre de personnages que l'adversaire à éliminer. Pour résoudre ce problème, on place les personnes et leurs caractéristiques dans un tableau à deux dimensions. Toutes caractéristiques N Personnages (0-23) Chapeau Cheveux blond Nom 0 Oui(0) \Non(1) Oui(0) \Non(1) Oui(0) \Non(1) Oui(0) \Non(1) L ordinateur choisi un des personnages du tableau. Puis pour résoudre le deuxième problème, on doit créer un tableau élimination des personnages de l utilisateur et de l ordinateur, qui s organise comme ci-dessous : N Personnages (0-23) Eliminé (= 0) ou non (= 1) 0 ou 1 0 ou 1 0 ou 1 0 ou 1 0 ou 1 0 ou 1 Deuxième étape - 28/02, 01/03, 04/03, 11/03 14/03 et 15/03 Durant l étape 2, nous permettons au joueur de poser des questions afin de deviner le personnage choisi par l ordinateur. On réalise une première interface graphique avec les images de lunette, chapeau et fille. L ordinateur sélectionne trois personnages et les affiche sur le plateau, ensuite le joueur peut éliminer ces personnages en cliquant sur leurs cartes. On compte le nombre de cartes éliminées par le joueur et l ordinateur (grâce au tableau élimination joueur et ordinateur). Le joueur et l ordinateur peuvent faire des suppositions sur le personnage à deviner en fonction de ces variables éliminations. On doit augmenter le nombre de questions et de personnages, améliorer le graphisme. Pour cela il faudrait synthétiser notre programme à l'aide boucle for. Troisième étape - 18/03, 25/03, 1/04 et 08/04 Nous avons étudié le PHP & SQL, afin de créer un site dynamique. Nous avons créé : une base de données nommée («pf») contenant une table «membre» qui regroupe les informations sur les membres et des pages 4

6 PHP (contenant des requêtes SQL pour insérer, modifier et obtenir des informations dans la table «membre») pour qu ils puissent s inscrire et se connecter. Au niveau de l interface graphique, on a ajouté un pied de page, un entête et une barre de navigations. Cependant, toutes les informations sur nos personnages sont stockées dans la partie écrite en JavaScript, ce qui devient difficile à gérer si on pose une dizaine de questions et que l on a une centaine de personnages. Nous avons donc décidé de stocker ces informations dans la base de données «pf», dans la table «les_perso» et de récupérer l ensemble de ces informations à l aide d une requête PHP. On sélectionne ensuite les personnages et on les introduit sur le plateau. IV. Quatrième étape du 12/04 au 23/04 Durant l étape 5, on a créé une base de données contenant 105 personnages et a sélectionné grâce au PHP les 24 personnages, que l on place dans un tableau (array) à double dimensions PHP (ici le travail est fait côté serveur). Ce tableau qui sera transmis au JavaScript (qui est coté client). Lors de cette conversion PHP-> JavaScript nous avons rencontré des problèmes d encodage qu il a fallu résoudre : il faut que tous les encodages : la base de donné phpmyadmin, le résultats des requêtes PHP (mysql_query("set NAMES utf8") ), JavaScript et html soit encodé en utf-8. Nous avons ajouté un chronomètre pour calculer le score du joueur. Le score lui permet de gagner des cartes, qui permettent de débloquer des niveaux. On a élargi le nombre de questions à 15. On a réalisé l interface graphique. Développement du projet 5. Présenter l'utilisation du programme Pour jouer, l utilisateur doit d inscrire sur le site en entrant son nom et un mot de passe, puis il peut se connecter, modifier ses données ou se désinscrire. Son compte lui permet de sauvegarder son avancement dans le jeu. Pour débuter le jeu, le joueur clique sur le bouton «jouer» et le plateau jeu contenant les personnages s affiche. Le joueur peut alors poser des questions à l ordinateur en cliquant sur des icônes «questions» présent dans la barre de question. L ordinateur affiche sa réponse dans la les boîtes de dialogue (répond par oui ou non). Lorsque joueur veut éliminer un personnage, il clique sur la carte et elle se retourne. Puis il passe la main à l ordinateur avec le bouton «passe» et l ordinateur pose lui aussi une question au joueur qui lui répond par oui ou non avec les boîtes de dialogue. Si le joueur pense avoir trouvé la personne recherché, il fait une proposition avec le bouton «j ai trouvé» et saisit le nom de la personne. A la fin du de la partie, si le joueur gagne, il obtient un score qui s il est assez élevé lui permettra de gagner 1, 2 ou 3 cartes. Avec ces cartes gagnées, le joueur débloque des niveaux. 6. Tests de validation Le test de validation permet de vérifier si toutes les exigences client décrites dans le document de spécification d'un logiciel, écrit à partir de la spécification des besoins, sont respectées. Des problèmes : - Quelques fois il y a des problèmes de majuscule ou d accents, lors de la saisie par l utilisateur (avec les boutons «j ai trouvé») du nom du personnage trouvé, - Difficulté pour l ordinateur de gagner, - Interface graphique qui n est pas assez verrouillez (on peut poser plusieurs fois des questions alors que ce n est pas à nous de jouer), - Mettre des règles pour expliquer comment jouer, Des extensions : 5

7 - Développer des nouveaux modes de jeu : plusieurs utilisateurs jouent en réseau, seul le joueur joue l ordinateur répond aux questions - Améliorer la sécurité du site (notamment au niveau des mots de passe) - Permettre une communication entre les internautes avec des forums, la possibilité de discuté en ligne, de laisser des commentaires - Classer les joueurs en fonction de leur score et faire apparaitre un classement des meilleurs scores, avec des records à battre - Permettre aux joueurs d ajouter des personnages au jeu 7. Résultats final obtenu (saisies écran, ) Plateau de jeu Cartes retournée Barre question 8. Décrire les grandes lignes du code Notre projet contient une base de donné «pf» qui contient 2 tables : «membre» ( les personnes inscrites au site) et les «perso» (continent toutes les personnages du jeu avec les caractéristiques) Le joueur doit s inscrire puis de connecter au site grâce à la page «inscription» et «connexion»: page «inscription» (entièrement codée en PHP) : D abord, l utilisateur remplit un formulaire. Puis PHP vérifiera la conformité des saisie (pas de champs oublié ou le mot de passes ne correspondent pas...) et les placera dans des variables et le mot de passe sera crypter en md5. Enfin, ces variables seront enregistrés grâce aux requêtes sql dans table membre ( de la base de donnée pf ). page «connexion» (entièrement codée en PHP) : D abord, l utilisateur remplit un formulaire. Puis PHP vérifiera la conformité des saisies et les passera dans des variables. Ensuite, grâce aux requêtes sql PHP vas vérifier que les informations saisie sont 6

8 présente dans la table membre et que le mot de passe correspond au nom. Enfin, si tout est correction une session (temporelle) se crée et l utilisateur sera dirigé vers la page des niveaux. page «niveaux» (entièrement codée en PHP): Grâce à la session créée lors de la connexion, on récupère le niveau du joueur ainsi que le nombre de cartes qu il a gagné. En fonction de ces données, le serveur enverra un script qui lui donne accès qu au niveau acquis. Page «jeu» (PHP et JavaScript) : 1) Une fois connecté à la base de donnée, on récupère aléatoirement (1) 24 personnages parmi les 104 de la table «les_perso». Ceci se fait grâce à la requête mysql_query SELECT puis on place les résultats dans le array php $tableauensembledespersonesdujeu_php = array(); avec mysql_fetch_row. (1) array php «$nbperso» contient 24 nb aléatoires de 1 à 25 générer par la fonction suivante : $comp = 0; $nbalea; $trouver; $max = 24; $min = 1; $nb_pers = 24; while ($comp <= $nb_pers){ $nbalea = rand (1,25); $trouver = 0; for ($i=0 ; $i < $nb_pers; $i++){ if ($nbperso[$i] == $nbalea){ $trouver = 1; } } if($trouver == 0) { $nbperso[$comp] = $nbalea; $comp++; } } 2) On transfère le tableau PHP $tableauensembledespersonesdujeu_php = array(); ( coté serveur) vers le JavaScript var tableau ( coté client) avec des «echo». Ps : Maintenant que var tableau (contient l ensemble des personnages de la partie) tout le reste se fait sur JavaScript (coté client). On affiche les personnages sur le plateau avec la fonction ajouteelement(), dès que le bouton «jouer» a été cliqué. 3) On crée une variable aléatoire var choio permettant à l ordinateur de sélectionner un personnage. var choio deviendra par la suite un array dans lequel s inscrit toutes les caractéristiques du personnage choisi. Toutes caractéristiques Chapeau Cheveux blond Nom N Personnages var choio (nombre aléatoire choisi entre 0 et 24) Oui(0) \Non(1) Oui(0) \Non(1) Oui(0) \Non(1) Oui(0) \Non(1) 4) On crée des tableaux éliminations joueur var eliminationjoueur et ordinateur var elimination qui comptabilise les personnes éliminé en leur attribuant un 1 dans la cellule du nom correspondant. 5) L'utilisateur pose des questions à l'ordinateur en cliquant sur les boutons questions (fonction demandera(quoi) ) augmentant ainsi de 1 le nombre du var nbclick. 6) L'utilisateur émet des hypothèses en cliquant sur le bouton "trouver" et déclenche la fonction trouve() qui analyse si la supposition est bonne. 7) La fonction test permet à l'utilisateur d'éliminer des cartes en affichant des cartes retournées sur le plateau 8) Grace à une boucle 15 variables aléatoires (0 à 15) sont créer et placé dans le array var nb. Elles permettent à l'ordinateur de poser des questions de manière aléatoire 7

9 9) La fonction sortirquestion permet à l'ordinateur 1/de poser des questions aux joueur 2/ dire qui est la personne à deviner lorsqu il a éliminé tous les personnages du jeu ou 3/ de faire des supposions s il ne reste que trois personnages sur le plateau joueur. 10) Le calcul du score du joueur se fait en fonction du temps (2) qu il a mis pour deviner le personnage choisi par l ordinateur et du nombre de question qu il a posé (var nbclick) (2) Le temps est chronométrer grâce à la fonction chrono 11) Si le joueur gagne, en fonction de son score, il gagne des cartes var nb_carte_gagner; qui lui permettent d atteindre des niveaux supérieurs (var niveau_finjeu) si le nombre total de carte qu il possède est suffisant à la fin de la partie (var newnb_carte_posseder;). 12) A la fin de la partie, les nouvelles données: niveau du joueur et nombre de cartes gagnées seront mise à jour dans la base de donnée grâce à un transfert des variable js, coté client (var niveau_finjeu et var newnb_carte_posseder ) vers des variables PHP ( coté serveur ). 9. Détailler plus précisément une partie ou deux parties du code réalisées individuellement La fonction sortirquestion se fait en 3 phases. Phase 1 et 2 permet à l'ordinateur d afficher une proposition sur personnage qu'il a deviné, phase 3 pose une question à l utilisateur var proposition_directe et var suposition sont des variables qui servent de condition. var proposition_directe = nb_personne - sommeeliminations correspond au nombre de personnages non éliminé par l ordinateur. var suposition = nb_personne - sommeeliminationjoueur correspond au nombre de personnages non éliminé par le joueur. 8

10 9