<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);
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);
}
var x = 20;
function atualizaTela() {
limpaTela();
desenhaCirculo(x, 20, 10);
x++;
if (x >= 600){
impaTela();
desenhaCirculo(x, 20, 10);
x = x - 1;
}
}
setInterval(atualizaTela, 10)
</script>
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas
respostas
Não entendi o pq o código não funciona
Fala Luan, Beleza?
Notei que você está chamando a função limpaTela com o texto errado. Tenta alterar esse código e rodar novamente.
if (x >= 600){
limpaTela();
desenhaCirculo(x, 20, 10);
x = x - 1;
}eu notei esse erro e depois corrigir, mas mesmo assim não funcionou
solução!
Fala Luan... Desculpa ter trazido a resposta incompleta mas é que acabei tentando te ajudar de forma rápida e não adiantou, né?
Olha só, da forma que vc desenvolveu o código o teu x ficará "preso" em um determinado número. Coloca o console.log(x) dentro da função atualizarTela pra você conseguir ver esse efeito.
A solução é criar uma variável, fora da função atualizarTela(), para controlar o sentido que a bola vai andar. Inicialmente pode ser 1 positivo para o sentido ser para a direita.
Dentro da função atualizarTela() só precisamos desenhar a bola 1x, fazer as verificações da posição de x e alterar o sentido da bola caso "bata" nas laterais do canvas. Fora das verificações nós controlaremos o sentido adicionando 1 positivo ou negativo ao x.
var sentido = 1;
function atualizarTela() {
limpaTela();
desenhaCirculo(x, 20, 10);
if (x >= 600) {
sentido = -1;
} else if (x <= 10) {
sentido = 1;
}
x += sentido;
}
esse exercicio é o que você precisa fazer a bolinha voltar a tela novamente correto ?
seu pensamento ali esta correto, mais a forma que você montou o codigo que ficou errado.
var x = 20;
var sentido = 1;
function atualizarTela(){
limpaTela();
if( x > 600) {
sentido = -1
}else if( x < 0) {
sentido = 1;
}
desenhaCirculo(x, 20, 10);
x = x + sentido;
}
setInterval(atualizarTela, 10);ah entendi, vlw obrigado