Blog do Renato, o Louro

Já faz tempo que eu digo que iria criar uma nova linguagem de programação. E já havia dito que seu nome seria Graphol. Mesmo aqui neste blog, já favia mencionado o nome Graphol no post Siga um Louco. Creio que tenha sido a primeira vez que falei publicamente sobre Graphol, embora nunca tenha entrado em detalhes. Pessoalmente só havia comentado sobre o que seria Graphol para pouquíssimas pessoas. Mas chegou a hora de disponibilizar a ideia para todos.
(mais…)

Na última postagem desta série, Função para Detectar Colisões em Javascript, vimos como criar uma rotina de verificação de colisão entre as DIVs que representava o personagem e a árvore. Porém a solução ainda estava problemática por, principalmente, dois aspectos:

• 1- As variáveis eram globais o que dificulta a criação de novos personagens (aventureiros/árvores) e verificar a colisão entre eles; e
• 2- A rotina de colisão verificava a área inteira da div e, esta área, era maior do que o desenho do personagem. O ideal seria detectar a colisão apenas considerando a área da ‘sola do pé’ do aventureiro ou a ‘base do tronco’, da árvore.

Em resposta a estes problemas, passei a utilizar o conceito de objetos em Javascript que encapsula os atributos básicos de um personagem (aventureiro/arvore) tornando relativamente fácil a replicação deles,i.e., arvore=new personagem(...);.

Dentro deste objeto também encapsulamos uma área interna de colisão. Assim a área de colisão não é mais obrigatoriamente toda a área da div. O efeito ficou bem melhor do que o apresentado na postagem anterior.

Como última alteração significativa, ao criar um novo objeto personagem, automaticamente o novo objeto é inserido num array de personagens. Com isso fica fácil percorrer todo o array para verificar se um objeto em movimento colidiu com algum outro. Mas, antes de ver como ficou o código, veremos a aplicação em funcionamento:
(mais…)

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…)

Este é um post reciclado do blog antigo da época em que fazia um curso de desenvolvimento de games. Na ocasião, brincávamos na aula de animar um personagem e detectar colisões. Mas, em casa, descobri que a lógica apresentada em aula para detectar as colisões entre áreas retangulares estava com algum erro.

Desenvolvia, nas horas vagas, para treinar C e SDL, o SDLSoccer, que acabou ficando mais para um WarSoccer . Num próximo post apresentarei ele para vocês reescrito também em js. Mas o importante é que eu estava tentando utilizar a tal lógica para impedir que os jogadores entrassem um dentro do outro, dando um efeito meio ‘fantasma’. Mas com a rotina de colisão que estava usando, nada dava certo. E depois de muito depurar, afinal era madrugada, cheguei a conclusão que o erro tinha que estar nela. Então acabei fazendo um mais simples.

Se detectar colisão em retângulos é relativamente simples, mais simples ainda é detectar quando não ocorre a colisão, que foi a lógica que adotei. Mas antes vejam esta rotina funcionando no exemplo abaixo, impedindo que a div do guerreiro entre na div da árvore:
(mais…)

Numa postagem anterior vimos como animar um personagem utilizando o javascript. Hoje iremos unir a animação do personagem com a movimentação do mesmo sobre um fundo qualquer. Como este post é uma continuação, recomendo a leitura da a postagem anterior: Javascript: animações com Images – background – e setInterval. Esta postagem também nos ajudará a entender melhor a utilização de divs com posicionamento absoluto e relativo.
Você perceberá que faltam ainda algumas implementações que serão publicadas nas próximas postagens. No momento, nosso aventureiro está mais para um fantasma que passa por dentro dos objetos. Mas, mesmo assim acredito que estamos chegando a um resultado bem legal que, como de costume, você já pode testar no exemplo abaixo:
(mais…)

Numa postagem anterior, vimos como fazer simples animações com caracteres utilizando a função setInterval do javascript. Hoje veremos algo bem mais legal: Animar personagens – sprites/titles – em javascript. Mas em primeiro lugar, é altamente recomendado que você leia a postagem anterior: Javascript: animações em caracteres com setInterval. Nessa outra postagem foi visto o fundamento da animação em javascript. Já o que faremos neste post é, utilizando aqueles mesmos conceitos, animar uma imagem, ‘dando vida’ ao nosso personagem. E o melhor, esta mesma técnica, ou melhor, os conceitos que veremos aqui, servem tanto para criar um jogo em javascript, assim como serviriam para criar um jogo em C utilizando SDL.

Mas antes de continuarmos veja como fica o resultado do trabalho pronto:
(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…)

Que tal aprender programação assistindo aulas gratuitas de cursos de computação de faculdades renomadas como Stanford, MIT, Harvard entre muitas outras? Isso é perfeitamente possível com o Itunes U.
O Itunes U está longe de ser uma novidade. Mas para quem não o conhece, ele é um grande acervo de aulas gravadas de várias universidades do mundo, abrangendo não só informática mas várias áreas do conhecimento humano como Administração, Gerência, Biologia, História, Engenharia etc. Tudo isso disponibilizado pela aplicação iTunes dentro do iTunes Store.
Como é bem fácil se perder lá dentro, devido a grande quantidade de conteúdo, elegi uma pequena-mini-micro-grade curricular. Os cursos selecionados iniciam com os fundamentos da programação, passando por abstrações, paradigmas computacionais chegando a análise de algoritmos.
Alguém se aventura? (o pré-requisito básico é um inglês bom o suficiente para entender as aulas)
(mais…)

Introdução

A origem para este post foi uma pergunta postada no Yahoo Respostas. Como a pergunta está bem relacionada com os temas que tenho tratado, resolvi responder por aqui. A questão é como criar uma animação simples de caracteres, utilizando Javascript.
Já respondendo a pergunta, embora tenhamos várias possibilidades de algoritmos, dificilmente deixaremos de utilizar as funções setInterval ou setTimeout, clearTimeout e getElementById. Então veremos a seguir como utilizar estas três funções para criar nossa pequena animação.

(mais…)