stop javascript word generator

Question

stop javascript word generator

Navigation

#1 by (1 votes)

1

I'm doing a game where the user has to put in the input the random words that appear above in the box, everything goes well and works until it reaches level 5, when finished putting the words of that level should happen to the function win () and the time animation should stop and show the function of win (), but do not return random words again, the concentration of this code is in the function check (), I tried but I could not have wanted a help thanks

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>

javascript

asked by Diego Andres Rojas 25.03.2018 в 19:36

source

1 answer

use threads and when compiling do not use -l pthread How can I avoid accessing a web page by URL without having logged in, using only Javascript?

score 1 · Accepted Answer

As I did not get an answer, after a whole day of searching for the error I realized that the error was in that the variable level was increasing which meant that paabras random was generated but this also caused error since I went to the next level but it was not defined, for this reason the game continued even though I was at level 5 and it was assumed that I had finished what I did was fix the code a bit and look how to do to stop going to the function words() that was the one that generates the words this was the arrangement

Modifying this came out to me the way I wanted it

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";

        }
}

}