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;