The images are not passing when I click the left and right arrows, can someone help me

0

<!DOCTYPE HTML>

<html>

<head>
	<meta charset="utf-8">
    <title>Garrafa</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
    <div class="principal">

	<img id="tela1" src="img/tela1.jpg" style="display:none;"/>
	<img id="tela2_agua_gota" src="img/tela2_agua_gota.jpg" style="display:none;"/>
	<img id="tela2_martelo" src="img/tela2_martelo.jpg" style="display:none;"/>
	<img id="tela3_agua_flornasce" src="img/tela3_agua_flornasce.jpg" style="display:none;"/>
	<img id="tela3_martelo_pessoaanda" src="img/tela3_martelo_pessoaanda.jpg" style="display:none;"/>
	<img id="tela4_agua_flormorre" src="img/tela4_agua_flormorre.jpg" style="display:none;"/>
	<img id="tela4_martelo_pepe" src="img/tela4_martelo_pepe.jpg" style="display:none;"/>
	<img id="tela5_telainicial" src="img/tela5_telainicial.jpg" style="display:none;"/>
	
	
	<canvas id="meuCanvas" width="800px" height="800px" style="border:1px solid black">error 404</canvas>
	
	<script type="text/javascript">
	
		var cv = document.getElementById("meuCanvas");
		var ctx = cv.getContext("2d"); //ctxo
		
		
		
		window.onload = function() { 
			var image = document.getElementById("tela1");
			ctx.drawImage(image, 0, 0, cv.width, cv.height);
			i = 0;
			j = 0;
			t = setInterval(desenhaTela,2000);
			
		}
		
		document.onkeydown = function(evento) {
            
			//direita
            if (evento.keyCode == 39) {
				j = 1;
			}
			//esquerda
			if (evento.keyCode == 37) {
				j = 2;
			}
		}
		
		function desenhaTela()
		{
			//var meuArray = [ "tela1" , "tela2_agua_gota" , "tela2_martelo" , "tela3_agua_flornasce" , "tela3_martelo_pessoaanda" , "tela4_agua_flormorre" , "tela4_martelo_pepe"];
			var meuArray = [["tela1" , "tela1"]["tela2_agua_gota","tela2_martelo"],["tela3_agua_flornasce" , "tela3_martelo_pessoaanda"], ["tela4_agua_flormorre" , "tela4_martelo_pepe"]];
			var t;
			var y;
			
			
			if(j=1){
				t = meuArray[i][0];
				}
			if(j=2){
				t = meuArray[i][1];			
				}
			
			var image = document.getElementById(t);
		
			ctx.drawImage(image, 0, 0, cv.width, cv.height);
			
			
			i++;
			var y = i % meuArray.length;
			
			if (y = 0) {
				j = 0;
			}
			
		}
		
	</script>
	
    </div>
</body>

</html>
    
asked by anonymous 22.11.2018 / 15:21

0 answers