Good afternoon, I need some help in Javascript since I am not very expert in this language, the problem I have is the following: I'm doing a game of Simon says, which already works, but I would like to be able to add a score that works as follows: Every time the person clicks on the correct color, 10 pts are added to the final score, and so on until the end of the game, until the person makes a mistake in one color, an example: level 1 only presses one color, so your score would be 10 pts, in the second level, as 2 colors are pressed, for each color 10 pts would be assigned to the score, resulting in 30 pts to the final score (20 pts the 2 colors + 10 pts of the color of the first round), unless the player is wrong in a color of those 2 then the final score would be 20 pts (since it would only be a successful color of 2, so 10 pts more the 10 pts of the first round) and so on until the player is equ ivoque on another level, if someone could help me I would be very grateful. Next I annex the code of the game. If you want to make the game I use the Materialize framework and a bit of CSS for the button style Simon says, to start the game just click on the button and then click on the cyan color panel to start play.Thanks!
function restart(){
document.getElementById('negro').innerHTML="";
setTimeout(function(){location.reload();},400);
}
function start(){
document.getElementById('boton').style.display ='none';
iteraciones = 1;
arraySimon = new Array();
timer=0;
turnoJugador = 0;
seleccion=0;
}
// Generador random de secuencia de colores
function simon(){
if(turnoJugador==0){
document.getElementById("nivel").innerHTML = "Level: " +iteraciones;
document.getElementById('negro').innerHTML="Simon Says...";
turnoJugador=2;
timer=0;
arraySimon.push(Math.floor(Math.random() * (4)));
simonTurn(arraySimon[timer],timer);
iteraciones++;
}
}
// Turno de simon, agrega un nuevo color si el timer es menor a las iteraciones echas
function simonTurn(color, i){
if(turnoJugador==2){
setTimeout(function(){
switch(arraySimon[timer]){
case 0:
document.getElementById('rojo').style.backgroundColor = "#FF0000";
setTimeout(function(){document.getElementById('rojo').style.backgroundColor = "#8A0808";},660);
break;
case 1:
document.getElementById('azul').style.backgroundColor = "#0000FF";
setTimeout(function(){document.getElementById('azul').style.backgroundColor = "#0B0B61";},660);
break;
case 2:
document.getElementById('verde').style.backgroundColor = "#00FF00";
setTimeout(function(){document.getElementById('verde').style.backgroundColor = "#0B610B";},660);
break;
case 3:
document.getElementById('amarillo').style.backgroundColor = "#FFFF00";
setTimeout(function(){document.getElementById('amarillo').style.backgroundColor = "#868A08";},660);
break;
}
if(timer<iteraciones){
timer++;
simonTurn(arraySimon[timer],timer);
}else{
turnoJugador=1;
document.getElementById('negro').innerHTML="Your Turn";
}
},710);
}
}
function jugador(id){
if(turnoJugador==1){
switch(id){
case 'rojo':
document.getElementById('rojo').style.backgroundColor = "#FF0000";
setTimeout(function(){document.getElementById('rojo').style.backgroundColor = "#8A0808";},150);
id=0;
break;
case 'azul':
id=1;
document.getElementById('azul').style.backgroundColor = "#0000FF";
setTimeout(function(){document.getElementById('azul').style.backgroundColor = "#0B0B61";},150);
break;
case 'verde':
document.getElementById('verde').style.backgroundColor = "#00FF00";
setTimeout(function(){document.getElementById('verde').style.backgroundColor = "#0B610B";},150);
id=2;
break;
case 'amarillo':
id=3;
document.getElementById('amarillo').style.backgroundColor = "#FFFF00";
setTimeout(function(){document.getElementById('amarillo').style.backgroundColor = "#868A08";},150);
break;
}
if(id==arraySimon[seleccion]){
seleccion++;
if(seleccion>=arraySimon.length){
document.getElementById('negro').innerHTML="Very good!";
turnoJugador=0;
seleccion=0;
setTimeout(function(){document.getElementById('negro').innerHTML="Simon's Turn";simon();},950);
}
}else{
alert('Game over! :c </3');
setTimeout(restart(),800);
}
}
}html{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
#rojo{
width:162.5px;
height:100px;
background-color: #8A0808;
float: left;
border: 1px solid;
border-radius: 5px;
}
#azul{
width:162.5px;
height:100px;
background-color: #0B0B61;
float: left;
border: 1px solid;
border-radius: 5px;
}
#verde{
width:162.5px;
height:100px;
background-color: #0B610B;
float: left;
border: 1px solid;
border-radius: 5px;
}
#amarillo{
width:162.5px;
height:100px;
background-color: #868A08;
float: left;
border: 1px solid;
border-radius: 5px;
}
#negro{
width:325px;
height:100px;
background-color: #006064;
float: left;
border: 1px solid;
color:#FFFFFF;
text-align: center;
padding-top: 30px;
border-radius: 5px;
}<a class="waves-effect waves-light btn-large" id="boton" onclick="start();"><i class="material-icons right">games</i>Play Now!</a>
<!-- Panel de nivel y Score -->
<div class="row">
<div class="col s12">
<p id="nivel"></p><br>
<p>Score: my skills in js are poor u.u</p>
<div id="negro" onclick="simon()"></div>
<br>
</div>
</div>
<!-- Primera linea de controles de Simon says (Colores Rojo y Azul) -->
<div class="row">
<div class="col s12">
<div id="verde" onclick="jugador(this.id)">
<center>
<i class="large material-icons white-text">bubble_chart</i>
</center>
</div>
<div id="rojo" onclick="jugador(this.id)">
<center>
<i class="large material-icons white-text">favorite</i>
</center>
</div>
</div>
</div>
<!-- Segunda linea de controles de Simon says (Colores Verde y Amarillo) -->
<div class="row">
<div class="col s12">
<div id="amarillo" onclick="jugador(this.id)">
<center>
<i class="large material-icons white-text">insert_emoticon</i>
</center>
</div>
<div id="azul" onclick="jugador(this.id)">
<center>
<i class="large material-icons white-text">grade</i>
</center>
</div>
</div>
</div>
<!-- Fin de controles de Simon says -->