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?
Partager