Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Movimentando o circulo pelas teclas (No fim é parecido com o jogo da cobrinha)

Passei um tempão pensando como fazer já que descrição não foi mais clara pedindo um jogo da cobrinha usando um círculo(parecido). achava que estava fazendo errado já que a bolinha desaparecia.

 <html lang="pt-br">
   <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">
   <title>Movimentação</title> 
   </head>
   <body>
   <canvas width="600" height="400"></canvas>
   <script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var x = 20;
    var y = 20;
    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;

function desenhaCirculo(x, y, raio) {

    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();
}

function limpaTela() {

    pincel.clearRect(0, 0, 600, 400);
}

function atualizaTela() {

    limpaTela();
    desenhaCirculo(x, y, 10);
}

setInterval(atualizaTela, 20);

function leDoTeclado(evento) {

    if(evento.keyCode == esquerda) {
        x -= 10;
    }else if(evento.keyCode == direita) {
        x += 10;
    }else if(evento.keyCode == cima) {
        y -= 10;
    }else if(evento.keyCode == baixo) {
        y += 10;
    }
    console.log(x);
    console.log(y);

}
document.onkeydown = leDoTeclado;
</script>
</body>
</html>
1 resposta
solução!

Olá, Drvw! Espero que esteja bem!

É bem parecido mesmo!

Pratique sempre!

Qualquer dúvida que surgir, nos procure!

Um abraço e bons estudos

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software