Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1289 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Réglé] Images à gratter

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Réglé] Images à gratter

n°2058237
ingeniomat​ique
Posté le 20-02-2011 à 22:48:41  profilanswer
 

Bonjour à tous,
 
Dans le cadre d'un jeu, j'ai plusieurs images à gratter comportant différents gains.
 
Voici mon code :
 

Code :
  1. <script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
  2. <script type="text/javascript" src="js/jquery.jScratchcard.js" ></script>
  3. <script type="text/javascript">
  4. $(window).load(function() {
  5.  $("#image1" ).jScratchcard({
  6.   opacity: 0.9,
  7.   color: '#D4A017',
  8.   stepx: 24,
  9.   stepy: 25,
  10.   mousedown: false
  11.  });
  12.  $("#image2" ).jScratchcard({
  13.   opacity: 0.9,
  14.   color: '#D4A017',
  15.   stepx: 24,
  16.   stepy: 25,
  17.   mousedown: false
  18.  });
  19.  $("#image3" ).jScratchcard({
  20.   opacity: 0.9,
  21.   color: '#D4A017',
  22.   stepx: 24,
  23.   stepy: 25,
  24.   mousedown: false
  25.  });
  26. });
  27. </script>


 
Le souci est que les images EN DESSOUS de la zone à gratter s'affichent une seconde avant que la zone à gratter n'apparaissent.
Il n'y a donc plus aucun suspense ni intérêt à gratter.
=> Comment résoudre ce souci ?
 
Par ailleurs je souhaiterais afficher une alerte dès lors qu'environ 80 % de la zone à gratter a été grattée.
=> Savez vous comment faire ?
 
Merci beaucoup par avance,
Antoine


Message édité par ingeniomatique le 06-03-2011 à 17:36:16
mood
Publicité
Posté le 20-02-2011 à 22:48:41  profilanswer
 

n°2058265
rengzehn
Posté le 21-02-2011 à 08:09:33  profilanswer
 

Pas très clair ton truc :)
 
C'est quoi qui est _sur_ l'image à gratter ? une autre image ? une div ?
 
tu peux jouer avec la propriété display de l'image de fond :
 
var temp = document.getElementById("imagedefond" );
temp.style.display = "inline";
 
ou  
 
temp.style.display = "none";
 
et ainsi tu choisis dans ton script à quel moment l'afficher.
 
si tu as plusieurs images qui doivent s'afficher dans une ordre tu peux p-e utiliser la fonction onload:
 
img1.onload = function() {
img2.style.display="inline";
}
 
 
 
 
 

n°2058295
ingeniomat​ique
Posté le 21-02-2011 à 10:22:40  profilanswer
 

En fait il y a :
- Les images avec les gains (en dessous)
- Les images pixelisées qui cachent les gains (au dessus) => que l'utilisateur "gratte" en passant la souris grâce à jquery
 
J'ai trouvé comment afficher les images avec les gains plus tard (en changeant leur SRC au bout de quelques secondes). Car le temp.style.display ne donnait pas l'effet escompté.
 
Par contre il me faudrait savoir comment créer une aler ("" ); pour l'utilisateur, affichant un texte, dès lors qu'il a dévoilé (gratté) 80 % de la zone grattable sur les images ?
 
Merci par avance de votre aide.

n°2058849
ingeniomat​ique
Posté le 22-02-2011 à 21:42:21  profilanswer
 

Je me permets un petit up... :(

n°2059938
ingeniomat​ique
Posté le 28-02-2011 à 00:46:05  profilanswer
 

Presque une semaine plus tard, j'ose une dernière relance avant de cloturer le post. Merci beaucoup de votre aide.

n°2059943
cetplus
Wazard dans l'ombre
Posté le 28-02-2011 à 08:20:08  profilanswer
 

Salut.
Si tu veux afficher une alerte qu'en c'est à 80%, il faudrait faire un input contenant la valeur signaler.
Quand la variable input est égale ou supérieur à 80 : une alerte.
Tu fais +1 ou +10 à chaque mouvement de "grattage" et tu obtiens ton magnifique gratte-gratte.
Je suppose que tu utilises OnMouseOver.
Tu appelles ta fonction gratti(); contenant tes fonctions Jquery et en même temps tu vérifie les chiffres.
 
Bonne chance !
 
ps : Si tu n'y arrive pas, je t'aiderais.

n°2060430
ingeniomat​ique
Posté le 01-03-2011 à 15:17:22  profilanswer
 

J'accepte effectivement ton aide car je suis un peu perdu... de quoi as-tu besoin ? Merci !!

n°2060776
cetplus
Wazard dans l'ombre
Posté le 03-03-2011 à 06:41:25  profilanswer
 

Il me faudrait ton projet au complet.
Les images, les scripts. Si c'était possible.
Tu le met sur http://megaupload.com/ et tu me passes le lien.
C'est plus simple avec l'aspect graphique.

n°2060790
ingeniomat​ique
Posté le 03-03-2011 à 08:55:37  profilanswer
 

Bonjour,
J'ai tout mis sur ce lien : http://www.tromph.com/test.php
La page est complète, avec les scripts et tout...
Manque plus que cette fameuse alerte :)
Merci par avance de ton aide.
Antoine

n°2061060
cetplus
Wazard dans l'ombre
Posté le 04-03-2011 à 07:37:49  profilanswer
 

Oui, sauf que si je t'ai demandé le script dans une archive c'est bien pour avoir LA TOTALITÉ des images.
Comme j'ai gagné (^^ 2 écus pour moi) avec la girafe; hé bien elle s'y trouve résidente (j'ai fait enregistrer > sous).
Voici le script que j'ai réalisé avec ce que tu m'as donné :
http://www.megaupload.com/?d=G5YWL2X0

 

La modification ce trouve dans jquery.js et le div "compteur" juste au dessus du div principale.
En tout cas ça fonctionne à 80 carrés grattés.

 

Petit bug que j'ai remarqué; tes accents sont remplacé par des <?>.
En php tu insères ceci en entête :
<?php
header("Content-Type: text/html; charset=iso-8859-15" );
[...]
?>

 

En HTML tu insères ceci en entête :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Bonne chance par la suite !


Message édité par cetplus le 04-03-2011 à 23:12:53
mood
Publicité
Posté le 04-03-2011 à 07:37:49  profilanswer
 

n°2061147
ingeniomat​ique
Posté le 04-03-2011 à 12:30:13  profilanswer
 

Merci beaucoup, le départ est très bon, j'ai bien le message qui s'affiche à 80 % de grattage !!! :) Parfait.
 
Cependant :
1- Lorsqu'on continue à gratter, à chaque petit carré gratté, l'alerte s'affiche à nouveau. Il faudrait qu'elle ne s'affiche qu'une seule fois.
2- Le message de l'alerte sera au final différent selon le gain (par exemple "perdu", ou "gagné 2 écus"...etc). J'aimerais utiliser PHP, dans mon test.php pour faire varier cette alerte.
 
Si tu as quelques minutes supplémentaires, merci par avance pour ton éclairage :)
 
Antoine

Message cité 1 fois
n°2061272
cetplus
Wazard dans l'ombre
Posté le 04-03-2011 à 23:06:13  profilanswer
 

ingeniomatique a écrit :

Merci beaucoup, le départ est très bon, j'ai bien le message qui s'affiche à 80 % de grattage !!! :) Parfait.

 

Cependant :
1- Lorsqu'on continue à gratter, à chaque petit carré gratté, l'alerte s'affiche à nouveau. Il faudrait qu'elle ne s'affiche qu'une seule fois.
2- Le message de l'alerte sera au final différent selon le gain (par exemple "perdu", ou "gagné 2 écus"...etc). J'aimerais utiliser PHP, dans mon test.php pour faire varier cette alerte.

 

Si tu as quelques minutes supplémentaires, merci par avance pour ton éclairage :)

 

Antoine

 

1 : Tu modifie juste n > 80 par n == 80.

 

Voici le script à modifier dans jquery.js :

Code :
  1. var dc=document.getElementById("compteur" );
  2.       var n=dc.innerHTML;
  3.       n = Number(n) + Number(1);
  4.       dc.innerHTML = n;
  5.       if(n==80)
  6.       {
  7.       var text="Vos 3 images ont \352tes gratt\351 !";
  8.       alert(text);
  9.       }
 

2: Tu génères tes images avec le php ? (Je suppose que oui)
Mais faudrait que tu me montres le code.

 

J'espère t'avoir renseigné.
Cordialement.


Message édité par cetplus le 04-03-2011 à 23:21:20
n°2061283
ingeniomat​ique
Posté le 05-03-2011 à 09:00:54  profilanswer
 

Merci !!!
Pour le 1) c'est très clair. J'aurais dû y penser.
 
Pour le 2) voici mon code pour affichage des images :
 

Code :
  1. $nb=rand(0,99);
  2.   if ($nb==99){
  3.   $c1=54; $c2=54; $c3=54; $gain=50;
  4.   }elseif ($nb<99 AND $nb>=93){
  5.   $c1=55; $c2=55; $c3=55; $gain=10;
  6.   }elseif ($nb<93 AND $nb>=80){
  7.   $c1=58; $c2=58; $c3=58; $gain=3;
  8.   }elseif ($nb<80 AND $nb>=63){
  9.   $c1=57; $c2=57; $c3=57; $gain=2;
  10.   }elseif ($nb<63){
  11.   $c1=rand(1,4); $c2=rand(1,4); if ($c1>$c2){ $c3=$c1-1; }elseif ($c2>$c1){ $c3=$c2-1; }elseif ($c2==$c1 AND $c2>2){ $c3=$c2-1; }else{ $c3=4; }
  12.   if ($c1==1){ $c1=54; }elseif ($c1==2){ $c1=55; }elseif ($c1==3){ $c1=58; }elseif ($c1==4){ $c1=57; }
  13.   if ($c2==1){ $c2=54; }elseif ($c2==2){ $c2=55; }elseif ($c2==3){ $c2=58; }elseif ($c2==4){ $c2=57; }
  14.   if ($c3==1){ $c3=54; }elseif ($c3==2){ $c3=55; }elseif ($c3==3){ $c3=58; }elseif ($c3==4){ $c3=57; }
  15.   $gain=0; }
  17. <script language="javascript">
  18. function Picture2()
  19. { var i1 = document.getElementById("image1" );
  20. var i2 = document.getElementById("image2" );
  21. var i3 = document.getElementById("image3" );
  22. i1.src="Images/Jeux/<? echo "$c1"; ?>-Card.png";
  23. i2.src="Images/Jeux/<? echo "$c2"; ?>-Card.png";
  24. i3.src="Images/Jeux/<? echo "$c3"; ?>-Card.png";
  25. }
  26. </script>
  28.           <tr>
  29.             <td width="186">&nbsp;</td>
  30.             <td width="106"><img src="Images/Jeux/black.png" width="97" height="203" id="image1"></td>
  31.             <td width="105"><img src="Images/Jeux/black.png" width="97" height="203" id="image2"></td>
  32.             <td><img src="Images/Jeux/black.png" width="97" height="203" id="image3"></td>
  33.             </tr>


 
Il y a tout un script pour que les images n'apparaissent que quelques secondes après l'ouverture de la page (et remplacent black.png) pour ne pas que l'utilisateur les voient. Mais cela n'est pas utile dans notre cas ! :)
 
En fait, tu constateras que chaque image a une probabilité différente (en PHP) d'arriver.
 
L'idéal serait d'associer ces mêmes probabilités à un message.
 
Par exemple :

Code :
  1. if ($c1==55 AND $c2==55 AND $c3==55){ $messagealert="Gagné 3 écus ! Car 3 buffles reconnus."; }


 
Et ainsi de suite.
 
Merci de ton aide.

n°2061376
cetplus
Wazard dans l'ombre
Posté le 06-03-2011 à 00:22:01  profilanswer
 

Salut.
Voilà ce que j'ai pu concocter // Vérifie si ça marche bien.

 
Code :
  1. // Script 1
  2. $nb=rand(0,99);
  3.   if ($nb==99){
  4.   $c1=54; $c2=54; $c3=54; $gain=50;
  5.   }elseif ($nb<99 AND $nb>=93){
  6.   $c1=55; $c2=55; $c3=55; $gain=10;
  7.   }elseif ($nb<93 AND $nb>=80){
  8.   $c1=58; $c2=58; $c3=58; $gain=3;
  9.   }elseif ($nb<80 AND $nb>=63){
  10.   $c1=57; $c2=57; $c3=57; $gain=2;
  11.   }elseif ($nb<63){
  12.   $c1=rand(1,4); $c2=rand(1,4); if ($c1>$c2){ $c3=$c1-1; }elseif ($c2>$c1){ $c3=$c2-1; }elseif ($c2==$c1 AND $c2>2){ $c3=$c2-1; }else{ $c3=4; }
  13.   if ($c1==54 AND $c2==54 AND $c3==54){ $messagealert = "Gagné 2 écus ! Car 3 girafes reconnus."; }
  14.   if ($c1==55 AND $c2==55 AND $c3==55){ $messagealert = "Gagné 3 écus ! Car 3 crocodiles reconnus."; }
  15.   if ($c1==57 AND $c2==57 AND $c3==57){ $messagealert = "Gagné 10 écus ! Car 3 zèbres reconnus."; }
  16.   if ($c1==58 AND $c2==58 AND $c3==58){ $messagealert = "Gagné 50 écus ! Car 3 lions reconnus."; }
  17.   if ($c1==1){ $c1=54; }elseif ($c1==2){ $c1=55; }elseif ($c1==3){ $c1=58; }elseif ($c1==4){ $c1=57; }
  18.   if ($c2==1){ $c2=54; }elseif ($c2==2){ $c2=55; }elseif ($c2==3){ $c2=58; }elseif ($c2==4){ $c2=57; }
  19.   if ($c3==1){ $c3=54; }elseif ($c3==2){ $c3=55; }elseif ($c3==3){ $c3=58; }elseif ($c3==4){ $c3=57; }
  20.   $gain=0; }
  23. // Script 2
  24. <script language="javascript">
  25. function Picture2()
  26. { var i1 = document.getElementById("image1" );
  27. var i2 = document.getElementById("image2" );
  28. var i3 = document.getElementById("image3" );
  29. i1.src="Images/Jeux/<? echo "$c1"; ?>-Card.png";
  30. i2.src="Images/Jeux/<? echo "$c2"; ?>-Card.png";
  31. i3.src="Images/Jeux/<? echo "$c3"; ?>-Card.png";
  32. }
  33. function terminal(){
  34. var text = "<? echo "$messagealert"; ?>";
  35. alert(text);
  36. }
  37. </script>
  40. // Script 3  (Jquery.js)
  41. var dc=document.getElementById("compteur" );
  42. var n=dc.innerHTML;
  43. n = Number(n) + Number(1);
  44. dc.innerHTML = n;
  45. if(n==80) terminal();
 

@++


Message édité par cetplus le 06-03-2011 à 00:24:10
n°2061464
ingeniomat​ique
Posté le 06-03-2011 à 17:35:54  profilanswer
 

Encore merci BEAUCOUP. Cela fonctionne comme sur des roulettes :)

n°2061551
cetplus
Wazard dans l'ombre
Posté le 07-03-2011 à 08:53:44  profilanswer
 

De rien. Je suis content d'avoir pu aider quelqu'un. :)
Ps : Je peux essayer ton jeu maintenant ?


Message édité par cetplus le 07-03-2011 à 08:55:49
n°2061562
ingeniomat​ique
Posté le 07-03-2011 à 09:51:26  profilanswer
 

Le jeu sort dans quelques jours / 1 semaine environ : tromph.com
Si tu veux le tester en avant première (avec encore quelques bugs) dès demain, il me faut ton mail :)

n°2061781
ingeniomat​ique
Posté le 08-03-2011 à 09:04:41  profilanswer
 

Mail envoyé :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Réglé] Images à gratter

 

Sujets relatifs
[XML] Problème de dimension d'images[VBA] Adapter la taille de plusieurs images pour impression
Pas d'affichage d'images sur firefox mais oui sur les autres browsersPas d'affichage des images sur internet explorer mais oui sur firefox
Scan d'un dossier image, lecture des images une par une en boucleHTML/CSS: Problème - menu avec des images
Moteur de recherche affichant les images des resultatsAS3 = probleme indicateur chargement d'images multiple
Demande de modification d'imagestraitement d'images / computer vision ?
Plus de sujets relatifs à : [Réglé] Images à gratter

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.113 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR