Oi glr!! Consegui a bolinha se movimentando e criei a primeira raquete, mas não consegui completar a função movimento raquete, conseguem me ajudar?
busquei pelos keycode, mas não achei como habilitar as flexas para controlar a raquete do lado esquerdo.
<canvas width= "600" height ="400"> </canvas>
<script>
var velocidade = 1
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d')
var marcadorX = 1
var x = 300
var marcadorY = 1
var y = 200
var rx1 = 10
var ry1 = 60
function fundo (){
pincel.fillStyle="black";
pincel.fillRect(0, 0, 600, 400);
}
function desenhaCirculo (x,y){
pincel.fillStyle = "white"
pincel.beginPath ();
pincel.arc (x,y,10,0,2*3.14);
pincel.fill ();
}
function limpaCirculo (){
pincel.fillStyle ="black";
pincel.beginPath();
pincel.arc(x,y,20,0,2*3.14)
pincel.fill();
}
function expressãoX (){
if (x>= 600){
marcadorX = -velocidade
}
if (x<=1){
marcadorX = velocidade
}
x = x + marcadorX
}
function expressãoY (){
if (y >= 400){
marcadorY = -velocidade
}
if (y <= 1){
marcadorY = velocidade
}
y = y + marcadorY
}
function bolinha (){
limpaCirculo();
desenhaCirculo(x,y);
expressãoY ();
expressãoX ();
}
setInterval (bolinha, 1);
fundo ();
function raquete (){
pincel.fillStyle = "white"
pincel.beginPath ();
pincel.fillRect (5,5,rx1,ry1);
pincel.fill ();
}
function limpaRetangulo (){
pincel.fillStyle = "black";
pincel.beginPath ()
pincel.fillRect (0,0,rx1,ry1);
pincel.fill ();
}
function movimentoRaquete (){
limpaRetangulo ();
raquete ();
}
raquete ();
</script>
Fiz até onde deu sozinha, agora vou seguir com o curso, obrigada se alguém puder ajudar, abs!