Aula 01 a 03

Criação dos arquivos, inicio do html, inserção do dinossauro com display: absolute, criação do JS para monitorar o evento de keyup.

Aula 04 a 05

Para criar a lógica de salto, foi utilizado basicamente os métodos que eu tinha pensado, entretanto não consegui fazer pois não estava passando os parametros corretos para o clearInterval nem estava criando uma lógica para o incremento proporcional da posição no eixo Y.
A criação da rotina de salto foi feita utilizando um encadeamento de rotinas de teste lógico para verificar a posição do bloco com um incremento ou decremento do valor de position, que é passado como parametro para a propriedade .style.bottom. O setInterval() controla o tempo entre cada incremento do position e o clearInterval() limpa o intervalo da variável que atingiu o limite para cima ou para baixo.
Em seguida foi criado um teste lógico para antes de executar a função de salto novamente verificar se o salto está em execução. Isso evita que ao pressionar repetidamente a tecla selecionada a função seja executada antes do seu término.
Para inserir os cactus no mapa utilizamos os métodos createElement(), e appendChild(), para fazer a inclusão dinamicamente.

Aula 06 a 08

Nesta aula primeiramente foi feito a criação de um setInterval() para fazer a movimentação do cactus na tela. Esse intervalo faz o decremento da posição no eixo X que controla a <div> do cactus e o movimenta através do .style.left. Em seguida foi criada uma variável com Math.random() para gerar tempos aleatórios para a criação de um novo cactus. Essa variável foi passada com parametro de um setTimeout() que executa a função createCactus(). Essa função é executada dentro dela mesma ou seja é uma função recursiva. Foi realizado então uma rotina para verificar a posição do cactus em relação ao fim da tela para fazer o colision detect. O colision detect é feito verificando a posição do cactus (entre 0 e 60px left) e a posição do dino (maior que 60).
A última aula é a criação dos estilos em CSS para colocar os elementos no jogo e a animação do piso que foi feita utilizando a propriedade css animation e a criação de um @keyframes que determina a posição inicial e final da tela de background (que define a movimentação do chão).