Snake – Jogo em html5 usando Canvas

Nos próximos posts vou escrever um pouco das experiências em html5 que ando fazendo.

Pra iniciar, fiz um jogo simples daqueles que todo celular tem, usando somente o elemento Canvas.

O Canvas funciona como se fosse um “shape” do photoshop, você cria um elemento e lá você pode desenhar literalmente, circulos, quadrados, linhas, pontos, colocar backgrounds, usar degradê, etc.

O Canvas não dá suporte ao ie6, ie7 e ie8. Existe um elemento similar pra eles chamado “shape” e existem algumas libs em javascript que traduz automaticamente tudo o que for desenhado em canvas pra shape, ou seja, você chama o js que ele se vira com o resto. No caso, usei o explorercanvas (dica do Koji), mas também tem o html5.js e o canvas.js disponível pra gente usar.

Jogo em html5

O jogo é bem simples, não tem muitos recursos, poderia ter ranking, som, opções e um monte plus mas não era essa a intenção do primeiro post sobre html5. O jogo tem 8kb (somando html / css e javascript ) pros browsers que suportam canvas e 19kb para os que não suportam. não usa nenhum framework de javascript (do tipo jquery, mootols, prototype) e não faz requisição de nenhuma imagem, tudo que está na tela foi desenhado em canvas com javascript.

Deixei disponível o código fonte e para jogar é só clicar na imagem ou entrar aqui

Por sinal, recomento o Chrome ou Opera 10.5 que são os browsers mais rápidos da atualidade.

Quem jogar, fala quantos pontos fez.
=)

6 thoughts on “Snake – Jogo em html5 usando Canvas

  1. Então, tinha ouvido falar no html5.js, que englobava isso (canvas) entre outras coisas como video e audio pra browsers que nao suportao html5, mas também não testei não. Vou dar uma olhada depois respondo.

  2. Ahh, finalmente um post hein Danilo… tava achando já que tinha desistido de escrever…

    Dá pra ver que esse tempo todo parado serviu para desenvolver outras habilidades … muito bom!

    Quer dizer então que tá aprendendo sobre canvas e desenvolvendo em Js puro usando objetos… legal.

    Parabéns mesmo. Fiz 10 pontos na primeira vez que joguei =z, o máximo foi de 5.150 pontos.

    Um grande abraço.

  3. Muuito legal o post.

    Gostaria de saber como posso me dedicar para programar um ótimo jogo ou aplicativo web sofisticado em html5, css3, JavaScript, canvas, etc.. sabendo que no outro dia alguém pode copiar todo o código fonte e alterar sem esforço algum.

    Sou programador AS3 e sei que isso não acontece com o arquivo compilado do flash/flex, já que o arquivo é binário e ainda existe programas para proteger ainda mais o arquivo contra decompilação.

    O cliente nunca consegue exibir o código fonte e nem saber a estrutura do script.

    Estou estudando html5 e gostando, mas um pouco desanimado em relação a esses fatores. É complicado vc criar um album animado em 3D, ou um jogo muito complexo, e no outro dia ver milhares de cópias modificadas.

    Um Abraço para todos!

  4. háááá fala sério esse joguinho sou viciado desde a época dos celulares “antigos”…rsr… agora posso fazer esse joguinho em html somente…..muito legal

Leave a Reply

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