hello,
je suis en train de faire un petit jeu en JS qui consiste a trouver les régions de france via une carte et une serie de questions.
Dans mon fichier html, je n ai que une suite d area pour creer des zones cliquable sur ma map et tout le reste ce fait en js.
La partie initialisation des variables et animations de la carte, ce fait comme ceci
ensuite, je veut que la question soit posée de facon aleatoire, donc j utilise un random et je pose ma question comme tel
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66 //on ajoute la classe overlay et tooltip à map $('.map').append('<div class="overlay">').append('<div class="tooltip"> lol </div>'); //on masque le tooltip au demarrage $('.map .tooltip').hide(); //liste des régions var regions =[ {name: 'Nord Pas de Calais', slug:'Nord Pas de Calais', result:1}, {name: 'Picardie', slug:'Picardie', result:2}, {name: 'Haute Normandie', slug:'Haute Normandie', result:3}, {name: 'Champagne Ardenne', slug:'Champagne Ardenne', result:4}, {name: 'Basse Normandie', slug:'Basse Normandie', result:5}, {name: 'Lorraine', slug:'Lorraine', result:6}, {name: 'Alsace', slug:'Alsace', result:7}, {name: 'Bretagne', slug:'Bretagne', result:8}, {name: 'Pays de la Loire', slug:'Pays de la loire', result:9}, {name: 'Centre', slug:'Centre', result:10}, {name: 'Bourgogne', slug:'Bourgogne', result:11}, {name: 'Franche-Comte', slug:'Franche-Comte', result:12}, {name: 'Rhone-Alpes', slug:'Rhone-Alpes', result:13}, {name: 'Auvergne', slug:'Auvergne', result:14}, {name: 'Limousin', slug:'Limousin', result:15}, {name: 'Poitou Charente', slug:'Poitou Charente', result:16}, {name: 'Aquitaine', slug:'Aquitaine', result:17}, {name: 'Midi Pyrenees', slug:'Midi Pyrennees', result:18}, {name: 'Languedoc Roussillon', slug:'Languedoc Roussillon', result:19}, {name: 'Paca', slug:'Paca', result:20}, {name: 'Corse', slug:'Corse', result:21}, {name: 'Ile de France', slug:'Ile de France', result:22}, ]; // array pour poser les questions var questions = regions; //tooltip qui suit la souris $(document).mousemove(function(e){ $(".map .tooltip").css({ top:e.pageY-30, left:e.pageX+30 }); }); //on passe sur une region $('.map area').mouseover(function(){ var index = $(this).index(); var left = -index*420 - 420; $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,1); $('.map .overlay').css({ backgroundPosition: left+"px 0px " }); }); //on sort de la region $('.map area').mouseout(function(){ $('.map .overlay').css({ backgroundPosition: "420px 0px" }); $('.map .tooltip').instop().fadeTo(500,0); });
Enfin, la partie centrale du jeu ce trouve ici
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 // nombre aleatoire entre 1 et 10 pour la question var ran = Math.floor((Math.random() * 21) + 1); //initialisation de la question var question = questions[ran].name; //question posée $(".question").html("le question est : ou se trouve la " + question + " ?"); var index;
Comme je ne veux pas qu une question ne soit posée 2 fois, je verifie si elle a déja était posée.
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
31
32
33
34
35
36
37
38
39
40
41
42
43 $('.map area').click(function(){ //l endroit ou l on clique index = $(this).index(); //bonne réponse var index_click = questions[ran].result; //comparaison entre le click et la question posée if(questions[index].result == index_click){ //on ajoute dans la liste la question qui vient d etre posee list.push(questions[ran].name); //boucle pour verification des elements de la liste for (var i=0; i<list.length; i++){ $(".click").html("liste vaut :" + list + "</br>"); } //random pour poser une question de maniere aleatoire ran = Math.floor((Math.random() * 21) + 1); //variable pour comparer si la question n a pas deja etait posee var compare = questions[ran].name; for (var i=0; i<21; i++){ //si la question a deja etait posee if(list[i] == compare){ $(".compare").html("la question a deja etait posee"); } else{ $(".question").html("le question est : ou se trouve la " + questions[ran].name + " ?"); } } } else{ $(".compare").html("Mauvaise reponse"); } });
Ma verification se passe bien puisqu il me dit que la question a déja etait posée.
Le problème, ce que je ne vois pas comment je peut faire pour qu il pose une autre question tout de suite derrière qui n a pas deja etait posée.
PS: pour ceux que cela interèsse, je vous mets le fichier avec mes sources. Se sera surement plus claire
merkiiiiii
Partager