Skip to main content
3 de 3
se eliminaron 18 caracteres en el cuerpo
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49

detener generador de palabras javascript

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>