Discussion :

[bahh66]

Ce sujet fait suite à celui-ci

Résumé de ma recherche : je souhaite réaliser un jeu où le joueur clique sur des éléments d'une image et rentre une réponse, si celle-ci est juste, il marque des points si elle est fausse il perd des vies.
Je souhaite à présent faire apparaitre les réponses justes sur un radar (pour que le joueur est une vision d'ensemble de toutes les réponses trouvées).

Le click sur le radar fait apparaitre l'image du jeu en noir et blanc.

Le jeu

A cette étape, j'imagine donc qu'il faut que je lui dise de placer un rond (en svg?) à l'endroit où il y avait une map area (qui n'est pas forcément ronde).
Je pense donc que je dois créer une variable dans la partie

Code :

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

1
2
3
4
5
6
7
8
9
10
if (result === elClicked["dataset"]["nom"]) {
    let win;
      win="Bravo, c'était bien "+elClicked["dataset"]["nom"];
        // diffère l'affichage de la boîte alert
    setTimeout(() => alert(win), 100);  
    compt += 10;
    document.getElementById("champDuPrompt").innerHTML = compt;
    // (1) suppression de l'écouteur
    elClicked.removeEventListener("click", fonctionSurClic);  // fonctionSurClic est le nom de la fonction appelée
  }

cette variable doit donner les coordonnées pour un affichage dans la fonction setStateImageFond. Et celle-ci affichera le svg.

Mon raisonnement tient-il la route?

[bahh66]

Est-ce que je peux récupérer les coordonnées du premier point d'une forme définit par

Code :

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

elCliked["dataset"]["nom"]

?

Si c'est le cas, peut-être je peux demander de tracer un cercle en svg à ce point précis.

[NoSmoking]

Bonjour,

Est-ce que je peux récupérer les coordonnées du premier point d'une forme définit par elCliked["dataset"]["nom"]?

oui elles sont dans l'attribut coords, pour les rectangles c'est le plus simple puisque avec x₀, y₀, x₁ ,y₁, x₀ correspond à left et y₀ à top.

Pour les polygones cela peut être différent l'ordre n'aillant pas plus d'importance que cela.

Pour les cercles c'est comme pour les rectangles.

Si c'est le cas, peut-être je peux demander de tracer un cercle en svg à ce point précis.

Pourquoi du SVG quand une simple <div> peut suffire ?

[bahh66]

Bonjour NoSmoking,
du coup ça donne quoi?

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
if (result === elClicked["dataset"]["nom"]) {
/* je définis un élément qui est associé à la map area["dataset"]["nom"]*/
 
let cerclereponse= document.getElementById("elClicked["dataset"]["nom"]").coords ;
 
 
    let win;
      win="Bravo, c'était bien "+elClicked["dataset"]["nom"];
        // diffère l'affichage de la boîte alert
    setTimeout(() => alert(win), 100);  
    compt += 10;
    document.getElementById("champDuPrompt").innerHTML = compt;
    // (1) suppression de l'écouteur
    elClicked.removeEventListener("click", fonctionSurClic);  // fonctionSurClic est le nom de la fonction appelée
  }

pour le tracé du cercle, tu me parles d'utiliser une div? Avec border-radius:50%?
Je pensais utiliser cerclereponse pour lui dire où le tracer.

[NoSmoking]

du coup ça donne quoi?

Ça donne quoi quoi ?

• Tu récupères l'élément <area> qui t'intéresse :

Code :

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

const elemArea = document.getElementById("id-area");

..grand classique mais d'autres méthodes peuvent être utilisées.

• Tu récupères la valeur de l'attribut coords :

Code :

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

const strCoords = elemArea.getAttribute("coords");

... la méthode getAttribute() va te retourner une String

• Tu converties cette String en Array :

Code :

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

const tabCoords = strCoords.split(",");

... on utilise la méthode classique split().

• Enfin les positions left et top sont aux indices 0 et 1 de ton tableau :

Code :

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

1
2
const left = tabCoords[0];
const top = tabCoords[1];

... aux restrictions prêtes que j'ai déjà indiquées.

• Il ne te reste plus qu'a créer et à positionner une <div> à cette position :

Code :

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

1
2
3
4
5
6
const elCircle = document.createElement("DIV");
elCircle.style.left = left + "px";     // il faut ajouter l'unité pour utiliser pour style 
elCircle.style.top = top + "px";
elCircle.style.position = "absolute";  // pour qu'il puisse être correctement placé
// et enfin ajout au parent prévu
elementDestination.append(elCircle)

Voilà qu devrait te permettre de poursuivre.

Nota : pour tout ce qui est cosmétique, border, color..., tu peux passer par l'ajout d'une classe CSS.

[bahh66]

Ça donne quoi quoi ?

je pensais être clair, ça donne quoi était pour le code qui était en dessous du coup.

J'ai essayé d'utiliser les codes que tu as super bien expliqué.
Mais il y a quelque chose que je ne comprends quand même pas.

Tu récupères les coordonnées de l'area (id-area doit être remplacé par le nom de l'area, non?) et tu les mets dans un tableau.
Tu crées une div à cette position.

Mais tout ceci tu le fais à quel moment, uniquement quand la bonne réponse est donnée ou n'importe quand? Du coup je l'ai mis dans

Code :

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

if (result === elClicked["dataset"]["nom"]) {

mais ça m'a l'air pas à sa place
Je me dis aussi qu'il faudrait que la div soit plutot dans la fonction setStateImageFond, vu que le cercle ne s'affiche que sur l'image en noir et blanc normalement?