Um joguinho de carro simples feito com React js live DEMO: https://upcar-f0f65.firebaseapp.com/
yarn install ou npm install
yarn start ou npm start
Para montar esse simples joguinho apenas com a manipulação dos elementos do DOM sem utilizar libs como o canvas, foi preciso driblar alguns desafios:
Para movimentar o carro ele foi posicionado ao bottom da div main do jogo e sua posição alterava de com base na margem do carro ao limite esquerdo da tela.
Para gerar os obstáculos(CONES) e identificar as colisões foi renderizados divs no centro do cenário com animações que fazem as divs irem do centro ao bottom, simulando assim a aproximação do carro ao obstáculo. Ao término da animação é verificado se o carro se encontra na mesma posição do cone, se sim, é contabilizado um colisão.
Lista de "ferramentas" utilizadas para construir o joguinho: