Pendu en Javascript

**ladybird06** · 15/04/2015, 10h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Golgotha** · 15/04/2015, 10h40

Bonjour, Tout est normal.

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.

**ladybird06** · 15/04/2015, 10h47

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)

**Golgotha** · 15/04/2015, 10h59

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

**ladybird06** · 15/04/2015, 11h03

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

**Golgotha** · 15/04/2015, 11h26

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 :

Nom : input.png
Affichages : 2606
Taille : 406 octets

Nom : input.png
Affichages : 2606
Taille : 406 octets

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.

Pendu en Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager