A partir de hoje vou postar toda semana uma série de sites e apps desenvolvidos em HTML 5 e CSS 3, espero que essa série sirva de inspiração e estimule a sua criatividade. Sem mais conversa, segue a primeira série:
Ahhh, o maravilhoso mundo do HTML5! A cada dia o número desenvolvedores utilizando a linguagen aumenta, novos experimentos surgem e mostram um futuro promissor, seja no desenvolvimento front-end com a nova estrutura de marcação, na criação de aplicativos mobile ou até o desenvolvimento jogos. Hoje vou escrever justamente sobre o desenvolvimento de jogos com HTML5.
Acho que todos os entusiastas da linguagem já conhecem a versão do Quake II desenvolvida em HTML5 pela equipe do Google, se você ainda não conhece, dá uma olhada aqui. Bacana, não? Excelente case, porém, nesse post vou mostrar alguns experimentos criados por desenvolvedores independentes, que resultaram em alguns joguinhos capazes de acabar com a nossa produtividade =D
Fala galera, tudo certo? Primeiro quero pedir desculpas pela demora na publicação da parte 2 da série falando sobre o elemento canvas, estou com bastante projetos em desenvolvimento, mas aqui estamos. Se você ainda não leu a primeira parte, clique aqui.
Nesse post vou falar sobre os métodos bezierCurveTo, quadraticCurveTo, arc e como aplicar tudo isso no elemento canvas, vamos lá?
Para desenhar arcos e círculos, usamos o método arc. Esse método tem cinco parâmetros: X e Y são as coordenadas central do nosso desenho, radius é a metade do diâmetro da nossa circunferência (nem preciso explicar 
), startAngle e o endAngle são os parâmetros que define o ponto inicial e final a partir do eixo X e finalmente o parâmetro anticlockwise que recebe um valor booleano, se esse valor for true define o sentido anti-horário para iniciar o nosso desenho, caso contrário, inicia o desenho no sentido horário.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Observação: Os ângulos no método arc são calculados em radiano, não em graus. Para converter graus em radiano, use:
var radiano = (Math.PI/180)*graus
David Glazer, Director of Engineering at Google and his hockey player shirt on second day of presentations Google I/O 2010.
I want one too.
A Google em parceria com a SI.com e a TWF, desenvolveram uma revista de esportes fictícia usando HTML5, o projeto foi apresentado durante o primeiro dia do Google I/O 2010 Keynote Presentation. Segue o vídeo com a apresentação do projeto:
Para o desenvolvimento do projeto, foi usado: CSS Animation, Embedded Fonts, Drag & Drop, HTML5 Video, Geolocation, Web Workers, App Cache, Web DB, Feeds, Google Maps API, Google Buzz API, Rails e claro, tudo sem flash.
Durante o segundo dia, foi apresentado o Google TV, um projeto que pretende unir a experiência da televisão com a liberdade da web, afirma a Google. Quer saber mais sobre o projeto? Veja o vídeo de introdução abaixo e acesse http://www.google.com/tv/ para maiores detalhes.