arturpequeno/Alura_Logica_Programacao_II_jogoDaCasa01.html Secret

## Alura_Logica_Programacao_II_jogoDaCasa01.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
    <title></title>
<title>Esquadros: Jogo da Casinha</title>
<button id=botao0 style="height: 100px; width:600px"><h1>COLOQUE O TELHADO NA CASA</h1></button>
</head>
<body style="height:600px; width:600px">
<canvas width="600" height="350"></canvas>
<button id=botao1 style="height:100px; width:150px"><h1>⇦</h1></button><button id=botao2 style="height:100px; width:150px"><h1>⇧</h1></button><button id=botao3 style="height:100px; width:150px"><h1>⇩</h1></button><button id=botao4 style="height:100px; width:150px"><h1>⇨</h1></button>
<button id=botao5 style="height:70px; width:600px"><h1>Conseguiu? Clique AQUI!</h1></button>
<script>
    var serie0000 = [130];
    var pivot = [0, 150, 200]
    var serie2015 = [0, 60, 34, 20];
    var serie2016 = [0, 65, 24, 15];
    var serie2017 = [0, 35, 29, 20];
    var randomNum = Math.round(Math.random()*5);
    var resultLog = [];
    var cores = ['orange','blue', 'lightgreen', 'yellow', 'red','pink','black'];
    function reloadPage(){location.reload();}
    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);}
    function desenhaRetanguloVazio(x, y, largura, altura,cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.strokeStyle=cor;
        pincel.strokeRect(x,y, largura, altura);}
    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);}
    function desenhaPlanoDeFundo(cor){
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = cor;
        pincel.fillRect(0,0,600,400);}
    function desenhaPlanoDaFrente(cor){
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = cor;
        pincel.fillRect(0,300,600,400);}
    function bgStatic(){
        desenhaPlanoDeFundo('lightblue');
        desenhaPlanoDaFrente('green');
        desenhaRetangulo(330,150,200,150,'yellow');
        desenhaRetangulo(430,175,75,75,'brown');
        desenhaRetangulo(435,180,30,30,'white');
        desenhaRetangulo(470,180,30,30,'white');
        desenhaRetangulo(470,215,30,30,'white');
        desenhaRetangulo(435,215,30,30,'white');
        desenhaRetangulo(345,175,60,125,'brown');}
    function desenhaTrianguloGrande(){
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle=cores[6];
        pincel.beginPath();
        pincel.moveTo(pivot[1]-130, pivot[2]+100);
        pincel.lineTo(pivot[1], pivot[2]);
        pincel.lineTo(pivot[1]+130, pivot[2]+100);
        pincel.fill();

        pincel.fillStyle=cores[4];
        pincel.beginPath();
        pincel.moveTo(pivot[1]-105, pivot[2]+92);
        pincel.lineTo(pivot[1], pivot[2]+10);
        pincel.lineTo(pivot[1]+105, pivot[2]+92);
        pincel.fill();}

    function cliqueEsquerda(){
        pivot[1]=pivot[1]-10;
        bgStatic();
        desenhaTrianguloGrande();
    }
    function cliqueDireita(){
        pivot[1]=pivot[1]+10;
        bgStatic();
        desenhaTrianguloGrande();
    }

    function cliqueCima(){
        pivot[2]=pivot[2]-10;
        bgStatic();
        desenhaTrianguloGrande();
    };
    function cliqueBaixo(){
        pivot[2]=pivot[2]+10;
        bgStatic();
        desenhaTrianguloGrande();
    };

    function verifica(){
        var a = pivot[1];
        var b = pivot[2];
        if (a==430&&b==50){
                window.location.href='https://i.giphy.com/media/26DOoDwdNGKAg6UKI/giphy.webp';
                } else {
                feedback2();
                }}
    function feedback(){
        alert(pivot[1]+","+pivot[2]) }
    function feedback2(){
        var a = pivot[1];
        var b = pivot[2];
        if(a<430){alert("Mais pra direita!")}
        if(a>430){alert("Mais pra esquerda!")}
        if(b>50){alert("Mais pra cima!")}
        if(b<50){alert("Mais pra baixo!")}
        }

    bgStatic();
    desenhaTrianguloGrande();

    var botao0 = document.getElementById('botao0');
    botao0.onclick = reloadPage;
    var botao1 = document.getElementById('botao1');
    botao1.onclick = cliqueEsquerda;
    var botao2 = document.getElementById('botao2');
    botao2.onclick = cliqueCima;
    var botao3 = document.getElementById('botao3');
    botao3.onclick = cliqueBaixo;
    var botao4 = document.getElementById('botao4');
    botao4.onclick = cliqueDireita;
    var botao5 = document.getElementById('botao5');
    botao5.onclick = verifica;

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<meta charset="UTF-8">
	<head>
	<title></title>
	<title>Esquadros: Jogo da Casinha</title>
	<button id=botao0 style="height: 100px; width:600px"><h1>COLOQUE O TELHADO NA CASA</h1></button>
	</head>
	<body style="height:600px; width:600px">
	<canvas width="600" height="350"></canvas>
	<button id=botao1 style="height:100px; width:150px"><h1>⇦</h1></button><button id=botao2 style="height:100px; width:150px"><h1>⇧</h1></button><button id=botao3 style="height:100px; width:150px"><h1>⇩</h1></button><button id=botao4 style="height:100px; width:150px"><h1>⇨</h1></button>
	<button id=botao5 style="height:70px; width:600px"><h1>Conseguiu? Clique AQUI!</h1></button>
	<script>
	var serie0000 = [130];
	var pivot = [0, 150, 200]
	var serie2015 = [0, 60, 34, 20];
	var serie2016 = [0, 65, 24, 15];
	var serie2017 = [0, 35, 29, 20];
	var randomNum = Math.round(Math.random()*5);
	var resultLog = [];
	var cores = ['orange','blue', 'lightgreen', 'yellow', 'red','pink','black'];
	function reloadPage(){location.reload();}
	function desenhaRetangulo(x, y, largura, altura, cor) {
	var tela = document.querySelector('canvas');
	var pincel = tela.getContext('2d');
	pincel.fillStyle=cor;
	pincel.fillRect(x,y, largura, altura);
	pincel.strokeStyle='black';
	pincel.strokeRect(x,y, largura, altura);}
	function desenhaRetanguloVazio(x, y, largura, altura,cor) {
	var tela = document.querySelector('canvas');
	var pincel = tela.getContext('2d');
	pincel.strokeStyle=cor;
	pincel.strokeRect(x,y, largura, altura);}
	function desenhaTexto(x, y, texto) {
	var tela = document.querySelector('canvas');
	var pincel = tela.getContext('2d');

	pincel.font='15px Georgia';
	pincel.fillStyle='black';
	pincel.fillText(texto, x, y);}
	function desenhaPlanoDeFundo(cor){
	var tela = document.querySelector('canvas');
	var pincel = tela.getContext('2d');
	pincel.fillStyle = cor;
	pincel.fillRect(0,0,600,400);}
	function desenhaPlanoDaFrente(cor){
	var tela = document.querySelector('canvas');
	var pincel = tela.getContext('2d');
	pincel.fillStyle = cor;
	pincel.fillRect(0,300,600,400);}
	function bgStatic(){
	desenhaPlanoDeFundo('lightblue');
	desenhaPlanoDaFrente('green');
	desenhaRetangulo(330,150,200,150,'yellow');
	desenhaRetangulo(430,175,75,75,'brown');
	desenhaRetangulo(435,180,30,30,'white');
	desenhaRetangulo(470,180,30,30,'white');
	desenhaRetangulo(470,215,30,30,'white');
	desenhaRetangulo(435,215,30,30,'white');
	desenhaRetangulo(345,175,60,125,'brown');}
	function desenhaTrianguloGrande(){
	var tela = document.querySelector('canvas');
	var pincel = tela.getContext('2d');
	pincel.fillStyle=cores[6];
	pincel.beginPath();
	pincel.moveTo(pivot[1]-130, pivot[2]+100);
	pincel.lineTo(pivot[1], pivot[2]);
	pincel.lineTo(pivot[1]+130, pivot[2]+100);
	pincel.fill();

	pincel.fillStyle=cores[4];
	pincel.beginPath();
	pincel.moveTo(pivot[1]-105, pivot[2]+92);
	pincel.lineTo(pivot[1], pivot[2]+10);
	pincel.lineTo(pivot[1]+105, pivot[2]+92);
	pincel.fill();}

	function cliqueEsquerda(){
	pivot[1]=pivot[1]-10;
	bgStatic();
	desenhaTrianguloGrande();
	}
	function cliqueDireita(){
	pivot[1]=pivot[1]+10;
	bgStatic();
	desenhaTrianguloGrande();
	}

	function cliqueCima(){
	pivot[2]=pivot[2]-10;
	bgStatic();
	desenhaTrianguloGrande();
	};
	function cliqueBaixo(){
	pivot[2]=pivot[2]+10;
	bgStatic();
	desenhaTrianguloGrande();
	};

	function verifica(){
	var a = pivot[1];
	var b = pivot[2];
	if (a==430&&b==50){
	window.location.href='https://i.giphy.com/media/26DOoDwdNGKAg6UKI/giphy.webp';
	} else {
	feedback2();
	}}
	function feedback(){
	alert(pivot[1]+","+pivot[2]) }
	function feedback2(){
	var a = pivot[1];
	var b = pivot[2];
	if(a<430){alert("Mais pra direita!")}
	if(a>430){alert("Mais pra esquerda!")}
	if(b>50){alert("Mais pra cima!")}
	if(b<50){alert("Mais pra baixo!")}
	}

	bgStatic();
	desenhaTrianguloGrande();

	var botao0 = document.getElementById('botao0');
	botao0.onclick = reloadPage;
	var botao1 = document.getElementById('botao1');
	botao1.onclick = cliqueEsquerda;
	var botao2 = document.getElementById('botao2');
	botao2.onclick = cliqueCima;
	var botao3 = document.getElementById('botao3');
	botao3.onclick = cliqueBaixo;
	var botao4 = document.getElementById('botao4');
	botao4.onclick = cliqueDireita;
	var botao5 = document.getElementById('botao5');
	botao5.onclick = verifica;

	</script>

	</body>
	</html>