Compteur de point jeu Jquery [Résolu/Fermé]

Signaler
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 -
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 -
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.



2 réponses

Réponse 1 / 2
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 142
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...
Signaler
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
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".
Signaler
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 142 >
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
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>
Signaler
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 >
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
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.
Réponse 2 / 2
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 142
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>
Afficher les 6 commentaires
Signaler
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 142 >
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
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();
});
Signaler
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 >
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
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.
Signaler
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 142 >
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
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 ! ;)
Signaler
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
 >
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
Merci beaucoup de m'avoir aidé :)
Oui pas de problème je vais le mettre tout de suite .
Merci encore .
Signaler
Messages postés
160
Date d'inscription
jeudi 10 novembre 2016
Statut
Membre
Dernière intervention
14 février 2018
 142 >
Messages postés
6
Date d'inscription
samedi 3 décembre 2016
Statut
Membre
Dernière intervention
4 décembre 2016
De rien ! ;)
Posez votre question