Mini jeu en JavaScript , error "to much recursion"
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:
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:
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:
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(); |
