Dúvida no Ex. 3 da Aula 4 - Movendo elementos: animações simples

Olá Roberto! O problema é que você não está utilizando o setInterval(). Se você assisti a aula novamente ou ler a explicação verá a explicação para seu problema. O que acontece é que o computador processa bem rápido todo o código em alguns milésimos de segundo, fazendo assim com que a gente não veja a animação de fato. Devido a isso é necessário utilizar o setInterval() para atrasar um pouco a execução fazendo cada entre intervalos de tempo. Assim, podemos ver a animação. Veja novamente o vídeo ou a explicação que tem explicando tudo que você tem que fazer.

Espero ter ajudado! Bons Estudos!

Não é esse o problema sei do uso setInterval, mas esse script ele só mostra imagens sem animação ele faz parte de um projeto. Mas mesmo assim valeu a dica. O que acontece é que Chrome removeu o plugin Java para visualização de sites que rodam animações e etc ,mas não é o caso aqui não só com images que isto ocorre mas com plugins, bootstrap, wow.js já no firefox aceita até svg.

Roberto, ainda não entendi sua duvida. A proposta do exercício é fazer uma animação com uma imagem, ou seja fazer ela se mover da mesma forma como foi feito no exercício anterior chamado "Primeira Animação". Eu testei seu código aqui, fazendo as alterações que disse, no Chrome, e funcionou corretamente, a animação está funcionando normalmente.

O problema aqui é que não consigo rodar o programa no google chrome, quando abro o console em sources a pasta das imagens e as imagens não aparecem e fica uma tela azul que é do background. No Firefox fica tudo ok.

Hum.. Aqui está seu código alterado para a animação:

<canvas id="tela" width="600" height="400" style="margin-left:250px;margin-top:100px;border:1px solid #000;" />

<script>
var tela = document.getElementById("tela")
var c = tela.getContext("2d");

var img = new Image();
    img.src ='img/grama.png';

var x = 0;

var limpaTela = function(){
    c.clearRect(0,0, 600, 400);
}

var desenhaImagem = function(x){
     c.drawImage(img, x, 320, 180, 80);
}

var animacao = function(){
    limpaTela();
    desenhaImagem(x);
    x += 1;
}

setInterval(animacao, 30)

</script>

E aqui está funcionando normalmente, tanto no Chromes como no Firefox. Como eu disse, seu código estava incompleto, faltava funções e o setInterval(). Mas se ainda continuar o erro ou algum problema, estamos aqui para resolver.

Funcionou,

<canvas id="tela" width="600" height="400" style="margin-left:250px;margin-top:100px;border:1px solid #000;" />

<script>
var tela = document.getElementById("tela")
var c = tela.getContext("2d");

var img3 = new Image();
    img3.src ="img/arvore2.png";
var img2 = new Image();
    img2.src ="img/folhagens.png";
var img = new Image();
    img.src ='img/gramas.png';

var x = 0

var limpaTela = function(){
    c.clearRect(0,0, 600, 400);
}

var desenhaImagem = function(x){
    //Declarei as variaveis dentro da função
    var x = 1;
    var x2 = 1;
    var x3 = 0;
    //O while vai colocar as imagens lado a lado
    while(x < 600) {
        c.drawImage(img3,x3 + 400,70,250,300);
        c.drawImage(img, x, 320, 120, 80);
        c.drawImage(img2, x2, 305, 120, 60);

        x += 120;
        x2 += 120;
        x3 += 0;

    };
}
var desenha = function(){
    limpaTela();
    desenhaImagem(x);
    x += 0;    //Deixei o incremento com valor 0
}
setInterval(desenha)//O setInterval sem o tempo

</script>

Que bom Roberto! Alguma dúvida ainda?