Hola!

Talvez alguns de vocês que me acompanham no twitter (@gserrano) ou acompanham o Chris (@chrisloki) já saibam, mas não moro mais no Rio Grande do Sul (Tchê!) e estou morando a uma semana em São Paulo, trabalhando na MM Café na equipe de interface, trabalhando na equipe do Chris :D

E em uma tarde da semana passada estava eu sugando informações do Chris, que me mandou alguns links sobre Javascript Orientado a Objetos.

Lembrei de um post dele aqui no O Desenvolvedor, que vale a leitura: utilizando Prototype para criar classes em Javascript.

Li os exemplos que o Chris me passou e resolvi colocar em prática, criei um mini-game de jogo de dados. Bom, chamar de "mini-game" é um exagero, criei apenas uma interface e tres "objetos".

Joguinho de dados

O funcionamento é bastante simples, não explicarei a teoria da orientação a objetos, apenas a prática e o código.

Clique para jogar

Utilizei 3 objetos e algumas poucas funções, os objetos são:

• Dado
• Cash
• Fichas

O dado tem uma única função, que se chama jogar. Eis o código dele:

function dado(){

this.lados = 6;

this.valor = 1;

this.joga = function(){

this.valor = getrand(this.lados);

return this.valor;

}

}

Cada dado tem dois valores: número de lados (o padrão é 6) e o valor, utilizado cada vez que ele é jogado. A função "jogar" gera um número randômico de 1 até o número de lados, neste caso de um a seis, retornando o valor jogando e alterando o valor do objeto dado.

Os objetos chips e cash são muito parecidos, apenas armazenam o valor de "dinheiro" ou de "fichas" do jogador, e possuem funções em comum (repeti elas no código, talvez esta não seja a melhor opção), vamos aos códigos:

function chips(){

this.valor = 0;

this.soma = function(x){

this.valor = this.valor + x;

$("#chips").html(this.valor);

}

this.subtrai = function(x){

if(this.valor<x){

$("#feedback").html("<h1>Warning!</h1><br />Você não tem fichas para isso, malandro!")

}else{

this.valor = this.valor - x;

$("#chips").html(this.valor);

}

}

}

function cash(){

this.valor = 0;

this.soma = function(x){

this.valor = this.valor + x;

$("#cash").html(this.valor);

}

this.subtrai = function(x){

if(this.valor<x){

$("#feedback").html("<h1>Warning!</h1><br />Você não tem dinheiro para isso, malandro!")

}else{

this.valor = this.valor - x;

$("#cash").html(this.valor);

}

}

}

A função "subtrai" verifica se o número que será subtraído (das fichas ou do dinheiro) não é maior do que o existente, evitando criar jogadores endividados! :D

Estas poucas linhas são a base de funcionamento do "jogo". Com dois botões e algumas mensagens de feedback, podemos fazer o usuário jogar o dado e apostar e comprr mais fichas, eis o código "onload" da página:

$(document).ready(function(){

//Inicializa, cria dado e cash

var dado1 = new dado();

var u_chips = new chips();

u_chips.soma(100);

var u_cash = new cash();

u_cash.soma(50);

//Quando joga

$("#acao").click(function(){

$("#valor").html("Você jogou " + dado1.joga());

if(dado1.valor <= dado1.lados/2){

u_chips.subtrai(4);

$("#feedback").html("<h2>Perdeu!</h2><br />Você pagou 4 chips para a banca.")

}else{

u_chips.soma(3);

$("#feedback").html("<h2>Ganhou!</h2><br />Você recebeu 3 chips da banca.")

}

});

$("#buy_chips").click(function(){

if(u_cash.valor >= 25){

u_cash.subtrai(25);

u_chips.soma(50);

}else{

$("#feedback").html("<h1 class="red">Warning!</h1><br />Você não tem dinheiro para isso, malandro!")

}

});

});

Quando a página é inicializada, crio um objeto para cada classe (dado, cash, chips) e adiciono as chips e cash (isso vai atualizar a interface automaticamente, devido as funções soma e subtrai).

Quando o usuário clica em jogar, através da função jogar do dado criado, verifico se o númeor é maior ou menor que a metade do valor máximo do dado (o número de lados) e novamente com as funções soma e subtrai, retiro ou adiciono fichas pro usuário.

A função "buy" subtrai do cash e adiciona nas chips.

Simples, prático e fácil de entender!

Veja o exemplo funcionando

Curiosidades

• Demorei mais para explicar o código do que para desenvolver a brincadeira.
• O layout do joguinho foi feito em 15 minutos, com uma busca no SXC e bom uso do CSS.
• O Internet Explorer foi completamente ignorado durante todo o processo
• As expectativas de vitórias são negativas: a banca ganha no longo prazo.

O joguinho está simples, não armazena naada em banco e pode se tornar divertido com "desafios" a outros jogadores, armazenar fichas e cash, integração com o twitter... eu só queria mesmo iniciar a brincadeira, utilizem os códigos a vontade. :)

Quer saber mais sobre javascript orientado a objetos, por quem entende de verdade do que tá falando? Acessa aí:

• Leandro Mercês
• Rogrigo Lazoti
• Julio Greff

Agradecimento ao Chris pelas explicações e referências que me passou :)