Sujet Précédent Sujet Suivant

Compteur de point jeu Jquery

Résolu/Fermé
jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 - 3 déc. 2016 à 19:47
SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 - 4 déc. 2016 à 13:07
Bonjour,
je suis débutante en Java Script. Je dois réaliser un jeu interactif et là je bloque sur un point normalement simple.

Le but de mon jeu et de cliquer sur tout les carrés (ils bougent).

Le problème est que je voudrais afficher un compteur qui calcul les points à chaque fois que l'utilisateur clique sur un carré. Mais je n'y arrive pas ...

Quelqu'un pourrait-il m'aider s'il vous plait?

PS: j'ai joint mon code ci dessous.



A voir également:

2 réponses

Réponse 1 / 2
SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 173
Modifié par SKYMWebDev le 3/12/2016 à 20:11
Bonjour,
Tu pourrais faire un truc 
var pts = "0";
$('.monstre')on('click', function() {
pts = pts + 1;
$(this).hide();
});

Puis afficher la variable pts après...
0
jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
3 déc. 2016 à 20:19
Merci pour votre aide tout d'abord.
Alors je viens de rajouter votre code à mon fichier .js mais je ne vois aucun changements. Et je ne suis pas sûr d'avoir bien compris "l'histoire de variable à afficher après".
0
SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 173 > jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
Modifié par SKYMWebDev le 4/12/2016 à 10:48
Il faut ensuite afficher la variable qui stocke le nbr de pts (sur la page avec le jeu) un truc du genre : 
<script type="text/javascript">document.write(pts);</script>
0
jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 > SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
4 déc. 2016 à 11:03
Merci mais cette manipulation me bloque mon jeu et cela ne marche pas.
Je cherche à faire cela depuis plus de 2 semaines mais je ne trouve rien qui fonctionne.
0
Réponse 2 / 2
SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 173
Modifié par SKYMWebDev le 4/12/2016 à 11:33
J'ai trouvé mieux ! 
<!DOCTYPE html>
<html>
<head>
 <title>Jeu</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <style type="text/css">
  .monstre {
   position:absolute;
   height:30px; 
   width:30px; 
   background-color:#CC0000;
  }
 </style>
 <script type="text/javascript">
  $(document).ready(function(){
   var width = $(window).width();
   var pts = 0;
   $('.monstre').on('click', function(){
    pts = pts + 1;
    document.getElementById('affichage').innerHTML = pts;
    $(this).hide();
   });
   setInterval(function(){
    $('.monstre').each(function(){
     $(this).animate({
      top: Math.floor((Math.random() * 500) + 1),
      left: Math.floor((Math.random() * width) + 1)
     }, 2000);
    });
   }, 2000);
  });
 </script>
</head>
<body>
<div>Vous avez <span id="affichage">0</span> points !
</div>
<div class="monstre carre1" style="left:145px; top:70px"> </div>
<div class="monstre carre2" style="left:245px; top:27px"> </div>
<div class="monstre carre3" style="left:345px; top:30px"> </div>
<div class="monstre carre4" style="left:445px; top:40px"> </div>
<div class="monstre carre5" style="left:545px; top:570px"> </div>
<div class="monstre carre6" style="left:645px; top:60px"> </div>
<div class="monstre carre7" style="left:745px; top:70px"> </div>
<div class="monstre carre8" style="left:845px; top:870px"> </div>
<div class="monstre carre9" style="left:945px; top:70px"> </div>
<div class="monstre carre10" style="left:1045px; top:170px"> </div>
</body>
</html>
0
jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
4 déc. 2016 à 11:32
OH merci vous êtes mon sauveur, ça fonctionne!!! :)
Et si je veux rajouter à la fin bravo vous avez gagner il faut que je créer une alerte du style :
if (pts == 7)
alert("tu as gangé")

?
0
SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 173 > jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
Modifié par SKYMWebDev le 4/12/2016 à 12:13
La seule façon pour que ca fonctionne chez moi c'est ca : 
$('.monstre').on('click', function(){
     pts = pts + 1;
     //Mettre ça dans le onClick() !
     if (pts == 10) {
     alert('Félicitation tu à tué tout les monstres !');
     window.location.reload();
}
document.getElementById('affichage').innerHTML = pts;
     $(this).hide();
});
0
jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 > SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
4 déc. 2016 à 12:20
Alors moi j'ai juste rajouté if (pts==7) alert ("tu as gagné") après le code et cela fonctionne bien donc c'est cool . Merci :)
Par contre quand je veux mettre mon texte en couleur et modifier la police il y a seulement le chiffre qui se modifie quand je mets #affichage dans mon css et là j'avoue que je ne comprends pas du tout pourquoi.
0
SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 173 > jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
Modifié par SKYMWebDev le 4/12/2016 à 12:51
C'est normal, car le #affichage se trouve que a l'endroit du span, donc que le chiffre ...
Si tu veux changer la couleur de tous il faut faire : 
<div style="color:red;">Vous avez <span id="affichage">0</span> points !
</div>


Et n'oublie pas de marquer le sujet comme résolu ! ;)
0
jess-rob
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 > SKYMWebDev
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
4 déc. 2016 à 13:03
Merci beaucoup de m'avoir aidé :)
Oui pas de problème je vais le mettre tout de suite .
Merci encore .
0