Bonjour à tous.
Je suis nouveau ici (et français) et débutant dans le dév, avec quelques notions, donc je ne suis pas sûr de demander de l'aide au bon endroit...
J'ai conçu ce code, mais depuis que j'ai rajouté l'une ou l'autre fonctionnalité, il ne fonctionne plus....
Quelqu'un peut-il m'aider, sachant que je vais suivre une formation Développeur Web dans 2 mois, svp ?
Merci d'avance pour vos tuyaux :)
Voici mon code:
<!DOCTYPE html>
<html>
<head>
<title>Questions pour un Champion</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
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 style="position:center;">
<div class="container-fluid">
<div class="row">
<div class="col">
<div
class="alert alert-danger"
role="alert"
style="text-align: center; font-weight: bold">
<button
class="btn btn-warning"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse2"
aria-expanded="false"
aria-controls="collapseExample"
style="background-color:grey; font-size:10px;"
>
<i class="fas fa-newspaper"></i></i> MAJ V.3 <br> (13 août 2022)</button
><br />
<div class="collapse" id="collapse2" style="margin-top: 10px">
<div class="alert alert-warning" style="text-align: justify; font: size 10px; background-color:coral;">
- Modification complète du principe de jeu de cette manche <br>
</div>
</div>
<h1>MASTER DUEL</h1>
<button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fas fa-hand-sparkles"></i> Règles
</button><br/>
<div class="collapse" id="collapseExample" style="margin-top: 10px">
<div class="alert alert-warning" style="text-align: justify">
- L'objectif de cette manche est de marquer un maximum de point avec un minimun d'indices. <br>
- A tour de rôle, chaque équipe devra deviner le nom d'un personnage biblique grâce aux indices donnés, en 80 secondes maximum. <br>
- Les indices peuvent être choisi dans l'ordre que l'équipe le souhaite. <br>
- L'équipe n'est pas obligé d'utiliser tous les indices. <br>
- Dès qu'elle pense avoir trouvée la réponse, l'équipe valide, l'animateur vérifie et accorde ou non les points affichés.
- Plus le personnage est trouvé tôt, plus le score sera élevé. <br>
- La première équipe à atteindre 21 points gagne la manche et le jeu. <br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="col"><button id="indice1" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°1</button>
<span id="affI1" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice2" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°2</button>
<span id="affI2" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice3" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°3</button>
<span id="affI3" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice4" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°4</button>
<span id="affI4" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div class="col"><button id="indice5" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°5</button>
<span id="affI5" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>
<div><button id="enigme" class="btn btn-info" style="background-color:chocolate; font-size: 20px" type="button"><i class="fa fa-search"></i> Enigme</button></div>
<tr><span id="affEnigme" style="font-size:40px; text-align:center; color:darkgreen;"></span></tr>
<br>
</div>
<div class="col">
<td><button id="chronometre" class="btn btn-warning" type="button" style="background-color:burlywood; font-size: 20px"><i class="fas fa-stopwatch"></i> Chrono</button></td>
<div
class="alert alert-danger"
role="alert"
style="text-align: center; font-size: 19px;"
>
<b>Temps restant :</b>
</div>
<div
class="alert alert-secondary"
role="alert"
style="text-align: center; font-size: 2em; font-weight: bold"
>
<span id="countdown_sec">80 secondes</span>
</div>
<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="col">
<table class="table table-striped table-bordered">
<thead>
<tr class="table-success">
<th> ÉQUIPES QUALIFIÉES + JOUEURS</th>
<th> SCORE</th>
<th> COMPTEUR
</th>
<th> ÉQUIPE GUIDE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1ère Équipe Qualifiée
<input></td>
<td><span id="compteur1" style="font-size: 20px"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="1|1" style="background-color:blue; font-size: 20px"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="1|2" style="background-color:green; font-size: 20px" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="1|4" style="background-color:yellowgreen; font-size: 20px;" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="1|6" style="background-color:gold; font-size: 20px" type="button"><i class="fas fa-plus"></i> 6</button>
</td>
<td><input></td>
</tr>
</td>
</tr>
<tr>
<td>2ème Équipe Qualifiée
<input></td>
<td><span id="compteur2" style="font-size: 20px"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="2|1" style="background-color:blue; font-size: 20px;"type="button"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="2|2" style="background-color:green; font-size: 20px" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="2|4" style="background-color:yellowgreen; font-size: 20px" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="2|6" style="background-color:gold; font-size: 20px" type="button"><i class="fas fa-plus"></i> 6</button>
</td>
<td><input></td>
</tr>
<!-- <tr>
<td>3ème Équipe Qualifiée
<input></td>
<td><span id="compteur3"><b>0</b></span></td>
<td>
<button class="btn btn-success compteur" value="3|1" style="background-color:blue;"type="button"><i class="fas fa-plus"></i> 1</button>
<button class="btn btn-success compteur" value="3|2" style="background-color:green;" type="button"><i class="fas fa-plus"></i> 2</button>
<button class="btn btn-success compteur" value="3|4" style="background-color:yellowgreen;" type="button"><i class="fas fa-plus"></i> 4</button>
<button class="btn btn-danger compteur" value="3|6" style="background-color:orange;" type="button"><i class="fas fa-plus"></i> 6</button>
</td>
<td><input></td>
</tr> -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- <script src="liste2.js"></script> -->
<script>
$(document).ready(function () {
var timer;
var random;
var personnages = [];
function aleatPerso () {
var pmin = 0;
var pmax = 64;
random = Math.floor(Math.random() * (pmax - pmin)) + pmin;
// ajouter le fait de ne pas repiocher le même perso
if (personnages.length === max) {
alert("Tous les personnages ont été trouvés !");
} else if ($.inArray(parseInt(random), personnages) === -1) {
$("#enigme").text(personnage[random][1]);
personnages.push(random); // rempli le tableau des questions déjà posées
console.log(personnages);
} else {
// rappelle la fonction pour trouver un nouveau nombre aléatoire non utilisé
aleatPerso();
}
$('#indice1').on('click', function() {
$('#affI1').text(personnage[aleatoireperso][2]);
});
$('#indice2').on('click', function() {
$('#affI2').text(personnage[aleatoireperso][3]);
});
$('#indice3').on('click', function() {
$('#affI3').text(personnage[aleatoireperso][4]);
});
$('#indice4').on('click', function() {
$('#affI4').text(personnage[aleatoireperso][5]);
});
$('#indice5').on('click', function() {
$('#affI5').text(personnage[aleatoireperso][6]);
});
$('#enigme').on('click', function() {
$('#affEnigme').text(personnage[aleatoireperso][1]);
});
$('#chronometre').on('click', function() {
$secondes = 80; // définit le nombre de secondes
$('#countdown_sec').text($secondes); //affiche 120 dans le chrono
timerManager.start($secondes);
});
timerManager = {
start: function ($secondes) {
if ($secondes >= 0) { // tant que le chrono est supérieur à zéro
if ($secondes >= 61) {
$('#scoreencours').text('+6');
} else if ($secondes >= 41) {
$('#scoreencours').text('+4');
} else if ( $secondes >= 21) {
$('#scoreencours').text('+2');
} else if ( $secondes >= 1) {
$('#scoreencours').text('+1');
} else {
$('#scoreencours').text('+0');
}
$secondes = $secondes - 1; // provoque le décompte
timer = setTimeout(function () { // éxécute le code toutes les 1000 millisecondes
$('#countdown_sec').text($secondes); // affiche le temps restant
timerManager.start($secondes); // rappelle la fonction
}, 1000);
} else {
timerManager.stop(); // arrête le chrono
}
},
stop: function () { // to be called when you want to stop the timer
clearTimeout(timer);
$('#countdown_sec').text('0');
}
};
$('.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 <= 20) {
$('#compteur' + $val[0]).text($new_score);
} else {
$('#compteur' + $val[0]).text('VICTOIRE !!!');
}
});
var personnage = [
[0, 'Cauet','Radio','Chauve','Garfield','Méthode','Voix'],
[1, 'Louane','Bélier','Louis','Télé','Blonde','Esmée'],
[2, 'Sid','Paresseux','Cheveux','Glace','Sabre','5'],
];
};
});
</script>
</body>
</html>
Top comments (0)