JSFiddle - React, Tailwind, and code Playground
HTML
<div id="mot">Tenez vous prêt</div>
<img id="pic" src="" />
<input type="button" id="next" value="SUIVANT" />
<input type="button" id="pass" value="PASSER" />
<div id="res">
</div>
JavaScript
var files = [
"Abeille",
"Baleine",
"Cachalot",
"Cerf",
"Chat",
"Chèvre",
"Chien",
"Cigale",
"Coq",
"Cygne",
"Dauphin",
"Dindon",
"Dromadaire",
"Girafe",
"Gorille",
"Grenouille",
"Hérisson",
"Hyène",
"Hippopotame",
"Koala",
"Kangourou",
"Lama",
"Lézard",
"Lièvre",
"Lion",
"Loup",
"Morse",
"Ours",
"Otarie",
"Panda",
"Paresseux",
"Pélican",
"Phoque",
"Poisson",
"Raton laveur",
"Requin",
"Rhinocéros",
"Sanglier",
"Sauterelle",
"Serpent",
"Suricate",
"Tapir",
"Toucan",
"Tigre",
"Zebre"
]
var TabImages=[];
//initialisation du compteur associé a chaque mot et de l'array des images
var i = -1;
var cpt = [];
var tours = 0;
var gagne = 0;
while (files[++i]) {
files[i] = [files[i]];
files[i]['count'] = 0;
TabImages[files[i][0]]=new Image();
TabImages[files[i][0]].src="Images/"+TabImages[files[i][0]]+'.png'
}
//Duplication d'array
function DuplicateArray(Arr){
return Arr.slice(0);
};
var pioche=DuplicateArray(files);
//Fonction de tri sur compteur
function sortmots(a, b) {
return (a.count > b.count) ? 1 : -1;
}
//Fontion mise a jour de pioche
function updatepioche(mot){
if (pioche.length>1){
for(var i = pioche.length - 1; i >= 0; i--) {
if(pioche[i] === mot) {
pioche.splice(i, 1);
}
}
}
else {
pioche=DuplicateArray(files);
}
}
function nouv_mot(trouve) {
tours++;
var nb = Math.floor(Math.random() * pioche.length);
document.getElementById('mot').innerHTML = pioche[nb];
document.getElementById('pic').src= TabImages[pioche[nb]];
//actualise la pioche
updatepioche(pioche[nb])
console.log(pioche.length);
//incrément des compteurs
if (trouve) {
files[nb].count++;
gagne++;
}
// tri de l'array
files.sort(sortmots);
//affichage du classement:
var j = -1,
chaine = [],
gains = [],
...