Mini jeu en JavaScript , error "to much recursion"

kat - 30 mars 2021 à 09:25
hypothetix Messages postés 191 Date d'inscription dimanche 19 janvier 2020 Statut Membre Dernière intervention 24 avril 2024 - 30 mars 2021 à 18:49
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...
Voici mes codes HTML/ CSS et JS :
<!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>


@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;
}


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

1 réponse

hypothetix Messages postés 191 Date d'inscription dimanche 19 janvier 2020 Statut Membre Dernière intervention 24 avril 2024 6
30 mars 2021 à 18:49
Bonsoir,

ligne 14 du fichier js:
const indexCloud = Math.floor(Math.random() * clouds.lenght);
remplace lenght par length

Courage.
0
Rejoignez-nous