Pular para o conteúdo principal

Novo endereço

Fala galera, beleza? Esse blog aqui ja ta parado a muito tempo, se você quer mais conteúdo tech basta ir para  https://tuliocalil.com.br/ . 

Super Mario Bros em Javascript no navegador


La estava eu, em pleno carnaval, sem nada pra fazer além de codar e assistir netflix, e de repente, fico sem internet por quase 48 horas. Ai eu pensei; Vou brincar com javascript, vou tentar fazer algo interativo... um jogo.



Eu sou fã de Super Mario (apesar de não acompanhar os novos lançamentos), mas o Mario de Nes foi o que mais me marcou, já que na infância fazia campeonatos com amigos pra ver quem termina uma fase mais rápido.
Desenvolver isso foi ótimo para mim, me fez sentir que programação não é só aquela responsabilidade e coisas mais mecânicas, é diversão também. 
Esse projeto me fez lembrar o quanto é legal criar algo sem compromisso, só para se divertir, e isso eu só lembrei graças ao vídeo do Felipe Deschamps.

Bom, o "jogo" foi feito quase todo com javascript, mas tem sua parcela de html e css(na verdade o css é mais pra pagina em si, e não pro jogo, assim como o Html). Você pode jogar clicando aqui. 
Eu upei todo o código no Github, esta bem comentado e simplificado, você pode conferir aqui.

Comentários

  1. Desculpa o comentário, não entendi até hoje como chamar um som ao clicar um botão, exemplo do jogo, Mario pula e sai som de pulo, e por aí vai... Música de fundo ao iniciar a página.

    Como seria isto no JavaScript do React Native? Bons estudos aí.

    ResponderExcluir
    Respostas
    1. Fala mano! Desculpa a demora pra responder, então, o áudio no JS é bem simples, você pode fazer ele instanciando um novo objeto do tipo Audio, passando o caminho do áudio no construtor, por exemplo; const audio = new Audio('./assets/audio.mp3'); e logo em seguida, no novo objeto criado, chamar o método play; audio.play();
      Já no React Native é um pouco parecido, mas você vai precisar de uma lib pra isso, dê uma olhada nessa aqui:
      https://github.com/react-native-community/react-native-audio-toolkit

      Excluir

Postar um comentário

Postagens mais visitadas deste blog

Documentando APIs Rest - Swagger, OpenApi e Insomnia

Acredito que seja "batido" dizer que documentação é uma boa prática e deveria ser um pré-requisito nos projetos(as vezes até é, só não é implementado).

3 Kits de Interface para React Native - Ui Kits 2020

Já aconteceu de você precisar desenvolver um app em pouco tempo ou mesmo não ser muito bom na interface e acabar travando por isso? E que tal acelerar ainda mais o desenvolvimento de seus apps no React Native com componentes prontos, já estilizados e muito bonitos ? Então aqui vai os 3 kits de interface (ui kits) para você arrasar no prazo e no desgin dos seus apps! NativeBase O Ui kit que mais uso é o native base, como o nome sugere, ele consegue entregar uma interface com "estilização nativa" para o android e ios.  É um kit muito completo, robusto e simples de usar. Além de ser muito bonito ele conta com uma ferramenta incrível de temas ( similar ao do styled components ), para você personalizar as cores, fontes e tamanhos direto nesse app web aqui. Alguns componentes desse kit; Botões Cards Ui Kitten   Esse é um kit bem legal, baseado no Eva Design System , tem uns recursos bem legais pra estilização e tema, que...