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

Compteur de points blind test
Test performance pc - Guide
Test composant pc - Guide
Créer une carte avec des points - Guide
Test ram - Guide
Points de suite word - Guide

2 réponses

Réponse 1 / 2

SKYMWebDev Messages postés 162 Date d'inscription jeudi 10 novembre 2016 Statut Membre Dernière intervention 14 février 2018 174
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...

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".

SKYMWebDev Messages postés 162 Date d'inscription jeudi 10 novembre 2016 Statut Membre Dernière intervention 14 février 2018 174 > 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>

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 162 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.

Réponse 2 / 2

SKYMWebDev Messages postés 162 Date d'inscription jeudi 10 novembre 2016 Statut Membre Dernière intervention 14 février 2018 174
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>

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é")

?

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();
});

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.

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 ! ;)

Merci beaucoup de m'avoir aidé :)
Oui pas de problème je vais le mettre tout de suite .
Merci encore .

Discussions similaires

PXE-E61 : media test failure, check cable

Nuages de point avec abscisses différentes

Brancher un boitier DTI pour avoir la fibre

Tester une config

Dessiner avec son clavier et avec des lettres

Discussions similaires

Newsletters