muy buenas tardes 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 <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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(); } } 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() <!-- language: lang-css --> @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; } <!-- language: lang-html --> <!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> <!-- end snippet -->