Jeu des 7 erreurs

**CrasherSEP** · 05/06/2012, 13h35

SpaceFrog : Pour ce qui est de, une ou deux images, c'est n'importe... je devrai de toute façon créer les images...

Le schéma serait:

deux images : A et B
sur l'image B, des zones (les différences), qui lorsque je clique dessus, fait apparaître une croix, et change un compteur ou une phrase, du style : "Il ne te reste plus que 6 erreurs à trouver".

:-)

**SpaceFrog** · 05/06/2012, 13h41

la croix sur quelle image ?

et as tu deux images a me fournir en modèle ?

**Darkyl** · 05/06/2012, 14h09

Je maintiens qu'à chacun son métier et ses compétences. Ton projet (aussi simple soit-il) aurait pu intéresser un programmeur amateur (dans la partie projet/recrutement).

C'était une bonne occasion et une bonne vitrine, ainsi qu'un projet avec réel étique, mais bon, tu n'as peut-être pas le temps, c'est peut-être pressé (même si tu vas passé plus de temps à le faire, qu'à le faire faire)...

Si les bonnes occasions ne sont pas saisi, que reste-t-il au développeur amateur qui veux une vitrine?

Aprés je ne connais pas tes obligations, tes envies, ni ta hiérarchie...
Désolé de ma véhémence.

**CrasherSEP** · 05/06/2012, 14h17

Darkyl : tu as raison pour les métiers ! Je vais donc faire une demande, qui sait...

Ps : "Désolé de ma véhémence.", pas grave :-)

**CrasherSEP** · 05/06/2012, 14h21

La croix, sur l'image B (voir pièce jointe)

**Darkyl** · 05/06/2012, 14h22

Ca à l'air d'intéressé SpaceFrog...

**SpaceFrog** · 05/06/2012, 14h29

Si c'est pour la bonne cause ... pourquoi pas ...

Bref
Là tu envoies une seule image regroupant le modèle et la copie

as tu en réalité une seule image ou deux ?

**CrasherSEP** · 05/06/2012, 14h33

C'est comme tu veux, si je dois scinder, je scinderai...

Et encore merci pour votre aide :-)

**SpaceFrog** · 05/06/2012, 14h36

peu importe, le tout est de partir sur un choix que tu ne regretteras pas après ...

**Darkyl** · 05/06/2012, 14h37

SpaceFrog, à mon avis, programmé une lib du jeu des x erreurs ne doit pas être trés compliqué et c'est vrai que je n'en ai pas trouvé. Cela serai intéressant pour la maintenance.

Moi, j'ai pas trop le temps en ce moment, je galère déjà à essayer de décrocher des entretiens d'embauche, à finir mes projets persos et à m'amuser en même temps...

Mais je peux peut-être t'aider un peu (si le souhait de faire une petite lib générique se faisait sentir).

**CrasherSEP** · 05/06/2012, 14h39

Et bien alors partons sur deux images :-)

**SpaceFrog** · 05/06/2012, 14h52

tu peux me les renvoyer splittées ?

**CrasherSEP** · 05/06/2012, 15h04

Voici avec "3" erreurs (papillon de droite, ombre sur le visage du garçon et sourcil de la fille.

EDIT [Darkyl]:

et c'est vrai que je n'en ai pas trouvé

Juste... d'habitude, je trouve un code existant et j'essaye de le comprendre, et ensuite de le mettre à ma sauce, mais là effectivement, rien :-)

**SpaceFrog** · 05/06/2012, 16h19

Un code d'essai

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 1</title>
<style type="text/css">
.croix {
display:none;
}
area{ cursor:default;}
</style>
 
<script type="text/javascript">
//7 erreurs By SpaceFrog for SEP-pas-sprcier
//erreurs trouvées 
var found=[false, false, false]
 
//ajout de croix
function mark(coords,errnr){
tabcoords=coords.split(',') //recupération des coordonnées de l'area
//recupération des coordonnées d'origine de l'image
originX=+document.getElementById('copie').offsetLeft-10;
originY=+document.getElementById('copie').offsetTop-10;
 
//clonage de la croix
trouve=document.getElementById('croix').cloneNode(true)
//attribution des top et left + css
trouve.style.top=+tabcoords[1]+originY+"px";
trouve.style.left=+tabcoords[0]+originX+"px";
trouve.style.position="absolute";
trouve.style.zIndex=100
trouve.style.display="block"
document.body.appendChild(trouve) // ajout de l'image
 
//ajout d'une erreur trouvée 
found[errnr-1]=true
var solde=0
for(i=0;i<found.length;i++){
 (!found[i]) && solde++;
 }
//affichage du solde
mess=(solde>0)?'Il reste '+solde+' erreur(s)': 'Bravo !'
document.getElementById('res').innerHTML=mess
}
</script>
</head>
<body>
<img src="pics/croix.png" id="croix" class="croix"/>
<img id="modele" src="pics/imageA.jpg" />
 <map name="mymap">
 <area shape="circle" coords="227, 146, 20" onclick="mark(this.coords,1);return false;">
 <area shape="circle" coords="278, 361, 20" onclick="mark(this.coords,2);return false;">
 <area shape="circle" coords="19, 282, 20" onclick="mark(this.coords,3);return false;"></map>
 <img id="copie" src="pics/imageB.jpg" usemap="#mymap" /><br/>
 <span id="res"></span>
</body>
</html>

met les images dans un repertoire pics/

en pièce jointe la croix ...

**CrasherSEP** · 05/06/2012, 16h38

SUPER !!!!!

Merci de ma part, merci de la part des enfants qui vont y jouer et encore merci... :-)

Ps : Que puis-je faire pour toi ?

**SpaceFrog** · 05/06/2012, 16h42

Rien du tout !
C'est pour la bonne cause

Laisse juste la première ligne dans le commentaire

Si tu as besoin d'aide pour modifier et adapter selon les images et le nombre d'erreurs, tu sais ou me trouver

**CrasherSEP** · 05/06/2012, 16h54

C'est super gentil, encore merci :-)

**SpaceFrog** · 06/06/2012, 09h59

Tu me diras si tu as des retours ou suggestions pour améliorer...

**CrasherSEP** · 06/06/2012, 10h39

Salut,

J'ai un petit problème au niveau du compteur, test mon exemple, le compteur varie avec les erreurs trouvées ?

Tu peux déjà voir le premier (sur le site , partie jeux) :-)

Ps : Si tu as aussi des améliorations...

J'ai aussi un très petit problème au niveau de la croix, cela fonctionne très bien tant que je reste avec des cercles, dans mon premier exemple, j'ai supprimé le mot 'Myéland', et si je part d'un rectangle, la croix ne se place pas juste au milieu. Mais bon, pas vraiment grave :-)

Encore merci :-)

**SpaceFrog** · 06/06/2012, 10h59

Pour ce qui est de la forme des areas et de la position de la croix, la raison en est simple ...

un area circle prend 3 integers

Code :

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

coords="125, 56, 20"

les deux premiers étant l'offset x et y (en pixels) du centre du cercle par rapport au point 0,0 de l'image (coin supérieur gauche de l'image)
le troisième est le rayon en pixels du cercle (en vert sur la fig.)

un area rectangle en prend 4
le deux premier sont les offset du coin superieur gauche du rectangle
les deux second sont les offset du coin inférieur droit du rectangle
(cf point rouges sur l'image )

Au départ dans mon premier exemple je n'utilisais que des area circulaires de diamètre fixe.
Maintenant on peut calculer par différence la position a donner à la croix pour qu'elle se positionne au centre de l'area quelque soit ses dimensions et son type cercle ou rectangle ...
poru coller la crois

Jeu des 7 erreurs

JavaScript

Discussions similaires

Partager

Partager