Compteur de point jeu Jquery
Résolu
jess-rob
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
SKYMWebDev Messages postés 162 Date d'inscription Statut Membre Dernière intervention -
SKYMWebDev Messages postés 162 Date d'inscription Statut Membre Dernière intervention -
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.
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
- Compteur électrique - Guide
- Test performance pc - Guide
- Test disque dur - Télécharger - Informations & Diagnostic
- Test steam deck oled - Guide
- Test composant pc - Guide
2 réponses
Bonjour,
Tu pourrais faire un truc
Puis afficher la variable pts après...
Tu pourrais faire un truc
var pts = "0";
$('.monstre')on('click', function() {
pts = pts + 1;
$(this).hide();
});
Puis afficher la variable pts après...
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>
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.
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.
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".
Je cherche à faire cela depuis plus de 2 semaines mais je ne trouve rien qui fonctionne.