Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Animação da bolinha via teclado

Puxa vida, tentei de algumas maneiras criar 2 players, preparei tudo mas na hora de funcionar não movimentava ambos... uma pena. Apaguei e deixei só uma bolinha mesmo. No meu arquivo eu fiz até a parte de criação da segunda bolinha na tela e as teclas, mas o onkeydown não aceitou 2 teclas de movimento sendo pressionadas ao mesmo tempo, o que será que faltou? Tava empolgadaço tentando criar os 2 players, mas dessa vez não deu ainda, faltou conhecimento por enquanto kkk.

HTML

<!DOCTYPE html>
<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>Animação usando o teclado</title>
</head>
<body>
    <div>
        <p>Utilize AWSD ou as setas para movimentar a bolinha verde.</p>
        <canvas id="tela" width="600px" height="400px"></canvas>
        <script src="teclado.js"></script>
    </div>
</body>
</html>

JS

const tela = document.querySelector("#tela");
let pincel = tela.getContext("2d");
pincel.fillStyle="lightgray";
pincel.fillRect(0,0,600,400);

let posX = 20;
let posY = 20;
let esquerda = 37;
let cima = 38;
let direita = 39;
let baixo = 40;
let a = 65;
let s = 83;
let d = 68;
let w = 87;

let mover = 10;

function desenhaCircle(posX,posY,raio){
    pincel.fillStyle="green";
    pincel.beginPath();
    pincel.arc(posX,posY,raio,0,2*Math.PI);
    pincel.fill();
}

function limparTela(){
    pincel.clearRect(0,0,600,400);
    pincel.fillStyle="lightgray";
    pincel.fillRect(0,0,600,400);
}

function updateTela(){
    limparTela();
    desenhaCircle(posX,posY,10);
}

setInterval(updateTela,24);

function capturaTecla(evento){
    if(evento.keyCode==esquerda || evento.keyCode == a){
            if(posX>10){
                posX = posX - mover;
            }
    }else if(evento.keyCode == cima || evento.keyCode == w){
            if(posY>10){
                posY = posY - mover;
            }
    }else if(evento.keyCode == direita || evento.keyCode == d){
            if(posX<590){
                posX = posX + mover;
            }
    }else if(evento.keyCode == baixo || evento.keyCode == s){
            if(posY<390){
                posY = posY + mover;
            }
    }
}
document.onkeydown = capturaTecla;
3 respostas
solução!

Finalizado...

Muito bom Alysson, olhando seu código consegui solucionar o meu, essa é uma das belezas da programação; soluções diferentes para resultados iguais no final. Show!!!

Opa, leandro. feliz que tenha conseguido lhe auxiliar :)