Street Fighter em CSS

Olá nerds, bem acho que esse poste vai ser mais para a galera que curte programação e desenvolvimento para internet, ou até mesmo a classe dos nosso queridos Web Designers como eu. Com a evolução da programação Web , como o HTML 5 e o CSS3 podemos ver que nunca estamos totalmente preparados ou sabendo tudo.


Para muitos programadores css e javascript não são sua a praia, mais para desenvolvedores web e principalmente Web designers a junção  do CSS com Javascrip é Lindo, assim chegamos ao mundo perfeito. O pessoal do blog David Walsh Blog criou uma técnica de animação e controle que une um pouco dos dois mundos – CSS e Javascript – para criar uma técnica brilhante: Animação de imagens em um websites simples utilizando botões ou comandos do teclado(no FISL 12 agente mostrou uma palesta sobre Animação com CSS).

O personagem escolhido para os testes foi o Ken do jogo Street Fighter II. Usando linhas de programação em Javascript, Sprites em PNG e a propriedade “steps()” de CSS3, a técnica permite inserirmos botões em uma página para que através deles ou de comandos de teclado possamos comandar os movimentos do personagem, como se realmente estivéssemos jogando um jogo ou controlando os movimentos de um GIF.

É realmente algo simples e infinitamente pequeno em relação ao que programadores fazem em jogos de videogame, mas espera aí, estamos falando de CSS! Mas Simon, isso também já é feito em Flash há um bom tempo! Ok, mas o mundo está mudando, muitos estão migrando para os Smartphones e Tablets e nem todos modelos de aparelho aceitam games, banners ou conteúdo em Flash.

Para quem quiser ver o código e até brincar um pouco com o css codepen.

Previous Post Next Post

Também recomendamos