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?