Trazendo o Atari para o HTML5 com Canvas: Space Invaders

Continuando minha pesquisa sobre HTML5 usando canvas, aqui está meu mais novo experimento: recriei à minha moda o clássico “Space Invaders” do Atari. Confesso que fiquei MUITO satisfeito com o resultado e, espero, vocês também.

Desta vez não posso dizer que o código seja tão mínimo quanto minha primeira grande experiência, pois um dos meus objetivos foi justamente trabalhar em algo mais complexo. Sendo assim, para evitar ficar perdido em uma multidão de código fonte, optei por modularizar meu projeto.

Há algumas diferenças com relação ao original que devem ser salientadas:

  • O jogo possui final: basta aniquilar todos os invasores para ser saudado com os meus “peculiares parabéns” :D (fica a surpresa). Há somente um nível.
  • Não há barreiras de proteção, o que torna o jogo mais difícil e, na minha opinião, mais divertido também.
  • A coreografia dos invasores está ligeiramente diferente (gera uma certa confusão que me diverte bastante)
  • E, claro, eu vou te xingar o tempo inteiro :D

É importante mencionar que, novamente, é apenas uma prova de conceito. Estou evoluindo aos poucos para que, em um futuro que espero próximo, eu possa desenvolver coisas mais complexas usando tanto HTML5 como outras tecnologias (Flex, OpenGL, Java, etc.). Pra mim, é muito mais uma saída da minha zona de conforto. Saida esta que tem me feito MUITO bem (e eu recomendo a todos).

Sobre compatibilidade entre browsers

Novamente, o browser campeão foi o Chrome. Ele renderizou tudo perfeitamente sem problemas e, o que achei mais interessante: também reproduziu meu áudio perfeitamente. Pra minha surpresa, ele aceitava o formato MP3, que foi aonde gravei os sons pela primeira vez. No Firefox, no entanto, eu só posso tocar arquivos no formato OGG ou WAV (fiquei com preguiça de converter, sendo assim, para ouvir minha voz sexy, use o Chrome), porém a renderização no Firefox, assim como no Chrome, é perfeita.

No IE8 o “Space Invaders” simplesmente não executou. Sinceramente, nem me esforcei neste caso, porque, confesso, tenho birra deste browser (como todos vocês).

Minha grande decepção desta vez foi o Safari. Como não estou com meu macbook, tive de testar meu jogo na versão Windows, e por alguma razão, caso você morra ou termine o jogo, ele trava. Ao usar as ferramentas de desenvolvimento, fiquei muito frustrado, pois elas não me permitem depurar o código tão bem quanto no Chrome ou no Firefox usando Firebug.

Resultado final

Basta clicar na imagem abaixo para ver o resultado. Espero que se divirtam jogando-o (e fuçando meu código) tanto quanto eu AMEI trabalhar nesta brincadeira. Semana que vêm coloco mais uma aventura por aqui.


Publicado

em

,

por

Tags:

Comentários

16 respostas para “Trazendo o Atari para o HTML5 com Canvas: Space Invaders”

  1. Avatar de Mauro
    Mauro

    Jogabilidade muito ruim. Resolução ruim.
    Não tem escudos. Não tem vidas. Não tem opção de reiniciar o jogo.
    Se era para a linguagem ofenciva ter um tom de humor, a ideia não deu certo.

    Prefiro muito mais o Super Mario feito em JavaScript.

    Joguei duas vezes e cancei.
    Game Over pra vc.

    1. Avatar de admin
      admin

      Oi Mauro,
      se tivesse lido o texto do post que descreve o jogo (e acompanhado o anterior no qual inicio as experiências), teria observado que o objetivo não é criar um jogo com jogabilidade fantástica e gráficos surreais mas sim iniciar experiências com o canvas para descobrir o que pode ser feito com este componente.

      Realmente, não há opção para reiniciar o jogo, nem vidas, nem barreiras, como mencionei neste comentário, a idéia é somente ver o que da pra fazer. É por isto que é chamado “prova de conceito”, e não um “release”.

      A “resolução ruim”, no caso, é 100% intencional. Como não tenho experiência com desenvolvimento de jogos, optei por emular os gráficos do Atari, que é o videogame mais simples que conheço. Tanto é, que não é usado em momento algum no jogo uma imagem no formato bitmap,png,etc. Todas as imagens são compostas por matrizes representando cores.

      Bem: óbviamente no seu caso estou tendo a opinião de um jogador, e não a de um programador, que é o público a quem este post se destina. Tanto é, que até agora foi a única opinião negativa que recebi (postei ontem no GUJ esta experiência: http://www.guj.com.br/posts/list/227315.java ). Pode parecer estranho, mas este jogo não é voltado para os usuários finais.

      Com relação à “linguagem ofensiva”, bem: é questão de gosto. Se não gostou, “foda-se pra você” :D

      E pelo fato de você estar comentando um jogo, em um blog sobre desenvolvimento de software sob o ponto apenas do usuário quando na realidade o foco é o código por tras da coisa, e nítidamente não ter lido os posts, eu é que te dou um “Game Over” sem possibilidade de “Continue”. :D

  2. Avatar de goncin

    Kico,

    Em seu lugar, eu nem perderia meu tempo respondendo a alguém que escreve “ofencivo” e “cancei”.

    1. Avatar de admin
      admin

      Tem razão, mas é irresistível Fausto! :D

  3. Avatar de Jcneto

    Cara, show de bola!!

    Legal saber o que dá pra fazer com o HTML5…

    Parabéns pelo experimento!!

  4. Avatar de Adriano
    Adriano

    Bacana, concordo que o jogo não está perfeito, mas como você mesmo disse, é só para fins de experimento, sendo assim, está ótimo.
    Realmente o cara que postou o comentário não foi feliz, e não deveria te agredir da forma que o fez, mas enfim, a dica que quero te deixar é: “Não se zangue pelos comentários ‘destrutivos’ dos outros, pois estes sempre vão existir, o segredo é agradecer, sorrir e continuar como se tal comentário não existisse”. Abraços e não desanime, “toca o barco”!…

  5. Avatar de carlsonwf
    carlsonwf

    Po Kico, cade o 3D? Ta igual jogo de Atari isso!!! Nao tem vida no jogo nem barreira…. Nao resisti, desculpe heheheheh

    1. Avatar de admin
      admin

      Bwah! ha ha ha ha ha ha!

  6. Avatar de Tiago Faustino

    Muito legal essa sua iniciativa. Mesmo como desenvolvedor Java está querendo aprender coisas de outras áreas, digamos assim. Isso está me incentivando a não largar de mão e achar que esse tipo de conhecimento seria irrelevante pra mim, pois com certeza não é. Por ter trabalhado muito com a parte client-side antes do Java consigo perceber como que muita gente “caga e anda” para HTML, e tudo que faz parte da view achando que isso é “coisa de designer”.

    Parabéns cara, e esperamos mais jogos!

    1. Avatar de admin
      admin

      Opa, valeu cara!

  7. Avatar de Rafael
    Rafael

    parabéns, muito bom.
    Todo mundo estudando HTML5 é o futuro.

  8. Avatar de lauro

    KKKKK DESGRAÇADO!
    CAAAARAMBA MANO achei isso coisa de outro mundo!Fazer um jogo online, bom, em uma simples pagina de html, leve, e Freeware!!Nunca imaginei que um dia isso haveria de surgir.
    Sobre o jogo: muito bem feito, relembra muito bem os jogos do antigo Atari!Morro de raiva daqueles “ets” verdes que ficam na última fileira, são os mais difíceis.
    Ah, e onde achas tanto código numa linguagem nova?
    Paz!

    1. Avatar de admin
      admin

      Que bom que gostou. Valeu! :D

  9. Avatar de Rodrigo

    Parabéns, ficou show mesmo! Subiu o código em algum site, tipo SourceForge ou Github?

    Também gostei muito do “hadouken” que você deu no “gamer” babaca que achou o texto “ofencivo”!

  10. Avatar de Anderson
    Anderson

    Show de bola, cara! Não sabia que era possível “refazer esse jogo” dessa forma! Parabéns pela iniciativa!

    1. Avatar de Kico (Henrique Lobo Weissmann)
      Kico (Henrique Lobo Weissmann)

      Obrigado!

Deixe uma resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.