Incompatibilidades entre versões do jQuery 1.2.6 e 1.3.2

O site / blog Learning jQuery publicou um post “faça um upgrade dos seus scripts para jQuery 1.3 em 3 passos”, achei interessante, vou traduzir parte do post aqui.

Os seletores [@attribute]

A principal diferença, o que mais está dando problema de incompatibilidade nessa troca de versão é a sintaxe do selector [@attribute] que desde a versão 1.1.4 (agosto de 2007) entrou em desuso, mas até a 1.2.6 ele ainda funcionava, dessa vez tiraram fora mesmo, mas muitos sites e muito plugins ainda utilizavam os seletores assim. veja mais tidbits E pra alterar, corrigir o problema, é bem simples, basta remover o @

Exemplo:

jQuery anterior a 1.1.4

$('a[@rel="excluir"]
$('input[@name^="telefone"]

Versão atual do jQuery

$('a[rel="excluir"]
$('input[name^="telefone"]

:visible em visibility e display

Nessa nova versão :visible trabalha de acordo com a propriedade display do css e não mais com visibility

Exemplo 1:

Considere a div abaixo:

<div id="exemplo" style="display:none">
 Tidbits
</div>

Na Versão 1.2.6 obtemos true com .is(‘:visible’) pois ele considerava somento a propriedade visitibility do css, já na versão 1.3.2. obtemos false

Versão 1.2.6
$(‘#exemplo’).is(‘:visible’) = true

Versão 1.3.2
$(‘#exemplo’).is(‘:visible’) = false

Exemplo 2:

Considere a div abaixo:

<div id="exemplo2" style="visibility:hidden">
 Tidbits
</div>

Na Versão 1.2.6 obtemos false com .is(‘:visible’) pois ele considerava somento a propriedade visitibility do css, já na versão 1.3.2. obtemos true

Versão 1.2.6
$(‘#exemplo’).is(‘:visible’) = false

Versão 1.3.2
$(‘#exemplo’).is(‘:visible’) = true

A terceira mudança é na hora de escrever um seletor customizado, agora não é necessário retornar uma string, como era feito até então.

Quem quiser ler a matéria original, veja no Learning jQuery .

[]s

Calendário em Javascript em português usando jQuery

Este, é um plugin de jQuery, para mostrar calendário ao escolher uma data em um input, foi desenvolvido por mim (Danilo Augusto), para ser usado em alguns projetos na Click. O plugin tem uma série de opções para ser customizadas e pesa 9kb de javascript (ou 7kb na versão minificada).

Clique aqui para ver o post com todas as opções do calendário, um pequeno tutorial de como utilizá-lo além de um zip disponível com todos os exemplos e scripts.

Jogo Pong em Javascript e jQuery – Passo a passo

Quem não se lembra do famoso jogo do tele game, pong?

Bom, se você tem minha idade, talvez você nunca nem tenha ouvido falar em pong ou tele game, então veja a foto abaixo que talvez você reconheça, afinal já tem pong até pro iphone.

pong

Baseado nisso, e tendo como inspiração a onda recente de jogos em javascript, decidi fazer desse, meu primeiro jogo em javascript, fiz do zero, e aqui vou mostrar passo a passo a evolução do script em 12 momentos.

Veja o resultado final:

Ainda deve ter bugs, mas a intenção é somente desenvolver um jogo simples e praticar lógica e conceitos em Javascript. Antes de começar a falar, devo dizer que quem quiser dar uma olhada em como foi feito, tem aqui todos os 12 passos para download.

Então vamos aos passos:

Passo 1 – Montando o HTML / CSS

No passo mais simples de todos, o html e css usado no jogo é montado:

Clique aqui para ver o passo 1.

Passo 2 – Movendo a bolinha

No passo dois é começo da movimentação do jogo, a bolinha começa a se movimentar pra uma direção, aleatóriamente e depois ela bate nas “paredes” e inverte sua direção.

Clique aqui para ver o passo 2.

Passo 3 – Calculando o ponto

Do passo 2 pro três, eu calculo na hora em que a parede passa pela posição da raquete, se ela “bate” na raquete, ou não, caso não bata, é marcado o ponto. (É necessário testar algumas vezes pra conseguir ver o efeito, já que a bolinha começa numa posição randômica).

Clique aqui para ver o passo 3.

Passo 4 – O placar

Agora, toda vez em que um ponto é marcado, o placar é atualizado.

Clique aqui para ver o passo 4.

Passo 5 – Reiniciando a partida

Após um ponto, não é mais necessário apertar F5 pra reiniciar a partida. Em 3 segundos a partida é reiniciada automaticamente. Agora o jogo não tem mais fim.

Clique aqui para ver o passo 5.

Passo 6 – Movendo as raquetes (2 players)

Nesse passo, é onde começa a mover a raquete, e este, é o único em que é possível mover as duas raquetes (o que parece legal, mas não é muito não, é impossível mover as duas raquetes ao mesmo tempo ).

Clique aqui para ver o passo 6.

Passo 7 – Jogando contra o computador

Aqui, a raquete da direita já está automática, qndo a raquete da esquerda rebate, é calculado a trajetória da raquete da direita, que se posiciona automaticamente.

Clique aqui para ver o passo 7.

Passo 8 – Aumentando a velocidade

Agora, a medida em que o jogo for rolando a velocidade da bola vai aumentando, até que o ponto seja efetuado. Depois quando o jogo é reiniciado, a velocidade é voltada ao normal.

Clique aqui para ver o passo 8.

Passo 9 – Batendo na ponta da raquete

Como a direção inicial da bolinha é sorteada, foi implementado o recurso de “bater na ponta da raquete”, que aumenta o angulo da rebatida da bola, e ajuda a enganar o adversário. Nesse passo, também foi implementado um recurso para as raquetes voltarem ao centro da mesa após um ponto for concluído.

Clique aqui para ver o passo 9 .

Passo 10 – Configurando a dificuldade

Pra não ficar muito banal, é possível definir a dificuldade do jogo, antes de começar a partida, a dificuldade interfere na velocidade inicial da bolinha e na velocidade da raquete adversária.

Clique aqui para ver o passo 10 .

Passo 11 – Game Over

Depois de tantos passos, finalmente o jogo tem um fim, vence que fizer 5 pontos primeiro. O jogo pode ser reiniciado depois e ter a dificuldade alterada.

Clique aqui para ver o passo 11 .

Passo 12 – Mouse Wheel

Para facilitar a movimentação da raquete, no passo 12, foi implementado o controle por mouse wheel, baseado naquela função de mouse wheel postada aqui a pouco tempo atrás.

Clique aqui para ver o passo 12 .

Depois do passo 12 alguns ajustes ainda foram (e talvez outros serão) feitos, como velocidade do jogo, e algumas melhorias de desempenho.

Exportando:

E se alguém quiser colocar o jogo em algum lugar, basta chamar o iframe com o código:

<iframe width="460" height="430" frameborder="0" scrolling="no" src="http://www.tidbits.com.br/download/pong/pong.html"></iframe>

Lembrando que deixei disponível todos os 12 passos para download.

E pra quem nunca ouviu falar de tele game, segue uma imagem do que foi um dos primeiros vídeogames:

tele-game

Quando eu tiver tempo livre, vou fazer um jogo estilo arkanoid, com fases, records e tudo mais.

[]s

Zoom de Imagem em Javascript e jQuery – Passos 5 e 6

Resolvi fazer mais um passo do último post Imagem com zoom em Javascript e jQuery – ImageZoom. Apesar de ser o último passo não é o mais complicado e achei interessante

Passo 5 – botões para aumentar e diminuir Zoom

Passe o mouse sobre a imagem e clique em + e – para aumentar e diminuir o zoom.

A partir do passo 2, foram adicionados dois botões que aumentam ou diminuem 3% do tamanho da imagem e depois recalcula tudo para fazer o parallax, bem simples.

Passo 6 – MouseWheel

E pra finalizar, fiz um script (na verdade comecei ele, não cheguei a finalizá-lo) que usa o mouse wheel para controlar o zoom, se você não sabe trabalhar com isso, dê uma olhada num post antigo meu que mostrar como adicionar um evento ao mouse wheel . Esse script deixei num arquivo a parte (pq senão atrapalharia o scroll aqui), então veja o ImageZoom com mouse wheel aqui

O que eu disse que não terminei no script é que, quando o mouse está sobre a imagem e ao mesmo tempo roda o wheel, dá umas travadas bruscas que precisam ser suavizadas.

Devo lembrar que todos os passos, htmls e scripts estão disponíveis para download.

[]s