As “Light Cycles” São aquelas motos futuristas do filme Tron, que deixam um rastro luminoso sólido por onde passam. No filme, ocorre um duelo entre duas destas motos e, o objetivo deste duelo é fazer seu adversário colidir com o rastro luminoso de uma das duas motos. Outra característica desta moto e que elas viram sempre num ângulo de 90o.
Aproveitando a biblioteca criada no post Canvas: Manipulação Pixel a Pixel “Pixel Based” em Javascript, criei este pequeno jogo que ilustra o funcionamento da biblioteca. Então este jogo é para você que quer apenas brincar, ou para você que deseja aprender a programar em javascript utilizando o canvas do html5.

ATENÇÃO: O Jogo Tron não funciona no IE 7 ou 8. Para rodá-lo é necessário utilizar o Firefox, Safari, Chrome, Opera ou o IE 9 beta!

(mais…)

Comecei a programar muito cedo. E quando criança, mas já com meu super TK3000 2e, a experiência de manipular cada pixel da tela foi revolucionária. No meu raciocínio infantil, se eu tinha o IF, o GOTO e o ‘poder’ sobre qualquer pixel da tela, então eu poderia fazer qualquer coisa com o computador. Hoje, mesmo sabendo que meu pensamento era no mínimo inocente, não posso deixar de reconhecer alguma lógica nele. E ainda afirmo: a possibilidade de manipular qualquer pixel é libertadora! .
Porém quem começa a trabalhar com o elemento Canvas do HTML5 percebe que parece faltar funções do gênero setPixel e getPixel.
Mas existe salvação. Por sorte é possível obter e registrar um array de cores que representa cada pixel do canvas. Na realidade, esta técnica já foi até utilizada aqui no post: Como compactar Código Javascript em um PNG.
A seguir veremos, passo a passo, como obter, modificar e registrar o array de pixels do canvas. Ao final mostrarei o código do bitMapCanvas, que criei contendo as úteis e inexistentes funções setPixel e getPixel.
(mais…)

Definitivamente o blog me fez voltar a uma prática antiga: programar por hobby. E aproveitando uma pequena parte da minha já pequena API gráfica desenvolvida para o Small 3D Maker, fiz o Davit.

Davit é, inicialmente, uma implementação em Javascript, e adaptação livre, do Robô Karel do professor Mehan Sahami de Stanford. Ele, é um pequeno Robô virtual – um robô triangular no caso do Davit – que pode ser programado por estudantes de programação. Com isso é, no mínimo, uma forma divertida de aprender lógica de programação e, no caso do Davit, também programação em Javascript.

Davit vive num mundo dividido por linhas e colunas. A quantidade destas linhas e colunas é definida pelo próprio exercício ou pelo próprio aluno. Neste mundo, além do próprio Davit, podemos ter discos de várias cores e muros. A interação de Davit com o mundo e seus objetos também são inicialmente simples. Davit anda para frente, gira no sentido horario, pega e solta discos e, eventualmente, bate com a cabeça nos muros e bordas do mundo.

Mas chega de papo! Mesmo que você nunca tenha programado na vida, que tal tentar programar o Davit?

ATENÇÃO: DAVIT não funciona no IE 7 ou 8. Para roda-lo é necessário utilizar o Firefox, Safari, Chrome, Opera ou o IE 9 beta!
(mais…)

Então, você é um designer, HTMLer ou programador antenado e preocupado com os padrões web, correto? E mal vê a hora de estruturar seu HTML de uma forma mais semântica com o html 5, estou certo?

Mas, como você deve saber, só agora é que o IE 9, ainda beta, resolveu aderir ao html 5. E o pior é que os IEs anteriores, simplesmente ignoram as novas tags impossibilitando aplicar a elas estilos via CSS. Ainda pior do que isso: IE 9 não é para XP. E nós ainda teremos por muitos anos uma grande base de Windows XP.

Então? Iremos esperar anos e anos até arriscar as tags do html 5 com o mínimo de compatibilidade? Felizmente me deparei com uma solução, mesmo que paliativa.

Como falei, os IEs anteriores simplesmente ignoram qualquer tag do html 5, agindo como se não tivesse nenhuma tag demarcando aquela área. Mas existe uma maneira simples, via Javascript, de fazer o IE reconhecer uma tag ‘desconhecida’:

(mais…)

O Mapa da Aventura

Nota: Esta aventura se trata de um remake de um projeto para a linguagem BASIC proposto na revista INPUT Editora Nova Cultural/1986. Embora a maior parte dos elementos da história continuem inalterados, a estrutura proposta aqui é completamente nova, sem falar que programaremos em 4 outras linguagens e paradigmas:

• LUA/Programação Procedural.
• C/Programação Procedural.
• Java/Programação Orientada a Objetos baseada em Classe.
• JavaScript/Programação Orientada a Objetos baseada em Protótipo.

História:

Você está completamente falido e só existe uma maneira de salvar sua pele da mais completa miséria: encontrar um olho cravejado de brilhantes de um antigo toten inca. Você descobriu que ele está escondido numa antiga cidade perdida. Felizmente você consegue encontrar a cidade! Agora só falta encontrar o olho e, é claro, a saída da cidade. Mas cuidado! Seu arqui-inimigo, o coletor de impostos o seguiu, ele pretende colocá-lo na cadeia ou tomará algo que ajude a saldar sua grande dívida. (Emocionante, não? )

(mais…)

Está vendo esta imagem ao lado? Não, não é um Javascript desta vez. É uma folha de estilo, um arquivo CSS codificado num PNG. Para ser mais exato é o css padrão do site Zen Garden indo de 4,71Kb para 2,22Kb. E é claro, assim como no caso do javascript, podemos utilizar o seu css.png como se fosse uma folha de estilo, carregando o arquivo e aplicando no html.
Caso você ainda não tenha lido, recomendo fortemente o post “Como compactar Código Javascript em um PNG” já que o CSS é compactado, e posteriormente lido, exatamente da mesma forma.
O que muda é o como aplicar o CSS no html. Se no caso do javascript resolvemos dando um eval no código, no caso do css é necessário uma pequena função para aplica-lo. Na postagem “Compactador CSS e JS para PNG” temos o código de leitura.
Abraços!

Esta imagem ao lado é um código javascript. Para ser exato se trata do arquivo jquery-1.4.2.min.js codificado em um PNG. Neste formato ele teve o seu tamanho reduzido de 70,4kb para 25kb. Perceba que o arquivo original já era compactado. E sim, claro, temos como ‘ler’ este PNG dentro de um código javascript e executa-lo como se fosse um include.

Essa idéia não foi minha. Esta técnica ganhou visibilidade no concurso 10K Apart onde cada byte economizado significava muito. Neste post mostro como isso é feito. Também disponibilizo uma ferramenta web para você gerar seus próprios PNGs de Javascript – ou de qualquer outro texto como você perceberá. Atenção, tudo isso só vale para Chrome, Opera, Firefox, Safari e, agora, o beta do Ie9. Ie8 e anteriores ficam de fora.

O jogo, Fontanero – muito bom por sinal – criou um certo tumulto no concurso por ter utilizado esta técnica. Desta forma eles conseguiram viabilizar a participação do jogo deles de aproximadamente 16k que, compactado desta forma, ficou um pouco abaixo dos 10k. Claro que tiveram várias reclamações. Mas ao final a técnica foi aceita. Não preciso nem dizer que no próximo concurso só teremos código em PNG!

Então, caso você queira participar do próximo concurso, recomendo muito aprender esta técnica.
(mais…)

Como foi dito em um post anterior eu tentaria participar do 10k Apart – Um concurso de aplicações web com no máximo 10k – e o fiz! Como falei, fiquei sabendo do concurso apenas 12 dias para a entrega dos trabalhos. Bem, 1k por dia pode ser razoável, mas foi justamente uma semana muito complicada, principalmente porque o Davi ficou doente.

Ao final não ficou como queria, nem com todas as funcionalidades que eu havia imaginado. Mas ficou um trabalho que -se não dá para lutar por um 1o lugar – ao menos não fez feio. Tá, concordo, o layout ficou feio. Mas estou falando em termos puramente funcionais. E, por favor, leve em consideração que terminei a aplicação às 4h da manhã na véspera da entrega.
(mais…)