11521 sujets

JavaScript, DOM et API Web HTML5

Too much recursion

Bonjour à tous ! Après quelques recherches, je ne suis pas parvenu à régler ce problème de "Too much recursion" sur mon code JS. Je fais actuellement un petit jeu tout bete qui consiste à taper sur des taupes avec un clic de souris. Mais quand je lance ma page HTML, j'ai cette erreur dans ma console (ligne 48, c'est à dire la function randomHole(holes)).

Si vous savez pourquoi , n'hésitez pas à me le dire, car j'ai mis un timing de fin du jeu ..
Voici le code 



<body>

    <h1> Tape la taupe ! <span class="score"> 0 </span></h1>
    <button class="button" onClick="startGame()">Commence !</button>
    <div class="game">
        <div class="hole hole1">
            <div class="mole"></div>
        </div>
        <div class="hole hole2">
            <div class="mole"></div>
        </div>
        <div class="hole hole3">
            <div class="mole"></div>
        </div>
        <div class="hole hole4">
            <div class="mole"></div>
        </div>
        <div class="hole hole5">
            <div class="mole"></div>
        </div>
        <div class="hole hole6">
            <div class="mole"></div>
        </div>
    </div>

<script>
    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    let lastHole;
    let timeUp = false;
    let score = 10;

    function randomTime(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    function randomHole(holes) {
        const idx = Math.floor(Math.random() * holes.lenght);
        const hole = holes[idx];
        if (hole === lastHole) {
        return randomHole(holes);
        }
        lastHole = hole;
        return hole;
    }

    function peep() {
        const time = randomTime(200, 1000);
        const hole = randomHole(holes);
        hole.classList.add('up');
        setTimeout(() => {
            home.classList.remove('up');
            if (!timeUp) peep();
        }, time);
    }

    function startGame() {
        scoreBoard.textContent = 0;
        timeUp = false;
        score = 0;
        peep();
        setTimeout(() => timeUp = true, 10000);
    }

    function bonk(e) {
        if(!e.isTrusted) return; //Tricheur!
        score++;
        this.parentNode.classList.remove('up');
        scoreBoard.textContent = score;
    }

    moles.forEach(mole => mole.addEventListener('click', bonk));

</script>

</body>


Je suis étudiant depuis seulement 1 mois, je ne connais pas toute les réponses malheureusement, même avec quelques recherches Smiley sweatdrop

Merci par avance Smiley smile
Salut

Je n'ai pas le code CSS j'ai donc testé sans et corrigé le code JS suivant les erreurs vues dans la console (touche F12).

Voici le résultat :

<h1> Tape la taupe ! <span class="score"> 0 </span></h1>
<button type="button" id="btnCommence" class="button">Commence !</button>
<div class="game">
    <div class="hole hole1">
        <div class="mole"></div>
    </div>
    <div class="hole hole2">
        <div class="mole"></div>
    </div>
    <div class="hole hole3">
        <div class="mole"></div>
    </div>
    <div class="hole hole4">
        <div class="mole"></div>
    </div>
    <div class="hole hole5">
        <div class="mole"></div>
    </div>
    <div class="hole hole6">
        <div class="mole"></div>
    </div>
</div>



window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    // début code du test

    const
        holes = Array.from(document.querySelectorAll('.hole')), // Array.from() génére un véritable Array itérable
        moles = Array.from(document.querySelectorAll('.mole')),
        scoreBoard = document.querySelector('.score');

    let
        lastHole = null,
        timeUp = false,
        score = 10;

    const intRandom = (min = 0, max = 10) => {
        // retourne X tel que : min <= X <= max
        return Math.floor(Math.random() * (max - min + 1) + min);
    };

    function randomHole() {
        const
            idx = intRandom(0, holes.length - 1), // -1 indispensable car intRandom va de min à max
            hole = holes[idx];
        
        if (hole === lastHole) {
            return randomHole();
        }

        lastHole = hole;

        return hole;
    }

    function peep() {
        const
            time = intRandom(200, 1000),
            hole = randomHole();

        if (hole){
            hole.classList.add('up');

            setTimeout(() => {
                hole.classList.remove('up');
                if (!timeUp) peep();
            }, time);
        } else throw new Error('hole est undefines ou null');
    }

    function startGame() {
        scoreBoard.textContent = 0;
        timeUp = false;
        score = 0;

        peep();

        setTimeout(() => timeUp = true, 10000);
    }

    function bonk(e) {
        if (!e.isTrusted) return; //Tricheur!

        score++;

        this.parentNode.classList.remove('up');

        scoreBoard.textContent = score;
    }

    for (const mole of moles) {
        mole.addEventListener('click', bonk)
    }

    document.querySelector('#btnCommence').addEventListener('click', startGame, {
        capture: false,
        passive: true,
        once: false
    });

    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});
Modérateur
Et du coup ça marche maintenant non ?
Faut juste mettre du CSS et régler le click et le compteur de point.
Sujet clos
Aller à