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 😀
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:
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! 😀
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í:
Agradecimento ao Chris pelas explicações e referências que me passou 🙂
