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>