Compteur en tout genre
Nirsab Le 1 janvier 2022 à 15:45 (Édité le 1 janvier 2022 à 15:47)
Et bien le bonjour à tous.
Je me suis mis à la programmation ces derniers temps et je dois avouer qu'en regardant les vidéos de PrimeFX sur YT, j'ai été conquis par ses explication claires et simples, alors bravo et merci !!
Je suis en train de concevoir un jeu en JS (avec l'aide d'un ami). Voici ce qui a déjè été fait. Quelqu'un peut-il m'aider à voir ce qui cloche dans la partie compteur de manche, svp? Et bien-sûr je suis ouvert à toute aide, idées...:) Il y a plein de choses que je dois rajouter et que je ne maitrise pas encore...
Desolé, je n'arrive pas à mettre les balises de codes correctement... Avec mes remerciements 😉
`<!DOCTYPE html> <html> <head> <title>Questions pour un Champion</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="alert alert-danger" role="alert" style="text-align: center;font-weight: bold;"><h1>MASTER DUEL</h1></div>
</div>
</div>
<div class="row">
<div class="col">
<button id="personnageAleatoires" class="btn btn-info" style="background-color:royalblue;" type="button"><i class="fas fa-users"></i> Personnage</button>
<td><div id="togg1"></div></td>
<br/><br/>
<button id="actionLieu" class="btn btn-info" type="button"><i class="fas fa-globe-europe"></i> Action / Lieu</button>
<br/><br/>
<td><div id="togg2"></div></td>
<br/>
<button id="pauseChrono" class="btn btn-info pause" style="background-color:slategrey;" type="button"><i class="fas fa-pause"></i></i></i> Pause Chrono</button>
<!--Permet de mettre le chrono en pause le temps d'arbitrer si besoin-->
</div>
<div class="alert alert-danger" role="alert" style="text-align:center;">
<b>Manche :</b> <!--Compteur du nombre de manches. Arrêt du jeu au bout de 3 manches-->
</div>
<div class="jumbotron" style="text-align:center;font-size:2em;font-weight:bold">
<button id="mancheButton" class="btn btn-info manche" value="1" style="background-color:mediumvioletred;" type="button"><i class="fas fa-plus"></i></button>
<div id="manche">0</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="alert alert-danger" role="alert" style="text-align:center;">
<b>Temps restant :</b>
</div>
<div class="jumbotron" style="text-align:center;font-size:2em;font-weight:bold">
<span id="countdown_sec">0 secondes</span>
</div>
</div>
<div class="row">
<div class="col">
<div class="alert alert-danger" role="alert" style="text-align:center;">
<b>Score actuel :</b>
</div>
<div class="jumbotron" style="text-align:center;font-size:2em;font-weight:bold">
<span id="scoreencours">0</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<table class="table table-striped table-bordered">
<thead>
<tr class="table-success">
<th>ÉQUIPES QUALIFIÉES</th>
<th>SCORE</th>
<th>COMPTEUR</th>
</tr>
</thead>
<tbody>
<tr>
<td>1ère Equipe Qualifiée</td>
<td><span id="compteur1"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="1|1" style="background-color:blue;"type="button"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="1|2" style="background-color:green;" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="1|4" style="background-color:yellowgreen;" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="1|6" style="background-color:orange;" type="button"><i class="fas fa-plus"></i> 6</button>
<button class="btn btn-danger compteur" value="1|-1" style="background-color:red;" type="button"><i class="fab fa-creative-commons-zero"></i>-1</button>
</td>
</tr>
<tr>
<td>2ème Equipe Qualifiée</td>
<td><span id="compteur2"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="2|1" style="background-color:blue;"type="button"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="2|2" style="background-color:green;" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="2|4" style="background-color:yellowgreen;" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="2|6" style="background-color:orange;" type="button"><i class="fas fa-plus"></i> 6</button>
<button class="btn btn-danger compteur" value="2|-1" style="background-color:red;" type="button"><i class="fab fa-creative-commons-zero"></i>-1</button>
</td>
</tr>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
/* let togg1 = document.getElementById("togg1");
let togg2 = document.getElementById("togg2");
let personnageAleatoires = document.getElementById("personnageAleatoires");
let actionLieu = document.getElementById("actionLieu");
togg1.addEventListener("click", () => {
if(getComputedStyle(personnageAleatoires).display != "none"){
personnageAleatoires.style.display = "none";
} else {
personnageAleatoires.style.display = "block";
}
})
function togg(){
if(getComputedStyle(actionLieu).display != "none"){
actionLieu.style.display = "none";
} else {
actionLieu.style.display = "block";
}
};
togg2.onclick = togg;*/
/*if ($secondes <= 120 && >= 91) {
$('#scoreencours' + $val[0]).text('+6');} else if ($secondes <= 90 && >= 61) { $('#scoreencours' + $val[0]).text('+4'); } else if ($secondes <= 60 && >= 31) { $('#scoreencours' + $val[0]).text('+2'); } else if ($secondes <= 30 && >= 0) { $('#scoreencours' + $val[0]).text('+1'); }; */
$('mancheButton').on('click', function (e) { e.preventDefault(); $val = $(this).attr('value'); $champ = '#manche' + $val[0]; $nb_manche = parseInt($($champ).text()) + parseInt($val[1]); if ($nb_manche = 3) { $('#manche' + $val[0]).text($nb_manche); } else { $('#manche' + $val[0]).text('FIN DE LA PARTIE') } });
$('.compteur').on('click', function (e) { e.preventDefault(); $val = $(this).attr('value').split('|'); $champ = '#compteur' + $val[0]; $new_score = parseInt($($champ).text()) + parseInt($val[1]); if ($new_score <= 17) { $('#compteur' + $val[0]).text($new_score); } else { $('#compteur' + $val[0]).text('SCORE MAXIMUM ATTEINT'); }
})});
function actionLieu() { var min = 0; var max = 50; random = Math.floor(Math.random() (max - min)) + min; // cherche un nombre aléatoire aleatoire = Math.floor(Math.random() (max - min)) + min; // cherche un nombre aléatoire if ($.inArray(parseInt(aleatoire), actionLieu) === -1) { // si le numéro de l'action ne figure pas dans le tableau des actions déjà proposées actionLieu.push(aleatoire); // rempli le tableau des actions déjà sortis } }
var personnage = [
[0, 'Donald'],
[1, 'Riri'],
[2, 'Fifi'],
[3, 'Loulou'],
[4, 'Dingo'],
];
var actionLieu = [
[0, 'A la maison'],
[1, 'Au cimetière'],
[2, 'AU cinoche'],
[3, 'Au resto'],];
</script>
</body></html>
`
