Pendu en Javascript

Version imprimable

Pendu en Javascript

Bonjour,

Nouvelle arrivante sur le forum, j'espère que je poste mon message au bon endroit !
Je viens vous demander votre aide car je dois programmer un jeu pour le bac (S avec spécialité informatique), et qu'avec mon groupe nous sommes bloqués.
Pour faire bref, le code doit être en HTML, CSS et Javascript, et nous avons choisit de faire un pendu où le joueur pourrait choisir entre 5 catégories de mots (école, animaux (école, animaux, films, auteurs et musique). Une fois la catégorie choisie, le joueur arrive sur une page du site où un mot est choisi aléatoirement par l'ordinateur (on a stocké 10 mots par catégorie).

Ma partie du travail consiste à stocker les mots de la catégorie, faire en sorte qu'un mot de la liste soit choisi aléatoirement, et d'afficher un tableau vide pour permettre au joueur de visualiser le nombre de lettres.

Etant donné que chaque catégorie sera sr une page HTML indépendante, j'ai isolé mon code de la partie Ecole pour voir si ça fonctionnait, et je l'adapterai pour les autres parties.

Seulement, lorsque je lance mon fichier, des virgules s'affichent (le nombre de virgules est aléatoire quand on actualise la page) en dehors du canvas, au lieu d'un tableau dans le canvas.

Voici ce que j'ai fait, est-ce que quelqu'un pourrait me dire ce qui ne va pas ?
Merci d'avance !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html> <head> <title>Pendu</title> </head> <body> <canvas id="Pendu" width="800" height="600" style="border:1px solid #000000"> </canvas> <script type="text/javascript"> var motMystere; var MotATrouver= new Array (); //tableau comportant les lettres du mot à trouver var motsEcole= new Array (); //tableau comportant les mots de la catégorie Ecole motsEcole[0]="STYLO"; motsEcole[1]="ASYMPTOTE"; motsEcole[2]="CATALYSEUR"; motsEcole[3]="ASTHENOSPHERE"; motsEcole[4]="THALES"; motsEcole[5]="EXPONENTIELLE"; motsEcole[6]="PYTHAGORE"; motsEcole[7]="PAPIER"; motsEcole[8]="SUBORDONNEE"; motsEcole[9]="TABLEAU"; motMystere=motsEcole[Math.floor(Math.random()*10)]; MotATrouver= new Array(motMystere.length); document.write(MotATrouver); </script> </body> </html>

15/04/2015, 10h40
Golgotha

Bonjour, Tout est normal.

Citation:

L'objet Array redéfinit la méthode toString d'Object. Pour les objets Array, la méthode toString() concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.
15/04/2015, 10h47
ladybird06

D'accord, merci, mais je ne comprends pas pourquoi ce n'est pas un tableau qui s'affiche dans le canvas plutôt que des virgules en dehors. Vous sauriez comment faire pour changer ça ? (je viens de réaliser que ma balise du canvas n'est pas fermée au bon endroit, c'est sûrement en partie pour ça)
15/04/2015, 10h59
Golgotha

Comment ça un tableau ? Pourquoi voulez vous qu'un tableau s'affiche qui plus est dans un canvas... Le tableau, il est en mémoire c'est tout, c'est une vue "théorique".

La canvas sert essentiellement à dessiner dessus, là je ne vois pas l'utilité.

Je vais peut être paraitre pessimiste mais je crois que vous êtes pas rendu pour votre projet :aie:
15/04/2015, 11h03
ladybird06

Haha je suis désolée, j'ai vraiment du mal, le codage n'est pas mon fort.
Le tableau avec ma liste de mots est en mémoire, ça j'ai compris. Ce que je veux maintenant c'est afficher un tableau vide avec autant de cases que de lettres dans le mot tiré aléatoirement, comme les tirets qu'on pourrait mettre pour le nombre de lettres lorsqu'on joue sur papier, et c'est là dessus que je bloque.
Désolée si ça ne vous parait pas clair ou si je suis à côté de la plaque, je suis une grande débutante :?
15/04/2015, 11h26
Golgotha

1 pièce(s) jointe(s)

Et bien, déjà il faut penser à la suite, le plus important : que le joueur puisse entrer une lettre dans chaque "case", et pour ça en HTML c'est des input qu'il faut.

Je pense que le rendu que vous voulez ça devrait être quelques chose comme ceci :

Pièce jointe 174864

Le code HTML pour une "case" de un caractère avec une taille de un c'est : <input type="text" maxlength="1" size="1">
Pour créer dynamiquement ce tableau de case, il faudra le faire avec du JavaScript.
15/04/2015, 11h31
ladybird06

Oui voilà, c'est quelque chose comme ça que je veux !
Le problème est que le projet est divisé en 4, vu que nous sommes 4 à le présenter au bac, et ma partie se limite à stocker les mots, faire tirer un mot aléatoirement, afficher un tableau vide avec le bon nombre de cases (selon le mot tiré juste avant).

Ceci dit merci pour ce que vous avez dit, je vais transmettre ça à mon groupe, ça les aidera peut être !
16/04/2015, 10h00
SylvainPV
Des <input> ça va être pénible pour saisir les lettres, il faut cliquer dans le champ puis taper la lettre, et après détecter le changement etc...

Sur le pendu que j'avais réalisé en JS, j'écoutais simplement les évènements du clavier:
Code:

1 2 3 $(window).on('keypress',function(e){ tryLetter(String.fromCharCode(e.keyCode)); });
Pour le stockage des mots, j'utilisais un fichier texte avec mes mots séparés par des points-virgules, que je chargeais en AJAX :
Code:

1 2 3 4 5 6 7 $.ajax('words.txt',{ dataType: "text", success: function(data){ var words = new String(data).split('; '); startGame(); } });
Et je confirme qu'utiliser <canvas> ici me paraît superflu. Des <span> pour chacune des lettres et 10 fichiers images pour les états du dessin du pendu font parfaitement l'affaire. J'ai fait ça sous Paint en quelques minutes et ça rendait très bien ^^

Je ne te donnerai pas mon code complet sinon l'exercice n'aurait plus aucun sens, mais si vous êtes bloqué par un point particulier je peux toujours vous donner des pistes.
16/04/2015, 10h04
SpaceFrog

Un hommage à Javatwister :
http://javatwist.imingo.net/pendu.php