Mini jeu en JavaScript , error "to much recursion"

**kat555** · 30/03/2021, 09h37

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();

**NoSmoking** · 30/03/2021, 10h34

Bonjour,
essaies avec length à la place de lenght

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//const indexCloud = Math.floor(Math.random() * clouds.lenght);
const indexCloud = Math.floor(Math.random() * clouds.length);

Conseil, il te faut regarder dans la console pour voir qui provoque cette erreur, F12.

**kat555** · 30/03/2021, 10h46

Bonjour,
Merci d'avoir repéré la coquille.
Malheureusement même apres correction cela ne focntionne pas ( je regarde systématiquement la console, du plus j'ai tester la syntaxe du code sur different site de correction de syntaxe, et ca n'avais pas été relevé ^^" )

Actuellement pas de changement (Si ce n'est que la console ne m'affiche plus d'erreur...) : les têtes s'affichent toutes, et en même temps.
Le score augment bien quand je clique, mais pas forcement que sur les tete ( quand je clique sur la zone du DIV class="game"), sans s'arreter apres un labs de temps donné ( ce qui est le but).

Peut être y a t'il un probleme au niveau des fonction math?

**NoSmoking** · 30/03/2021, 11h58

Malheureusement même apres correction cela ne focntionne pas

Ceci est une autre histoire qui n'a rien à voir avec le propos de ta première question

Peut être y a t'il un probleme au niveau des fonction math?

pas forcément mais il me semble que tu cibles mal tes éléments.

Si tu veux que les « head » apparaissent quand les « hole » ont la classe up il te faut écrire le CSS suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.up .head {
   top: 0;
}

de plus pourquoi mettre l'écouteur sur les « head », et non pas sur les « hole », en testant la présence de la class up :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function playerScore(event) {
  if (this.classList.contains("up")) {
    score++;
    this.classList.remove("up");
    scoreBoard.textContent = score;
  }
}
clouds.forEach(head => head.addEventListener("click", playerScore));

après tu pourrais également gérer cela via le CSS avec la propriété pointer-events.

**kat555** · 30/03/2021, 12h06

Infiniement merciiii !!!!!

Tout fonctionne parfaitement maintenant, merci beaucoup !

J'ai bien vu ,du coup, l'erreur au niveau du ciblage des élements..

Mini jeu en JavaScript , error "to much recursion"

JavaScript

Discussions similaires

Partager

Partager