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.

14 thoughts on “Trazendo o Atari para o HTML5 com Canvas: Space Invaders

  1. 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.

  2. 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

  3. Kico,

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

  4. 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. Po Kico, cade o 3D? Ta igual jogo de Atari isso!!! Nao tem vida no jogo nem barreira…. Nao resisti, desculpe heheheheh

  6. 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!

  7. 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!

  8. 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”!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.