My-Guitar – Um Guitar Hero em HTML5, CSS3 e JavaScript

Nessa sexta-feira, teve um caf√© com browser, um evento sediado pela w3c Brasil onde ela convida fabricantes de browsers a falarem dos seus produtos, por l√° j√° passou o pessoal do √ďpera, Firefox e at√© da Internet Explorer.

Por√©m, nessa edi√ß√£o o formato foi diferente, o tema era HTML5 e os convidados foram o √Člcio da Visie (empresa de treinamento e desenvolvimento web que vai oferecer um curso de html5) e a Ag√™nciaClick, onde esteve presente eu (Programador de Interface), Robson Dantas (Gerente de Tecnologia) e Ricardo Murer (Diretor de Tecnologia).

Durante a nossa apresentação, mostramos alguns protótipos de estudos que fizemos aqui na AgênciaClick, entre eles um player usando a tag <audio> simulando a interface do winamp e um jogo simulando o Guitar Hero:

Escolha Sua M√ļsica

O jogo est√° dispon√≠vel aqui. Funciona para Chrome 5+, √ďpera 10.5+, Safari 5+ e Firefox 3.5+ (sendo que para Firefox, √© necess√°rio estar hospedado em um servidor, ou seja, se voc√™ abrir o html como um arquivo, n√£o funciona por quest√£o de seguran√ßa do Firefox).

O jogo usa os conceitos de <audio> e <canvas> do HTML5, CSS3 e bastante javascript. Eu desenvolvi o game em 4 dias, ou seja, d√° pra melhorar muito, devo aprimorar o c√≥digo, colocar Ranking Online, mais m√ļsicas, etc.

Mas a idéia inicial era mostrar que pode ser feito um jogo em html5, com 20kb de JavaScript que antes só era possível ser desenvolvido em flash.

Jogo Guitar Hero em HTML5

Game Over - Guitar Hero em HTML5

5 thoughts on “My-Guitar – Um Guitar Hero em HTML5, CSS3 e JavaScript

  1. Parabens! alguem poderia me ajudar? eu quero mudar o esquema de teclas QWERT par GHKLÇ, alguem, por favor?

  2. espectacular!

    ¬Ņque licencia tiene?

    si quiero usar el codigo puedo?

    es un gran trabajo lo que hiciste!

    Javier

  3. Parabéns pelo game, brother.

    Muito viciante. E interessante objeto de estudo.

    Keep going! o/

Leave a Reply

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