Sokobox – Jogo estilo o antigo Sokoban mas feito em Jquery! Viciei

Galera, essa semana, meu colega de trabalho Tiago me mostrou um jogo chamado Sokobox. Como eu já curtia o Sokoban original (rodava no ms-dos), e o gSoko (Sokoban que roda no linux no gnome), comecei a jogar esse Sokobox. Adivinha o que aconteceu? Viciei!!!

Seguem umas imagens de algumas fases que passei, e o link para o game!

Level 27 no Sokobox!

Level 28 no Sokobox!

Clique aqui para acessar o jogo!

Logo eu posto as outras fases, essas ai eu já passei

Como colocar o efeito “cor sim” e “cor não” em uma tabela com jQuery? Apenas uma linha!

Hoje tive o prazer de criar o famoso efeito “cor sim cor não” com jQuery. O mais incrível é que isso é feito com apenas uma linha. Neste caso ele coloca na cor especificada todas as linhas ímpares da tabela através do parâmetro “odd”. Lá vai:

$("tr:odd").css("background-color", "#bbbbff");

Dependendo de onde você coloque o script, onde ele encontrar uma tabela, ele vai colocar nas linhas ímpares esta cor. Se você quer dizer em qual tabela exatamente deseja fazer isso, defina por exemplo um ID para a tabela. Ficaria assim:

$("#minhaTabela tr:odd").css("background-color", "#bbbbff");

Se quiser definir a cor das linhas pares utilize o parâmetro “even”, assim:

$("#minhaTabela tr:even").css("background-color", "#bbbbff");

Pronto! Boa semana!

Como carregar um arquivo JS dinamicamente com jQuery framework?

Olá! Cheguei na situação em que preciso carregar uma classe JS, caso o meu JSON retorne status igual à 1. Mas como carregar dinamicamente este arquivo e ainda instanciar esta classe? Como acontece essa mágica? Bom, quando você usar o incrível jQuery Framework, isso pode ser feito com apenas 3 linhas de código. Lá vai!

jQuery.getScript('Administrativa.js', function() {
new Administrativa();
});

Mew, que fácil!
Boa semana!

Criar um array com Javascript (Array JS)

Esses tempos surgiu uma dúvida simples, mas eu não sabia fluentemente:

Como criar um array Javascript?

Legal, estou habituado a criar arrays em PHP, mas em JS é um pouco diferente. Vamos à um exemplo:

1) Padrão Javascript para criação de array:

var arrayTeste = new Array()

2) Exemplo prático com 5 posições para armazenar dados:

var arrayTeste = new Array(5) ;

3) Inserindo conteúdo:

arrayTeste[0] = 100;
arrayTeste[1] = 200;
arrayTeste[2] = 300;

4) Legal agora vamos ler este conteúdo:

for (i=0;i<5;i++){
    document.write("Posição " + i + " do array: " + arrayTeste[i]);
}

Atenção! Cuidado com a letra maiúscula da palavra reservada “Array” na hora de criar o array!

Pronto! Até a próxima!

Como utilizar jQuery no WordPress

O wordpress traz inúmeros recursos, mas, se você quer utilizar os teus conhecimentos em jQuery, também pode aplicar de forma bem fácil.

Na seção Head do arquivo header.php inclua a seguinte linha:

<?php wp_enqueue_script(“jquery”); ?>

Pronto! Agora é só usar o jQuery normalmente!

Bom feriado!

Como exibir um botão dinamicamente com jQuery? (parte 1)

Bom, neste primeiro post de Junho, trago uma solução simples porém muito eficaz em se tratando de mostrar elementos através do Framework Javascript jQuery.

Temos a seguinte situação:

Ao clicar em determinado link o jQuery mostre um botão chamado imprimir, que vai ser usado para imprimir um documento qualquer. Tudo bem, vamos às possibilidades.

Solução 1

Criar um botão imprimir quando é carregado a tela (isso pode ser no próprio HTML), que vai ficar oculto. Será alterado o atributo css utilizando jQuery para mostrar o botão apenas ao clicar no link que ativaria este botão;

Solução 2

Criar na tela (html) um span vazio que, ao clicar no link em questão, o jQuery vai criar um botão dinamicamente neste span. Este botão seria criado com todos os detalhes possíveis;

Qual parece a mais atraente? Qual seria a mais indicada? Qual é a melhor?

Essa resposta você vai responder conforme a necessidade da tua aplicação. Na primeira situação temos um botão no html que pode ser visto a qualquer instante, porém está oculto. Esta é a maneira mais simples. Na segunda esse botão não existe e passa a existir apenas quando é clicado.

Vamos à um exemplo.

1.Temos o seguinte botão definido no body:

<div id=”botao1″>
<input type=”button” value=”Imprimir” id=”btnImprimir” class=”botao” onClick=”window.print();”>
</div>

2.Como o botão está com a classe css ‘botão’, vamos criar a classe css de uma maneira bem didática:

.botao {
display:none;

}

Até este momento temos um botão que existe no HTML porém está com o atributo css display setado para none, ou seja, oculto.

3.Agora vamos implementar o link que vai mostrar esse botão:

<a onClick=”incluirBotao();”>Incluir Botão</a>

4.Ao clicar no botão é executada a função JS incluirBotao. Esta função ficaria assim:

function incluirBotao() {
jQuery(‘#btnImprimir’).css(‘display’,'inline’);

}

Legal, desta forma temos a solução 1 do nosso problema implementado.

No próximo post relativo à jQuery trarei a segunda solução.

PAC-MAN – Google comemora os 30 anos do jogo

Ontem, dia 21 de Maio de 2010 o google lançou a comemoração dos 30 anos do jogo PAC-MAN disponibilizando o jogo na página inicial do mecanismo de busca.

A primeira vista o jogo é todo feito em Javascript, desta forma permite o carregamento rápido em imagens leves.

Podemos identificar a imagem principal do jogo que é carregada ao entrar no site, no seguinte endereço:

http://www.google.com.br/logos/pacman10-hp.png

No title da tag HTML encontramos o seguinte texto: “PAC-MAN’s 30th Birthday! Doodle with PAC-MAN™ & ©1980 NAMCO BANDAI Games Inc.”

Caramba, em 1980 muitas pessoas nem tinham nascido! Realmente merece uma comemoração.

Bom, no meu ultimo jogo consegui fazer 20.490 pontos, se não me engano cheguei na 3ª fase! E você?

Veja print Screen do final do meu jogo:

PACMAN GOOGLE SCORE

Viva o PAC-MAN!

jQuery: Como marcar todos os checkbox com um click?

Bom dia!

Neste meu primeiro post relativo a jQuery trago um exemplo muito simples e extremamente útil quando se trata de manipulação de elementos html do tipo checkbox.

Eis a questão: Como marcar todo os checkbox com um click?

Inicialmente você cria o formulário contendo quantos checkbox desejar e um botão que realizará a função de marcá-los.

Vamos programar o botão?

jQuery(document).ready(function() {

jQuery(“#marcarTodos”).click(function() {

jQuery(“input[type=checkbox]“).attr(“checked”,”true”);

}

}

Pronto!

Importante: Certifique-se de que a id do botão é “marcarTodos”.

Como quebrar uma string em Javascript usando o método split

Neste post, trago um exemplo simple e direto de como utilizar o split do javascript.

Imagine que teremos a seguinte string javascript:

var data1 = “10/01/1979″;

Queremos quebrar a data no caracter ‘/’, isto é extremamente simples. O javascript já tem um método ligado a variáveis string, para executar esta função.

var data_quebrada = data1.split(‘/’);

Simples!

Para visualizar utilize:

alert(data_quebrada);

Você terá o seguinte resultado:

10,01,1979

O alert do Javascript já formata o resultado do array, separando cada índice com vírgula! Muito bom!

Para acessar os resultados:

dia = data_quebrada[0];
mes = data_quebrada[1];
ano = data_quebrada[2];

Pronto! Boa diversão e boa semana!