Upload 4 files

bachup.js

@@ -0,0 +1,284 @@
+var gameType = window.localStorage.getItem('gameType');
+console.log(gameType);
+try{
+
+var sessionLevel = 'level1';
+var level;
+var levelTotal;
+
+
+$.getScript( "level/"+gameType+"/"+sessionLevel+".js" )
+  .done(function( script, textStatus ) {
+    $(".scripts").html('<script>'+script+'</script>');
+  })
+  .fail(function( jqxhr, settings, exception ) {
+    console.log("getScript:",exception);
+});
+
+
+}catch(e){
+	console.log('Status:', e.message);
+}
+
+
+setTimeout(function(){
+
+	if(sessionLevel == 'level1'){
+		level = level1;
+		levelTotal = level.length;
+	}else if(sessionLevel == 'level2'){
+		level = level2
+		levelTotal = level.length;
+	}else if(sessionLevel == 'level3'){
+		level = level3
+		levelTotal = level.length;
+	}else if(sessionLevel == 'level4'){
+		level = level4
+		levelTotal = level.length;
+	}else if(sessionLevel == 'level5'){
+		level = level5
+		levelTotal = level.length;
+	}else if(sessionLevel == 'level6'){
+		level = level6
+		levelTotal = level.length;
+	}else{
+		level = level1;
+		levelTotal = level.length;
+	}
+
+	start();
+
+},1000);
+
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+
+var clicou = false;
+function btn(e){
+
+	if(!clicou){
+
+			
+
+			var button = $(e).attr('characters');
+			var characters = $("#view").attr('characters');
+			var score = $(".count-score").text();
+			var erros = $(".count-fails").text();
+			
+			var scoreNumber = Number(score);
+			var errosNumber = Number(erros);
+
+			if(erros >= 10){
+				$("#game-over").removeClass('hidden');
+			}else{
+
+				$("#game-over").addClass('hidden');
+
+				if(button === characters){
+					scoreNumber++;
+					$(".count-score").text(scoreNumber);
+					$("#score").addClass("animate__backInDown");
+
+					$(".add-segundos").show();
+			
+					startAddTime('start', 0, 2);
+
+					clicou = false;
+
+					start();
+
+				}else{
+
+
+					 $(".barra-prog").css("width", '100%');
+		     		 $(".prog").css("display", 'block');
+
+					errosNumber++;
+					$(".count-fails").text(errosNumber);
+					$("#fails").addClass("animate__backInDown");
+
+					 $("."+md5(characters)).addClass("resposta");
+					 
+					
+					reload('fails')
+
+					clicou = true;
+
+				progress();
+				setTimeout(function(){
+					
+					 $(".prog").css("display", 'none');
+					 clearInterval(interval);
+					 $(".add-segundos").hide();
+
+					 clicou = false;
+
+					  start();
+				}, 2000)
+
+				}
+				
+				
+				
+
+			}
+
+
+	
+	startTime();
+	
+
+
+	}else{
+		console.log('btnclicado');
+	}
+}
+
+
+var interval;
+function progress(){
+		
+		var i = 100;
+		interval = setInterval(function(){ 
+		    
+
+		    $(".barra-prog").css("width", i+"%");
+		   	
+		    i--;
+		}, 
+		20);
+
+}
+
+
+function start(){
+	$("#options").html('');
+	var radom = getRandomInt(1, levelTotal);
+	for( var [k,v] of Object.entries(level)){
+	
+		 if (radom == v.number) {
+		 	$("#view").html(v.characters);
+		 	$("#view").attr('characters', v.name);
+		 	$("#view").addClass('animate__rubberBand');
+		 	$(".description-dica").text(v.description);
+		 }
+
+		 $("#options").append(`<button onclick="btn(this)" characters="${v.name}" class="${md5(v.name)}" style="">${v.name}</button>`);
+		 
+	}
+
+	clicou = false;
+}
+
+
+
+function restart(){
+	// window.location.reload(true);
+	
+	reload('restart')
+}
+
+
+var intevalo;
+function startTime(){
+    intevalo = setInterval(function(){
+    	console.log('time')
+    	$("#score").removeClass("animate__backInDown");
+    	$("#fails").removeClass("animate__backInDown");
+    	$("#view").removeClass("animate__rubberBand");
+
+    	stopTime();
+    }, 2000);
+        
+}
+function stopTime(){
+	clearInterval(intevalo);
+}
+
+
+
+
+function reload(e){
+	if(e == 'score'){
+		window.location.href = '.score.';
+	}else if(e == 'fails'){
+		window.location.href = '.fails.';
+	}else if(e == 'restart'){
+		window.location.href = '.restart.';
+	}else{
+
+	}
+}
+
+function closeDica(){
+	$(".dica").removeClass("animate__fadeInDown");
+	$(".dica").addClass("animate__fadeOutUp");
+	timeCss();
+}
+function openDica(){
+	$(".dica").show();
+	$(".dica").addClass("animate__fadeInDown");
+	$(".dica").removeClass("animate__fadeOutUp");
+}
+var timeCsss;
+
+function timeCss(){
+
+	 timeCsss = setInterval(function(){
+		console.log('timeCss');
+	 $(".dica").hide();
+	 clearInterval(timeCsss);
+	},1000);
+}
+
+if(v.level === data.level){
+                console.log('existe');
+
+                var newarry = removerItem(gts, data.level);
+                console.log('nr:',newarry);
+
+                newarry.push(data);
+
+                window.localStorage.setItem("session_"+data.gameType, JSON.stringify(newarry));
+               
+                break;
+            }else{
+
+                
+                console.log('Não existe--------------------------------------------');
+                gts.push(data);
+                window.localStorage.setItem("session_"+data.gameType, JSON.stringify(gts));
+                console.log('------------------------------------------------------')
+                console.log(gts);
+               
+            }
+
+            for( var [k, v] of Object.entries(gts)){
+           
+            if(v.level === data.level){
+                console.log('existe');
+
+                var newarry = removerItem(gts, data.level);
+                console.log('nr:',newarry);
+
+                newarry.push(data);
+
+                window.localStorage.setItem("session_"+data.gameType, JSON.stringify(newarry));
+               
+                break;
+            }else{
+
+                
+                console.log('Não existe--------------------------------------------');
+                gts.push(data);
+                window.localStorage.setItem("session_"+data.gameType, JSON.stringify(gts));
+                console.log('------------------------------------------------------')
+                console.log(gts);
+               
+            }
+
+
+        }

game.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="pt">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" type="text/css" href="css/animate.css">
+
+</head>
+<body class="home">
+  <div class="stars" ></div>
+  <div class="stars2" ></div>
+  
+   <!--  <div class="box-progress">
+      <div class="progressbar">
+        <div class="barra"></div>
+      </div>
+    </div>
+ -->
+    <div class="timer">
+      <div class="add-segundos animate__animated animate__backOutUp animate__slow">+2</div>
+      <div class="minutos"></div>
+    </div>
+
+    <div class="lavel-name"></div>
+
+    <div class="btn-dica animate__animated animate__pulse animate__infinite animate__slow " onclick="openDica()" ></div>
+  <div class="topo">
+
+    <div class="score flax">
+      <div class="titulo">Acertos</div>
+        <div id="score" class="">
+          <span class="count-score">0</span><span>/20</span>
+        </div>
+    </div>
+
+    <div class="fails flax text-right">
+      <div class="titulo">Erros</div>
+        <div id="fails" class="">
+          <span class="count-fails">0</span><span>/10</span>
+        </div>
+    </div>
+
+  </div>
+  <main>
+    <div id="view" characters="" class="showAnimation"></div>
+    <div class="sombra"></div>
+    
+    <section id="options">
+    
+    </section>
+  </main>
+
+  <div id="game-over" class="hidden">
+    <strong>Você Perdeu</strong>
+    <p id="score-gameover" class="message-status"></p>
+    <p id="score-gameover">Score<span class="score-status"></span></p>
+    <p id="score-gameover">Erros: <span class="error-status"></span></p>
+    <button id="restart" onclick="restart()">Recomeçar</button>
+  </div>
+
+  <div id="game-success" class="hidden">
+    <strong>Parabéns</strong>
+    <p id="score-gameover" class="message-status">Você passou de nivel.</p>
+    <p id="score-gameover">Score<span class="score-status-sucess"></span></p>
+    <p id="score-gameover">Erros: <span class="error-status-sucess"></span></p>
+    <button id="restart" onclick="nextlevel()">Proximo</button>
+  </div>
+
+  <div class="dica animate__animated animate__fadeInDown">
+    <div class="close-dica" onclick="closeDica()"></div>
+    <div class="titulo-dica">Dicas</div>
+    <div class="description-dica">Descricao</div>
+
+  </div>
+  <!-- <div class="btn-next">Proximo</div> -->
+  <div class="prog">
+    <div class="barra-prog"></div>
+  </div>
+  <script src="js/jquery.js"></script>
+  <script src="js/lodash.js"></script>
+  <script src="js/cronometro.js"></script>
+  <script src="js/global.js"></script>
+  <script src="js/md5.js"></script>
+  <div class="scripts"></div>
+  <script src="logica.js"></script>
+</body>
+</html>

home.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="pt">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="shortcut icon" href="icons/icon.png" type="image/x-icon">
+  <link rel="stylesheet" type="text/css" href="css/animate.css">
+  <title>Acerte! Home</title>
+</head>
+<body class="home">
+  
+  <div class="perfil">
+      <h1>Acerte<span class="animate__animated animate__heartBeat animate__infinite infinite" style="display: inline-flex;">!</span></h1>
+      <label class="animate__animated animate__zoomInUp">Escolha uma Jogo e Divirta-se</label>
+  </div>
+
+  <div class="container">
+    
+
+
+    <div class="padd-box" onclick="playGame(this)" name="caracteres">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/caracteres.png" width="100%">
+        </div>
+        <div class="box-name">Caracteres</div>
+      </div>
+    </div>
+
+     <div class="padd-box" onclick="playGame(this)" name="geometrias">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/geometria.png" width="100%">
+        </div>
+        <div class="box-name">Geometrias</div>
+      </div>
+    </div>
+
+     <div class="padd-box" onclick="playGame(this)" name="numeros">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/numeros.png" width="100%">
+        </div>
+        <div class="box-name">Números</div>
+      </div>
+    </div>
+
+     <div class="padd-box" onclick="playGame(this)" name="palavras">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/palavras.png" width="100%">
+        </div>
+        <div class="box-name">Palavras</div>
+      </div>
+    </div>
+
+
+     <div class="padd-box" onclick="playGame(this)" name="fisica">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/fisica.png" width="100%">
+        </div>
+        <div class="box-name">Física</div>
+      </div>
+    </div>
+
+    <div class="padd-box" onclick="playGame(this)" name="tradusa">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/indioma.png" width="100%">
+        </div>
+        <div class="box-name">Tradusa</div>
+      </div>
+    </div>
+
+    <div class="padd-box" onclick="playGame(this)" name="images">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/images.png" width="100%">
+        </div>
+        <div class="box-name">Images</div>
+      </div>
+    </div>
+
+     <div class="padd-box" onclick="playGame(this)" name="cores">
+      <div class="box">
+        <div class="box-icon">
+          <img src="icons/cores.png" width="100%">
+        </div>
+        <div class="box-name">Cores</div>
+      </div>
+    </div>
+
+  </div>
+
+<div class="list-level">
+  <div class="padd-level">
+     <div class="titulo-level">Nivel <div class="close-list-level" onclick="closeListLevel()"></div></div>
+     <div class="list">
+
+        <div class="list-item" onclick="openLevel(this)" name="level1">
+          Level 1 
+          <div class="status-level-list">Concluido</div>
+        </div>
+
+        <div class="list-item" onclick="openLevel(this)" name="level2">
+          Level 2
+          <div class="status-level-list">Concluido</div>
+        </div>
+
+        <div class="list-item" onclick="openLevel(this)" name="level3">
+          Level 3 
+          <div class="status-level-list">Concluido</div>
+        </div>
+
+        <div class="list-item" onclick="openLevel(this)" name="level4">
+          Level 4 
+          <div class="status-level-list">Concluido</div>
+        </div>
+
+        <div class="list-item" onclick="openLevel(this)" name="level5">
+          Level 5 
+          <div class="status-level-list">Concluido</div>
+        </div>
+      
+     </div>
+  </div>
+</div>
+<div class="btn-next">level:</div>
+  
+
+  <script src="js/jquery.js"></script>
+  <script src="js/home.js"></script>
+</body>
+</html>

logica.js

@@ -0,0 +1,214 @@
+//carregar script no dom
+
+	var gameType = window.localStorage.getItem('gameType');
+	console.log(gameType);
+	try{
+		
+		var sessionLevel =  window.localStorage.getItem("sessionLevel");;
+		var level;
+		var levelTotal;
+
+		document.querySelector(".lavel-name").textContent = sessionLevel;
+		
+		$.getScript( "level/"+gameType+"/"+sessionLevel+".js" )
+		  .done(function( script, textStatus ) {
+		    $(".scripts").html('<script>'+script+'</script>');
+		  })
+		  .fail(function( jqxhr, settings, exception ) {
+		    console.log("getScript:",exception);
+		});
+
+
+	}catch(e){
+		console.log('Status:', e.message);
+	}
+
+	setTimeout(function(){
+		if(sessionLevel == 'level1'){
+			level = level1;
+			levelTotal = level.length;
+		}else if(sessionLevel == 'level2'){
+			level = level2
+			levelTotal = level.length;
+		}else if(sessionLevel == 'level3'){
+			level = level3
+			levelTotal = level.length;
+		}else if(sessionLevel == 'level4'){
+			level = level4
+			levelTotal = level.length;
+		}else if(sessionLevel == 'level5'){
+			level = level5
+			levelTotal = level.length;
+		}else if(sessionLevel == 'level6'){
+			level = level6
+			levelTotal = level.length;
+		}else{
+			level = level1;
+			levelTotal = level.length;
+		}
+
+		start();
+
+	},1000);
+
+//carregar script no dom
+
+
+//start -----------------------------------------------------
+function start(){
+	var random = getRandomInt(1, levelTotal);
+	buttons.innerHTML = '';
+
+
+	for( var [k,v] of Object.entries(level)){
+		 
+		 if (random == v.number) {
+			 	views.innerHTML = v.pergunta;
+			 	// console.log('Resposta',v.resposta)
+			 	views.setAttribute("resposta", v.resposta)
+			 	modal.innerText = v.description;
+			 	AnimateIn();
+		 }
+
+
+		 var buttonElemet = document.createElement("button");
+		 		 buttonElemet.setAttribute("class", md5(v.resposta));
+		 		 buttonElemet.setAttribute("onclick", "btn(this)");
+		 		 buttonElemet.setAttribute("resposta", v.resposta);
+		 		 buttonElemet.innerText = v.resposta;
+		 		 buttons.appendChild(buttonElemet);
+
+
+	}
+
+	selected = false;
+
+	if(Number(score.innerText) >= 3){
+
+		var itemlevel = {
+			gameType: gameType,
+			level: sessionLevel,
+			score: score.innerText,
+			fails: fails.innerText,
+		}
+
+		addSessionLevel(itemlevel);
+
+		gameSucess.classList.remove("hidden");
+		
+	}else{
+		console.log('ainda n finalizou')
+	}
+
+}
+//start -----------------------------------------------------
+
+//btn--------------------------------------------------------
+
+
+function btn(e){
+	var resposta = e.getAttribute("resposta");
+	var viewRespsota = views.getAttribute("resposta");
+	var scoreNumber = Number(score.innerText);
+	var errosNumber = Number(fails.innerText);
+
+
+	if(!selected){
+
+		if(Number(fails.innerText) >=10){
+			   gameOver.classList.remove("hidden");
+		}else{
+
+				if(resposta == viewRespsota){
+
+					
+
+					
+
+
+					selected = false;
+					scoreNumber++;
+					score.innerText = scoreNumber;
+					addSegundos.style.display = 'block';
+					startAddTime('start', 0, 2);
+
+					setTimeout(function(){
+						start();
+					}, 500)
+					
+				}else{
+
+					selected = true;
+
+
+					$("."+md5(viewRespsota)).addClass("resposta");
+					
+					
+					errosNumber++;
+					fails.innerText = errosNumber;
+
+					barraProgresso.style.width = '100%';
+					progresso.style.display = 'block';
+					
+
+					progress();
+
+					setTimeout(function(){
+						 $(".prog").css("display", 'none');
+						 clearInterval(intervalProg);
+						 addSegundos.style.display = 'hide';
+
+						
+
+						  start();
+				  }, 2000)
+
+					// start();
+				}
+
+		}
+	
+		
+	}
+}
+
+function restart(){
+	// window.location.reload(true);
+	
+	reload('restart')
+}
+
+
+function reload(e){
+	if(e == 'score'){
+		window.location.href = '.score.';
+	}else if(e == 'fails'){
+		window.location.href = '.fails.';
+	}else if(e == 'restart'){
+		window.location.href = '.restart.';
+	}else{
+
+	}
+}
+
+
+function closeDica(){
+	$(".dica").removeClass("animate__fadeInDown");
+	$(".dica").addClass("animate__fadeOutUp");
+	timeCss();
+}
+function openDica(){
+	$(".dica").show();
+	$(".dica").addClass("animate__fadeInDown");
+	$(".dica").removeClass("animate__fadeOutUp");
+}
+var timeCsss;
+
+function timeCss(){
+
+	 timeCsss = setInterval(function(){
+		
+	 $(".dica").hide();
+	 clearInterval(timeCsss);
+	},1000);
+}