Discussion :

[bahh66]

Bonjour,
je suis toujours dans la réalisation de mon jeu

et le joueur doit cliquer sur une zone de l'image et identifier l'élément cliqué.

Pour l'instant mes zones sont paramétrées ainsi :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<map name="testmap" id="zones_image">
		<area
			shape="rect"
			coords="570,195,660,275"
			data-id="bleu"
      data-img="https://upload.wikimedia.org/wikipedia/commons/7/74/Emblem-favorites.svg"
		/>
		<area
			shape="poly"
coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"
			data-id="jaune"
      data-img="https://upload.wikimedia.org/wikipedia/commons/b/bb/Broken_heart.svg"
		/>				
	</map>

dans le script, on valide la réponse comme cela :

Code javascript :

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
function traiteValeur(form, area) {
    // récup. de la saisie
  const elemSaisie = form.querySelector("[name='nom']");
  const nomJeu = elemSaisie.value.trim();
  const reponse = area.dataset.id;
  const srcImage = area.dataset.img;
     // le test
  if (reponse === nomJeu) {
    // bingo gagné !
    compt += 1;
    // ajout création d'un point sur l'image
    addPointOnImage(area);
    // mise à jours core
    document.getElementById("champDuPrompt").innerHTML = compt;
    // (1) suppression de l'écouteur
    area.removeEventListener("click", fonctionSurClic);
    // affichage message
    const title = "<span class='bingo'>BRAVO</span>";  // stylé directement en CSS
    const msg = "<img src='" + srcImage + "'><br><b>" + nomJeu + "</b> est une bonne réponse !";
    showModal(title, msg);
  }

Bien évidemment, je ne peux prévoir exactement la réponse du joueur.
J'aimerai donc que plusieurs réponses soit valide pour une même area.

Ex : bleu, bleue, BLEU, Bleu, BLEUE ...

Car le joueur a deviné la bonne réponse mais cela peut lui compter faux tout de même.

Je me disais qu'il faudrait fabriquer un tableau de bonnes réponses pour chaque area et ensuite valider la fonction traiteValeur si reponse correspond à une des valeurs du tableau.

Peut-on remplacer le data-id par une sorte de tableau?

[NoSmoking]

Bonjour,

Peut-on remplacer le data-id par une sorte de tableau?

cela me semble une très mauvaise idée, par contre tu peux te créer une table de correspondances, ou une sorte de dictionnaire, avec les données que tu autorises.
Exemple :

Code :

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

1
2
3
4
const DICO = {
  "bleu" : ["bleu", "bleue", "BLEU", "Bleu", "BLEUE"],
  // les autres
}

En faisant un traitement en amont tu pourrais très bien alléger celui-ci, suppression espace début/fin, mise en lowerCase ... suppression accent et que sais-je d'autres !

[bahh66]

cela me semble une très mauvaise idée

J'essaye même pas alors.

Pour le dico, je comprends que tu y définis toutes les réponses acceptées.
Mais du coup, mais avant on lui demandait :

Code javascript :

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

1
2
3
4
 const reponse = area.dataset.id;
// les autres constantes
if (reponse === nomJeu) {
// la suite...

On remplace la constante reponse par le DICO?

En faisant un traitement en amont tu pourrais très bien alléger celui-ci, suppression espace début/fin, mise en lowerCase ... suppression accent et que sais-je d'autres !

Si je comprends bien, on créerait des fonctions en amont que l'on utiliserait dans traiteValeur? ou dans getSaisie?
Chaque fonction gèrerait une transformation possible du texte dans le dialog.

[NoSmoking]

J'essaye même pas alors.

Voila une décision qu'elle est bonne

...
On remplace la constante reponse par le DICO?

Pas exactement, il faut tester si la réponse est dans le « dictionnaire ».

Si je comprends bien, on créerait des fonctions en amont que l'on utiliserait dans traiteValeur? ou dans getSaisie?

Pas forcément, tu peux créer une fonction de test que tu pourrais mettre dans la condition.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const DICO = {
  "bleu" : ["bleu", "bleue", "blue"],
  "vert" : ["ver", "vers", "vert", "verte", "verre"],
}
function existeInDico(ref, mot) {
  if (DICO[ref]) {
    // suppresion espace début/fin et mise en minuscule
    mot = mot.trim().toLowerCase();
    // test et retour existance dans le dico
    return DICO[ref].includes(mot);
  }
  return false;
}

EDIT : coquille dans nom paramètre fonction.
il suffit ensuite de tester

Code :

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

1
2
3
4
5
6
7
const nomJeu = elemSaisie.value;
const reponse = area.dataset.id;
// le test
if (existeInDico(reponse, nomJeu)) {
  // bingo gagné !
  // la suite du code
}

Voila pour une façon de faire !

[bahh66]

Je n'ai pas du placer correctement les éléments car il me renvoie que reponse n'est pas défini alors que c'est fait juste au dessus.

[NoSmoking]

Il te faut être plus attentif.

Regarde ton code et dis moi ce que vient faire l'accolade fermante avant le test !?!