Répondre à la discussion
Affichage des résultats 1 à 15 sur 15

Jeu du pendu, aide



  1. #1
    louise0

    Jeu du pendu, aide

    Bonsoir!

    Etant en 1ère s spé informatique, ma classe a eu un projet à réaliser à la maison.
    En bref nous devons créer un jeu du pendu, malheureusement je ne sais pas du tout comment m'y prendre et par quoi commencer. Sachant que je maîtrise l'html, css, javascript, les canvas puis plusieurs autres petits trucs basiques.

    J'ai commencé à faire mes trois pages toutes simples sur notepad++, je ne sais pas si je vais avoir besoin d'un canvas car après plusieurs recherches, je n'ai pas trouvé de réponse, j'arrive juste à m'embrouiller encore plus..

    l'html: (j'aime beaucoup personnaliser ainsi les sites que je créais, au grand plaisir de mon prof)
    Code HTML:
    <body><!-- début du corps de la page -->
    	<img src="hellokitty.gif" height="100" width="100" align=left> 
    	<img src="hellokitty.gif" height="100" width="100" align=right> 
    	<h1>*(● ̄(エ) ̄●)ノ* Le jeu du pendu *(● ̄(エ) ̄●)ノ*</h1>
    	
    	
    	<br><br><br>
    	<table>
    	<td><p>La potence prête à accueillir le pendu.
    	Le Pendu est un jeu consistant à trouver un mot en devinant quelles sont les lettres qui 
    	le composent. Le jeu se joue traditionnellement à deux, avec un papier 
    	et un crayon, selon un déroulement bien particulier.<p></td>
    	</table>
    	
    	
    	<br><br><br>
    	
    	<div style="text-align:center">
    	<canvas id="pane" width="500" height="500"></canvas> 
    	</div>	
    		<div id="boutons">
    			<input type="button" id="bouton1" value="Exécuter le programme"><!-- création d'un bouton qui permettra d'exécuter le programme -->
    		</div>
    		
    			
    	</body><!-- fin du corps de la page -->
    le css: (un peu inutile ici..)
    Code HTML:
    body{background-color:#EEE6F1
    }
    
    #pane{background-color:#EACFF1}
    
    h1{
    	text-align: center;
    	text-decoration: underline #AB94B2;
    }
    
    table {
    border: medium solid #C09DCA;
    margin: 0 auto;
    width:600px;
    height: 100px;
    }
    
    p{
    	text-align: center;
    }
    puis le javascript:
    (j'ai juste fait un petit carré pour vérifier si tout fonctionne)

    Code:
    //la fonction abonnements permet l'assignation de gestionnaires d'évènements à un élément cible 
    var abonnements = function() {
    	var monBouton = document.getElementById("bouton1");
    	monBouton.addEventListener("click",prog1);//ici on assigne la fonction nommée prog1 au bouton1,
    												//cette assignation se fera par un click de souris sur le bouton
    }
    
    window.addEventListener("load",abonnements);// lance la fonction abonnements après le chargement de ma page html
    
    //quand on appuie sur le bouton on appellera cette fonction prog1
    var prog1 = function(){
    	alert("Bonjour");
    	//tracer un carré dans le canvas
    	var c = document.getElementById("pane").getContext('2d'); 
    	var size = 80;
    	c.beginPath();
    	c.strokeStyle = "green";
    	c.strokeRect(20, 20, size, size);
    	c.closePath();
    	//enregistrement du texte de la fenêtre de saisie dans la variable t
    	var t = document.getElementById("tex").value;
    	alert(t);
    	document.getElementById("texBis").value=t;
    
    };
    Voilà voilà, si quelqu'un a le temps de m'expliquer rien qu'un petit peu la démarche à suivre, j'en serais très reconnaissante!! merci beaucoup!

    -----

    Dernière modification par JPL ; 09/01/2019 à 23h21.

  2. Publicité
  3. #2
    uneautreterre

    Re : Jeu du pendu, aide

    Bonjour.
    A partir du moment où on m'aurait donné carte blanche (et ça a l'air d'être ton cas), je ne ferais que changer le src de l'image du pendu à chaque étape.
    Évidemment, il faut d'abord créer les images avec un logiciel quelconque, mais ça, c'est plutôt facile.
    Cordialement.

  4. #3
    louise0

    Re : Jeu du pendu, aide

    Bonjour, merci beaucoup pour ta réponse!
    De ton point de vu ça a l'air assez simple, dit comme ça.
    Mais.. que faudrait il utiliser pour les propositions de lettres par exemple (j'ai du mal à m'exprimer) et comment exprimer une valeur fausse? Il me semble que pour ça je devrais utiliser javascript avec plusieurs boucles, je ne sais pas du tout si je suis sur la "bonne voie"..
    En tout cas merci encore, et bonne soirée!

  5. #4
    cherbe

    Re : Jeu du pendu, aide

    Bonsoir

    En partant sur HTML5 (j'insiste sur le 5), CSS et Javascript, je suis sûr que tu as fait un excellent choix. Tu as tout ce qu'il faut pour mener à bien ta mission !
    Commence par dessiner le jeu complet sur une feuille de papier.
    Il faut d'abord afficher les 26 lettres de l'alphabet. Ce n'est pas indispensable mais en grisant ou faisant disparaître celles qui sont tirées, ça aide l'utilisateur.
    Il te faut un textbox dans lequel on saisira les lettres proposées.
    une div avec des tirets-bas (underscore) à la place de chaque lettre qui seront ensuite remplacés par les lettres acceptées
    Ensuite, tu peux avoir des images complémentaires pour composer le gibet et le pendu et ces "briques" s'afficheront au fur et à mesure des bonnes réponses;
    mais ce serait "plus fun" si tu avais une fonction qui dessine chaque élément dans le canvas. Ces fonctions seraient appelées à chaque bonne réponse dans un ordre précis.
    Le programme s'arrête quand toutes les fonctions de dessin ont été appelées.

    Dans le code, tu devras avoir une série de mots qui seront tirés aléatoirement à chaque nouvelle partie
    En début de partie, les lettres du mot choisi par le programme seront stockées dans un array (tableau de données)
    A chaque lettre proposée, l'array est parcouru à la recherche de la lettre proposée en excluant évidemment celles déjà proposées qui auront été mémorisées (stockées dans un autre array)

  6. #5
    uneautreterre

    Re : Jeu du pendu, aide

    mais ce serait "plus fun" si tu avais une fonction qui dessine chaque élément dans le canvas. Ces fonctions seraient appelées à chaque bonne réponse dans un ordre précis.
    Fun, certes, en tous cas au niveau intellectuel. Surtout que notre ami précise qu'il maitrise Canvas (ce qui n'est pas mon cas).

    Dans le code, tu devras avoir une série de mots qui seront tirés aléatoirement à chaque nouvelle partie
    En début de partie, les lettres du mot choisi par le programme seront stockées dans un array (tableau de données)
    Là je suis moins convaincu. Il suffit d'afficher le code pour connaitre le choix des mots. Je ferais plutôt un appel ajax et laisserais un script côté serveur fournir le mot. Ainsi, seule la variable serait affichée dans le code, pas son contenu.

  7. A voir en vidéo sur Futura
  8. #6
    cherbe

    Re : Jeu du pendu, aide

    Citation Envoyé par uneautreterre Voir le message
    Fun, certes, en tous cas au niveau intellectuel. Surtout que notre ami précise qu'il maitrise Canvas (ce qui n'est pas mon cas).
    C'est ce que je voulais dire. Si j'étais son prof, je noterais mieux ce système qu'un assemblage de dessins
    Citation Envoyé par uneautreterre Voir le message
    Là je suis moins convaincu. Il suffit d'afficher le code pour connaitre le choix des mots. Je ferais plutôt un appel ajax et laisserais un script côté serveur fournir le mot. Ainsi, seule la variable serait affichée dans le code, pas son contenu.
    Je comprend que "Louise0" est une jeune fille âgée de 16 ans et qu'elle doit rendre un programme fonctionnel, pas une une application à mettre en ligne telle quelle mais te remarque est fondée !

  9. Publicité
  10. #7
    uneautreterre

    Re : Jeu du pendu, aide

    Citation Envoyé par cherbe Voir le message
    Si j'étais son prof, je noterais mieux ce système qu'un assemblage de dessins !
    Mince, je serais mal noté avec mes jolis dessins (a moins que je me mette à bûcher) !

  11. #8
    louise0

    Re : Jeu du pendu, aide

    Bonjour! merci beaucoup pour votre réponse très complète
    J'ai déjà utilisé quasiment tout les éléments que vous avez cité!
    J'ai commencé à réaliser le canvas, et je m'étais effectivement dit que se serait cool que celui ci se dessine selon la réponse de l'utilisateur!
    Je ne sais pas réellement comment mettre en place un ''array'' mais j'ai déjà réaliser un tableau de données pour calculer moyenne et somme.. j'arriverais à me débrouiller ^^
    Merci encore pour vos multiples explications aha, bonne journée.

    Louise

  12. #9
    cherbe

    Re : Jeu du pendu, aide

    Citation Envoyé par louise0 Voir le message
    Je ne sais pas réellement comment mettre en place un ''array'' mais j'ai déjà réaliser un tableau de données pour calculer moyenne et somme
    Louise
    Je pense que l'on parle de la même chose mais je trouve que "tableau" traduit mal le sens de array en programmation, raison pour laquelle je garde l’anglicisme

  13. #10
    Ikhar84

    Re : Jeu du pendu, aide

    Salut,

    Un "array" est bien un tableau, ici en tout cas, un ensemble d'élements à la suite réferencés par leur indice. La différence sera en fonction des langages, plus ou moins un objet ou non.

    Par contre, je ne suis pas sûr que l'on se dirige dans la bonne direction en HTML/Javascript pour un jeu du genre du Pendu, ce soit une bonne solution. Essentiellement parce que en l'état, les réponses sont facilement accessibles en clair dans le code source de la page...

    Développer c'est assi analyser et prendre en compte tous les cas de figure qui pourrait poser problèmes dans le déroulement de l'execution du programme: "sécuriser" l'accès aux bonnes réponses me semble un minimum si on veut acquérir de bons réflexes de développeur.
    J'ai glissé Chef !

  14. #11
    cherbe

    Re : Jeu du pendu, aide

    Citation Envoyé par Ikhar84 Voir le message
    Développer c'est assi analyser et prendre en compte tous les cas de figure
    Alors soyons pragmatique :
    quel est le pourcentage d'internautes qui savent accéder au code source de la page ?
    Et parmi eux, combien ne sont pas rebutés dans les premières secondes par le côté "imbuvable" de ce qu'ils voient ?

    Intégrer cette variable infinitésimale dans un devoir scolaire dont l'énoncé ne semble pas aborder la sécurité des données me parait superflu mais ce n'est que mon avis

  15. #12
    Ikhar84

    Re : Jeu du pendu, aide

    Je suis bien d'accord Cherbe, mais comme sur le fofo électronique, je rêves d'un monde où les futurs professionnels ont les bons reflexes profondément implantés dans leur subconscient, où on ne se contennte pas d'un bidouillage qui tombe en marche...

    Quand il s'agit d'amateur qui veulent s'amuser, je n'y vois rien à redire, mais quand je vois un élève en spécialité info, je m'attends à ce qu'il ai bien analysé le problème posé, réfléchi à plusieurs solutions envisageable et en ai choisi une en toute connaissance de cause, là par exemple, en assumant que les utilisateurs victorieux ont de grandes chances d'avoir tout simplement triché !

    Le simple fait d'avoir intégré cette possibilité me suffit, mais ne pas l'avoir pris en compte me semble ... (et je suis prof de lycée...).

    De mon temps (41 ans...), on devait se "farçire" les docs, manpages, datasheets, sans aucune aide, et après la présentation de nos oeuvres, le prof tentait les trucs les plus improbables pour nous tester, j'ai souvenir d'un chat multiclients en Java, classique, où tout me semblait blindé, mais le prof a arraché le cable réseau d'un des clients en pleine communication... j'ai appris à la dure ce qu'était un time out...
    J'ai glissé Chef !

  16. Publicité
  17. #13
    uneautreterre

    Re : Jeu du pendu, aide

    Un "array" est bien un tableau, ici en tout cas, un ensemble d'élements à la suite réferencés par leur indice
    Je suis personnellement d'accord avec cherbe. Le mot français tableau traduit très mal le mot array qui signifie collection, mot qu'on aurait dû conserver vu que premièrement c'est conforme à la réalité et deuxièmement c'est parlant et simple à comprendre.

    Pourquoi « très mal » ? Parce qu'il faut en réalité un array d'array pour obtenir un tableau, qui, en français est un objet à deux dimensions.

    Mais je comprends bien que mon aversion aux termes qui ne sont pas sémantiques n'est pas féconde. Aujourd'hui, tout le monde emploi résolution pour définition, digital (relatif au doigt) pour numérique... au jour d'aujourd'hui pour aujourd'hui qui est déjà en soi un pléonasme.

  18. #14
    polo974

    Re : Jeu du pendu, aide

    pour le jeu du pendu, c'est pas un array qu'il faut mais une string pour pouvoir pendre le condanmé...

    en courant...
    Daudet, tu vas nous manquer...

  19. #15
    Ikhar84

    Re : Jeu du pendu, aide

    Salut, pour moi on peut utiliser la notion de tableau à une dimension, car on a d'un côte des indices et de l'autre les données.

    Si on s'eloigne de la notion de tableau, on doit aborder la notion d'objet, dans la plupart des langages OO, il y a bien cette dichotomie entre un tableau de "types" de base ou d'objets et un objet qui est une collection.

    Quelque soit cet objet: List, Array, Vector etc...
    J'ai glissé Chef !

Sur le même thème :

Discussions similaires

  1. jeu de pendu
    Par hicham22 dans le forum Programmation et langages, Algorithmique
    Réponses: 3
    Dernier message: 18/12/2016, 01h47
  2. Le pendu en C++
    Par yuopaznn dans le forum Logiciel - Software - Open Source
    Réponses: 1
    Dernier message: 02/12/2009, 19h16
  3. Pendu
    Par Kirk_met dans le forum Physique
    Réponses: 1
    Dernier message: 28/03/2005, 22h09