Eu estou praticando o que aprendi no curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo. eu estou tentando fazer um código de uma animação de um quadrado se mexendo mas não consigo.
Eu estou praticando o que aprendi no curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo. eu estou tentando fazer um código de uma animação de um quadrado se mexendo mas não consigo.
<canvas widh="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'red';
pincel.fillRect(0, 0, 600, 400);
function desenhaQuadrado(x,0,0,20,20){
pincel.fillStyle = 'Red';
pincel.beginPath();
pincel.arc(0,0,20,20);
pincel.fill();
}
function limpaTela(){
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
function atulizaTela(){
limpaTela();
desenhaQuadrado(x,20,10);
x++;
}
setInterval(atulizaTela, 20);
</script>
Oi, Jorge! Tudo bem?
O código que você forneceu tem alguns pontos que precisam ser ajustados para funcionar corretamente.
Você está usando arc()
para desenhar o quadrado, mas esse método desenha um círculo. Para um quadrado, utilize o método fillRect()
.
Além disso, a função desenhaQuadrado
tem parâmetros errados na chamada. Eles não estão alinhados com os valores que você está passando.
Vamos corrigir esses pontos no seu código:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
// Função para desenhar o quadrado
function desenhaQuadrado(x, y){
pincel.fillStyle = 'red';
pincel.fillRect(x, y, 20, 20);
}
// Função para limpar a tela
function limpaTela(){
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var y = 150; // Definindo uma posição inicial para o quadrado
// Função para atualizar a tela
function atualizaTela(){
limpaTela();
desenhaQuadrado(x, y);
x++; // Incrementando a posição x para mover o quadrado
}
// Atualizando a tela a cada 20ms
setInterval(atualizaTela, 20);
</script>
Agora o quadrado será desenhado corretamente e se moverá para a direita na tela.
Fico à disposição. Abraços e bons estudos!