[Réglé] Images à gratter

Images à gratter [Réglé] - HTML/CSS - Programmation

Marsh Posté le 20-02-2011 à 22:48:41    

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
Reply

Marsh Posté le 20-02-2011 à 22:48:41   

Reply

Marsh Posté le 21-02-2011 à 08:09:33    

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";
}
 
 
 
 
 

Reply

Marsh Posté le 21-02-2011 à 10:22:40    

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.

Reply

Marsh Posté le 22-02-2011 à 21:42:21    

Je me permets un petit up... :(

Reply

Marsh Posté le 28-02-2011 à 00:46:05    

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

Reply

Marsh Posté le 28-02-2011 à 08:20:08    

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.

Reply

Marsh Posté le 01-03-2011 à 15:17:22    

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

Reply

Marsh Posté le 03-03-2011 à 06:41:25    

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.

Reply

Marsh Posté le 03-03-2011 à 08:55:37    

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

Reply

Marsh Posté le 04-03-2011 à 07:37:49    

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
Reply

Marsh Posté le 04-03-2011 à 07:37:49   

Reply

Marsh Posté le 04-03-2011 à 12:30:13    

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
Reply

Marsh Posté le 04-03-2011 à 23:06:13    

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
Reply

Marsh Posté le 05-03-2011 à 09:00:54    

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.

Reply

Marsh Posté le 06-03-2011 à 00:22:01    

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
Reply

Marsh Posté le 06-03-2011 à 17:35:54    

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

Reply

Marsh Posté le 07-03-2011 à 08:53:44    

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
Reply

Marsh Posté le 07-03-2011 à 09:51:26    

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 :)

Reply

Marsh Posté le 08-03-2011 à 09:04:41    

Mail envoyé :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed