1

Estoy haciendo un juego donde el usuario tiene que poner en el input las palabras random que les aparece arriba en el recuadro , todo va bien y funciona hasta cuando llega al nivel 5, cuando termine de poner las palabras de ese nivel deberia pasar a la funcion win() y la animacion de tiempo deberia detenerse y mostrar lo de la funcion win(), pero que no me vuelva aparece palabras random otra vez , la concentracion de este codigo esta en la funcion check(), he intentando pero no he podido quisiera una ayuda gracias

let image = document.querySelector("#principal-image");
let button = document.querySelector("#play");
let game_image = document.querySelector("#image-game");
let title = document.querySelector("#title");
let input = document.querySelector("#input");
let container1 = document.querySelector(".game1");
let container2 = document.querySelector(".game2");
let containerGame = document.querySelector("#container-game");
let levels = document.getElementsByClassName("level-button");
let start_game = document.querySelector("#start");
let title_time = document.querySelector("#title_time");
let time = document.querySelector("#time");
let word_space = document.querySelector("#words");
let total_score = document.querySelector("#total_score");
let life_player = document.querySelectorAll(".skulls");
let loose = document.querySelector("#loose");
let again = document.querySelector("#again");
var score = document.getElementsByClassName("scorest");
let score1=document.querySelector("#score1");
let score2=document.querySelector("#score2");
let score3=document.querySelector("#score3");
let score4=document.querySelector("#score4");
let score5=document.querySelector("#score5");

  let opens=false;
let first=true;
let colors = ["red", "yellow", "lightblue", "orange", "white", "#9A61E5"];
let level_words = [
    ["anacusia", "aduccion", "escorbuto", "isquion", "neuritis", "urticaria", "disnea", "astenia", "beriberi", "afasia"],
    ["estrabismo", "ferropenia", "glucosuria", "hematemesis", "hemoptisis", "hipercapnia", "neningitis", "nasogastrico", "preeclampsia", "rabdomiolisis"],
    ["mixology", "kerfuffle", "bequeath", "flexitarian", "pescatarian", "gobemouche", "ingurgitate", "opsimath", "quacksalver", "snollygoster"],
    ["hullaballoo", "nudiustertian", "impignorate", "discombobulate", "paralelepipedo", "questionnaire", "americanization", "cardiopulmonary", "impenetrability", "transcendentalism"],
    ["whippersnapper", "gobbledygook", "characterization", "lackadaisical", "transcendentalism", "esternocleidomastoideo", "electroencephalogram", "accommodation", "disproportionableness", "hippopotomonstrosesquipedaliophobia"]
];
let level = 0,
    complete, score_player, nivel = 0;
let open = false;
let currentTime = 15;
let word, color_choose;
let tries, actual_life = 2;
window.addEventListener('load', function() {
    container1.classList.remove("game2");
    containerGame.style.display = 'none';
    button.style.display = 'block';
});
for (i = 0; i < 5; i++) {
    score[i].innerHTML = "0";
};

function game() {

    function start() {
        container1.classList.remove("game1");
        container2.classList.add("game2");
        button.style.display = 'none';
        input.placeholder="Write Here..."
        containerGame.style.display = 'block';
        again.style.display = 'none';
        title_time.style.visibility  = 'visible';
        title_time.innerHTML = "Time";
        title_time.style.color = "white";
        nivel = 0; level = 0; score_player = 0;complete = 0;
        actual_life = 2; tries = 2;;
        currenTime = 8;
        for (i = 0; i < 3; i++) {
            life_player[i].style.visibility = 'visible';
            life_player[i].style.display = 'inline-block';
        }
        init_game()
    }

    function init_game() {

        for (i = 0; i < levels.length; i++) {
            levels[i].disabled = false;
            levels[i].style.transform = "translate(0px)";
        }
       
       levels[level].style.background = '#FFDDD5';
       levels[level].style.color = 'black';
  
    }

  
    function init() {
        input.focus();
        start_game.style.display = 'none';
        title_time.style.visibility = 'hidden';
        time.addEventListener('animationend', lifes)
        words()
    }

    function words() {
        reset_animation();
        time.style.animationDuration = String(currentTime) + "s";
        word = level_words[nivel][Math.floor(Math.random() * 10)];
        color_choose = colors[Math.floor(Math.random() * colors.length)]
        word_space.innerHTML = "[" + word + "]";
        word_space.style.color = color_choose;
    }

    function check() {
 
  if (input.value.toLowerCase() == word) {
  score_player += 2 * word.length * (level + 1);
  input.value = "";
  complete++;


    if (complete % 2 === 0) {

                if(level==4){

                   win();

                }else{
                level++
                nivel++;
                init_game();
                init()
                  ;

                ;}
            }


              score();
              words();

}     
    }
    
     
    function lifes() {
        if (tries >= 0) {
            life_player[actual_life].style.visibility = 'hidden';
            input.value = "";
            words();
        }
        if ((tries == 0) && (actual_life == 0)) {
            for (i = 0; i < 3; i++) {
                life_player[i].style.display = 'none';
            }
            life_player[actual_life].style.visibility = 'hidden';
            loose.style.display = 'block';
            loose.innerHTML = "Game Over!";
            input.disabled = true;
            again.style.display = 'block';
            reset_animation();
        }
        tries--;
        actual_life -= 1;
    }

    function finish() {
        word_space.innerHTML = "[words]";
        input.disabled = false;
        again.style.display = 'none';
        total_score.innerHTML = "0";
        word_space.style.color = "white";
        start_game.style.display = 'block';
        loose.style.display = 'none';
        input.value = "";

        for(i=0;i<levels.length;i++){
         levels[i].style.background = 'white';
         levels[i].style.color = 'black';

        }
        
        start()   
    }

    function score() {

        total_score.innerHTML = score_player;

    }
    function reset_animation() {
        time.style.animation = "none";
        time.offsetHeight;
        time.style.animation = null;
    }

    function win(){
     reset_animation();
     word_space.innerHTML="YOU WIN!!!";
     input.placeholder="Congratulations";
     again.style.display = 'block';



    }
    button.addEventListener('click', start);
    start_game.addEventListener('click', init)
    input.addEventListener('input', check);
    again.addEventListener('click', finish)
}
game()
@import url('https://fonts.googleapis.com/css?family=Creepster');

body{
font-family: 'Creepster', cursive;
background: rgba(0,0,0,0.8);


}

.game1{


height: 100%;
background: url("../img/type_or_die.png")no-repeat center center fixed; 
max-width: 100%;
 background-size: 100% 100%;
}
h1{

  font-size: 5em;

}


.game2{

background: url("../img/image2.jpg")no-repeat center center fixed; 
max-width: 100%;
 background-size: 100% 100%;



}


.container-game{

display: none;
z-index: 0;

}
.play{

position: relative;
display: block;
margin:0 auto;
top: 850px;
width: 200px;

}
.title{

text-align: center;
z-index: 1;
font-size: 5em;
 color: white;

}

.level{
text-align: center;
z-index: 1;
opacity: 0.8;
font-size: 3em;
color: white;

}


.choose{

text-align: center;


}
.level-button{


 width:150px;
 font-size: 2em;
 background: white;
 border: 3px solid black;
 border-radius: 10px;

}
.level-button:hover{

  background: black;
 color: white;
    box-shadow: 5px 5px 50px 15px white;
    border-radius: 5px;
  animation: linear;

}
.level-button:focus{
  outline-color: black;



}
.words{
text-align: center;
z-index: 1;
opacity: 0.7;
font-size: 3em;
position: relative;
top: 40px;
color: white;
    box-shadow: 5px 5px 50px 15px white;



}


.input{
display: block;
z-index: 1;
margin:210px auto;
width: 220px;
text-align: center;
outline: 2px solid white;
outline-offset: 10px;
position: relative;
top: -25px;


}

.input:focus{

  outline-color: black;
   box-shadow: 5px 5px 50px 15px white;
   outline-offset: 1px;


}


.score{

text-align: center;
opacity: 0.8;
font-size: 3em;
color: white;

}
.scores{

text-align: center;


}

table{

 background: white;
 width:250px;
border:2px solid black;
  box-shadow: 4px 4px 30px 10px white;
  border-radius: 15px;
  margin: 0 auto;

}

th{

	font-size: 1.3em;
}

tr{

font-size: 1.4em;
}

tr:hover{
 border:2px solid white;
 background: black;
 color :white;

}

.time{


display:block;
border: 2px solid #000;
width:250px;
height: 30px;
background: #3F4034;
margin:0 auto;
position: relative;
top: 80px;
  box-shadow: 4px 4px 30px 
  10px white;
  animation-name: time;
text-align: center;
}

.start,.again{

position: relative;
display: block;
width: 80px;
margin:0 auto;
top:-190px;
border: 1px solid black;
}

.start:hover{

border: 1px solid black;


}
.total{

 
 background: white;
 max-width: 500px;
 margin: 0 auto;
 position: relative;
 top: -120px;
  border:2px solid black;
  text-align: center;
  box-shadow: 4px 4px 30px 10px white;

}

.score_final{

 border-left:2px solid black;

}

.total_score,#loose{


	color: red;
	font-size: 2em;
}

@keyframes time {
    0% {background-color: green;}
    20% {background-color: yellowgreen;}
    35% {background-color: yellow;}
    50% {background-color: orange;}
    75% {background-color: red;}
    100% {width: 0%;}
}
.life{

	float: left;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<title>Typing or die</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body id="game" class="game1 game2" >
<div class="container-fluid">
	

<div class="row container-game" id="container-game">
<div class="col">
<h1 class="title"  id="title" >TYPE OR DIE...</h1>

<div class="row">
<div class="col-4">
<h2 class="score" id="score">BEST SCORES</h2>
<div class="scores">

<table border="1">

 <thead>
   <th>Position</th>
   <th>Score</th>

  </thead>

  <tbody>
  	<tr>
  	
     <td>1°</td>
     <td id="score1" class="scorest"></td>
    
  	</tr>
  	  	<tr>
  	
     <td>2°</td>
     <td id="score2" class="scorest"></td>
    
  	</tr>

  	  	<tr>
  	
     <td>3°</td>
     <td id="score3" class="scorest"></td>
    
  	</tr>
  	  	<tr>
  	
     <td>4°</td>
     <td id="score4" class="scorest"></td>
    
  	</tr>
  	  	<tr>
  	
     <td>5°</td>
     <td id="score5" class="scorest"></td>
    
  	</tr>
  </tbody>
</table>
   

	
</div>
</div>

 <div class="col-4  ">
<h3 class="words" id="words">[words]</h3>

<div class="time" id="time">
	<span id="title_time"></span>
 </div>

<input type="text" class="input" name="" placeholder="Write Here..." id="input" autocomplete="off">

<button class="btn btn-warning start" id="start">Start!</button>
<button class="btn btn-warning again" id="again">Again!</button>


</div>

 <div class="col-4">
<h2 class="level" id="level">LEVELS</h2>



<div class="choose">
	
<button type="" class="level-button">Level 1</button><br>
<button type="" class="level-button">Level 2</button><br>
<button type="" class="level-button">Level 3</button><br>
<button type="" class="level-button">Level 4</button><br>
<button type="" class="level-button">Level 5</button><br>

</div>
</div>

<div class="col-12 total">
	
	
 <div >
 	
   
   <div class="row">
   	
     <div class="col-6 life">
     	 
         <h3>LIFES</h3>
         
         <img src="img/skull.png" class="skulls" id="life1" width="50" alt="">
         <img src="img/skull.png" class="skulls" id="life2" width="50" alt="">
         <img src="img/skull.png" class="skulls" id="life3" width="50" alt="">
         <span id="loose"></span>


     </div>

         <div class="col-6 score_final">
     	 
         <h3>Score</h3>
         
         <span class="total_score" id="total_score">0</span>



     </div>






   </div>






 </div>






</div>

 
</div>
</div>
</div>
</div>

 <button class="btn btn-danger  play " id="play">PLAY!</button>

<script src="js/index.js"></script>
	
</body>
</html>

1 respuesta 1

1

Como no obtuve respuesta , despues de un dia entero de busqueda del error me di cuenta que el error se encontraba en que , la variable level seguia aumentando lo cual hacia que se generan paabras random pero esto tambien ocasionaba error ya que pasaba al siguiente nivel pero este no estaba definido , por esta razon el juego continuaba a pesar de que estaba en el nivel 5 y se suponia que habia terminado lo que hice fue arreglar un poco el codigo y mirar como hacer para detener la ida hasta la funcion words() que era la que genera las palabras este fue el arreglo

modificando esto me salio como yo lo queria

function check() {
        if ((input.value.toLowerCase() == word) && (opens == true)) {
            score_player += 2 * word.length * (level + 1);
            input.value = "";
            complete++;

            if(complete % 2==0){

              
                if(level<4){

                  level++
                  nivel++;
                  init_game()
                  init()
                
                }else{
                  opens=false;
                }

            }
       if(opens!=false) {

                score();
                words()  
        }else{

            win()
            score()
            time.style.animation = "none";

        }
}

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.