Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Com os conhecimentos visto até essa aula, fiz esse mini jogo aqui

<meta charset="UTF-8">
<canvas width="600" height="300"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightblue';
    pincel.fillRect(0, 0, 600, 600);

    function desenhaFundoTela() {
        pincel.fillStyle = 'lightblue';
        pincel.fillRect(0, 0, 600, 300);
    }

    function atualizaTela() {
        desenhaFundoTela();
        desenhaObstaculo();
    }

    function moverCarrinho(evento) {
        atualizaTela();
        pincel.fillStyle = 'red';
        pincel.fillRect(evento.pageX - tela.offsetLeft-20, yCarrinho, 100, 40);
        xCarrinho = evento.pageX - tela.offsetLeft-20;
    }

    function desenhaObstaculo() {
        pincel.fillStyle = 'black';
        pincel.fillRect(xObstaculo, yObstaculo, 50, 50);
    }

    function verificarColisao() {
        if (yObstaculo+40 == yCarrinho) {
            console.log('xCarrinho = ' + xCarrinho);
            console.log('xObstaculo = ' + xObstaculo);
            if(xCarrinho - xObstaculo < 40 && xObstaculo - xCarrinho < 100) {
                alert('VOCÊ PERDEU !!!')
            }
        }

    }

    function moverObstaculo() {
        atualizaTela();
        yObstaculo++;
        verificarColisao();
        if(yObstaculo == 300) {
            qtdObstaculos++;
            if(qtdObstaculos==5) {
                alert('VOCÊ GANHOU!!!!');
            } else {
                yObstaculo = 0;
                xObstaculo = inicioAleatorioObstaculo();
            }
        }
    }

    function inicioAleatorioObstaculo() {
        return Math.round(Math.random()*550);
    }

    function mostrarCarrinho() {
        atualizaTela();
        pincel.fillStyle = 'red';
        pincel.fillRect(xCarrinho, yCarrinho, 100, 40);
    }

    var xObstaculo = 200;
    var yObstaculo = 0;
    var xCarrinho;
    var yCarrinho = 260;
    var qtdObstaculos = 0;

    setInterval(moverObstaculo, 10);

    tela.onmousemove = moverCarrinho;

    setInterval(mostrarCarrinho, 5);

</script>
1 resposta
solução!

Oi, Danilo! Espero que esteja bem!

Ficou super legal, obrigada por ter compartilhado com a gente aqui no fórum e parabéns pelo projeto! Tenho certeza que será inspiração para muitos colegas que estão realizando o curso. Espero que tenha gostado do curso!

Colocar em execução as atividades propostas pelo professor em aula é uma prática muito importante para internalizarmos o conteúdo.

Parabéns por ter concluído essa etapa do projeto e parabéns pelo desempenho e dedicação ao desenvolver o código! É muito gratificante poder acompanhar a sua evolução, continue se dedicando, praticando e explorando os conteúdos dentro do mundo da programação.

Caso tenha ficado alguma dúvida em relação ao curso ou a alguma atividade, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!