Bonjour, je suis actuellement d�butante en dans le d�veloppement Web, JS est mon premier langage de programmation ( apr�s HTML et CSS). J'apprend pour le moment en autodidacte, donc j'ai du mal � voir et comprendre mes erreurs.
J'essaie de cr�e un mini jeu en JS pour le pr�senter lors d'un entretient pour une formation ( le but �tant de faire cette formation en alternance, donc d'avoir quelques base et quelques projets � presenter �galement aux entreprise).
Je suis actuellement bloquer sur mon code, avec l'erreur "to much recursion".
Le but de mon code est de cr�e un "jeu de la taupe" ( en gros, des visage apparaissent et disparaissent al�atoirement sur les positions al�atoire, pour une dur�e de temps al�atoire mais comprise entre deux valeurs, d'augmenter le score lorsqu'on appuie sur un visage, et de cr�e une fonction pour que le jeu ce finisse )
J'aurais besoin d'une ame charitable pour m'aider � comprendre o� et pouquoi ca bloque exactement...

Merci par avance

Voici mes codes HTML/ CSS et JS :
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
 
<head>
    <title>Whack A Mole!</title>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="img" style="text-align: center;">
        <img src="Rick_and_Morty_logo.png" width="300px"><br>
        <span class="score">0</span>
    </div>
    <div class="play-img" style="text-align: center;">
        <a><img src="morty.png" style="width: 200px;margin-bottom: -50px;" id="morty-play"></a><br>
        <a id="demo1" style="color: white;font-size: 40px;"></a>
        <a id="demo2" style="color: white;font-size: 40px;"></a>
        <a id="demo3" style="color: white;font-size: 40px;"></a>
    </div>
 
    <div class="game">
        <div class="hole">
            <div class="head"></div>
        </div>
        <div class="hole">
            <div class="head"></div>
        </div>
        <div class="hole">
            <div class="head"></div>
        </div>
        <div class="hole">
            <div class="head"></div>
        </div>
        <div class="hole">
            <div class="head"></div>
        </div>
        <div class="hole">
            <div class="head"></div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
 
</html>

Code css : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@font-face {
    font-family: "Jungle";
    src: url("dancing_jungle.ttf");
}
 
@font-face {
    font-family: "Sch";
    src: url("schw.ttf");
}
 
* {
    position: inherit;
}
 
html {
    box-sizing: border-box;
    font-size: 10px;
    background-color: black;
}
 
body {
    padding: 0;
    margin: 0;
    font-family: Sch;
}
 
.score {
    margin-top: 50px;
    color: deepskyblue;
    padding: 0 3rem;
    border-radius: 1rem;
    font-size: 80px;
}
 
#morty-play:hover {
    opacity: 0.5;
}
 
.play-img a {
    margin-right: 15px;
}
 
.game {
    width: 600px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
 
.hole {
    flex: 1 0 33.33%;
    overflow: hidden;
    position: relative;
}
 
.hole:after {
    display: block;
    background: url("ricky.png") bottom center no-repeat;
    background-size: contain;
    content: "";
    width: 100%;
    height: 70px;
    position: absolute;
    z-index: 2;
    bottom: -30px;
}
 
.head {
    background: url("rick.png") bottom center no-repeat;
    background-size: 60%;
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    transition: all 0.4s;
}
 
.up,
.head {
    top: 0;
}
 
button {
    display: block;
    margin: 1em auto;
    padding: 1em;
    border-radius: 25%;
    background-color: black;
    color: #fff;
    font-size: 2em;
    font-family: Jungle;
}

Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const clouds = document.querySelectorAll(".hole");
const scoreBoard = document.querySelector(".score");
const heads = document.querySelectorAll(".head");
 
let lastCloud;
let timeUp = false; // False si pas fini, true si fini
let score = 0;
 
function randomTime(min, max) { // Temps aléatoire
    return Math.round(Math.random() * (max - min) + min);
}
 
function randomCloud(clouds) { // Selection de nuage aléatoire avec une fonction récursive
    const indexCloud = Math.floor(Math.random() * clouds.lenght);
    const cloudSelect = clouds[indexCloud];
    if (cloudSelect === lastCloud) { // Pas renvoyer le meme nuage qu'avant
        return randomCloud(clouds);
    }
    lastCloud = cloudSelect;
    return cloudSelect;
}
 
function showHead() {
    const time = randomTime(1000, 1500); // interval de temps en MS
    const cloud = randomCloud(clouds);
    cloud.classList.add("up"); // .hole.up classe déja existante en CSS. Sert à faire sortir les têtes
    setTimeout(() => {
        if (!timeUp) showHead(); //Fonction récursive
        cloud.classList.remove("up");
    }, time); // exécuter une fonction à partir d'un certain délais
}
 
function playerScore(event) { // test de faux click
    if (!event.isTrusted) return;
    score++; // augmenter le score
    this.classList.remove("up");
    scoreBoard.textContent = score;
}
heads.forEach(head => head.addEventListener("click", playerScore));
 
function startGame() {
    scoreBoard.textContent = 0;
    socre = 0;
    timeUp = false;
    showHead();
    setTimeout(() => {
        timeUp = true; // condition d'arret du jeu
        setTimeout(() => {
            scoreBoard.textContent = "end";
        }, 2000);
    }, 10000);
}
startGame();