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

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

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

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:

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

Em um dos últimos posts, onde falei sobre uma provável modelagem para o mundo do meu futuro jogo, comentei que um dos próximos passos seria a aplicação de textura. Creio que cheguei em um algoritmo que, embora possa ser melhorado, já da para brincar.
Apenas para ficar claro, mapeamento de textura é aplicar os pixels que definem a textura em uma face de um objeto 3D.
Na prática, um polígono definido em 3D será projetado em 2D no momento de representarmos na tela. Isto significa que faremos algumas transformações com as arestas do polígono 3D para representarmos o mesmo em 2D. Existem várias maneiras de juntarmos a textura nesta equação mas, o principal problema do mapeamento de textura é que é uma operação cara, isto é, consome muito tempo do computador. Por isso os algoritmos existentes para este fim tentam pesar a necessidade de uma representação mais correta da textura versus a velocidade necessária. Isto significa que se estamos renderizando uma cena estática, podemos ficar com o algoritmo mais perfeito. Mas se pensamos em um jogo 3D via canvas de um browser, definitivamente temos que aceitar um mapeamento mais rápido e menos preciso. Entre estes dois extremos existem várias técnicas que podem ser empregadas que se posicionam em algum lugar no meio do caminho pesando sempre velocidade e correção.
A seguir mostro na prática o meu algoritmo em funcionamento para vocês testarem.
(mais…)

Já falei tanto e para tantos sobre isso que acredito que a maioria das pessoas que me acompanham já saibam. Pelo tempo em que afirmo isso, imagino que a maioria já até duvide. Mas o fato é que eu implementarei um jogo massivo de estratégia. Algo no melhor estilo civilization/travian. Neste momento alguns balançam a cabeça e murmuram incrédulos: “-Sei.”. Mas o que realmente interessa neste post é a questão que me envolveu nesta última semana: -Qual seria a forma do meu mundo? Eu não queria o mundo cilíndrico de civilization e, nem tão pouco, o torus do travian. Eu queria dar para o usuário a impressão de um mundo redondo da melhor forma possível.
Os requisitos iniciais não são simples a primeira vista.
O objetivo é mapear o tabuleiro -de preferência esférico- do jogo. As casas deste tabuleiro eu gostaria que fossem quadradas. Mas é sabido que a superfície de uma esfera não se divide em quadrados.
(mais…)