Tic Tac Toe

Lembra do clássico joguinho "da velha", ou Tic Tac Toe? Agora temos a versão dele em javascript, onde você pode jogar contra um computador. E também pode ser adicionado à seu blog muito facilmente. A versão tem os créditos do site Dynamic Drive.Veja como consegui-la:

1. Vá para a página Layout -- Elementos de página.

2. Clique em Adicionar um Gadget.

3. Escolha a opção HTML/Javascript na janela pop-up que aparecerá.

4. Cole aí o código dado a seguir e salve.

<script language="javascript"> //Tic Tac Toe- By Brian (http://scriptasylum.com/bgaudiodr/) //Modified by Yossi Cohen (yossi@prosite.co.il) //Featured on Dynamicdrive.com //Visit http://www.dynamicdrive.com for this script var image1=new Image(); image1.src="http://beckerqueiroz.googlepages.com/ex.gif"; var image2=new Image(); image2.src="http://beckerqueiroz.googlepages.com/oh.gif"; var level=1, myway, mynextmove; var tmp, done, iswon, content; var pcwins=[0,0,0,0]; var playerwins=[0,0,0,0]; var draws=[0,0,0,0]; var playerstarts=true; var moves=new Array(); var game=new Array(9); var choices=[11,12,13,21,22,23,31,32,33]; var corners=[11,13,31,33]; var ways=new Array(); ways[1]=[0,11,12,13]; ways[2]=[0,21,22,23]; ways[3]=[0,31,32,33]; ways[4]=[0,11,21,31]; ways[5]=[0,12,22,32]; ways[6]=[0,13,23,33]; ways[7]=[0,11,22,33]; ways[8]=[0,13,22,31]; var w3c=(document.getElementById)?true:false; var ns4=(document.layers)?true:false; var ie4=(document.all && !w3c)?true:false; var ie5=(document.all && w3c)?true:false; var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false; function init(){ oktoplay=true; iswon=false; done=0; writetext(4); moves[11]=0; moves[12]=0; moves[13]=0; moves[21]=0; moves[22]=0; moves[23]=0; moves[31]=0; moves[32]=0; moves[33]=0; for(i=0;i<=8;i++){ document.images['rc'+choices[i]].src="http://beckerqueiroz.googlepages.com/nothing.gif"; document.images['rc'+choices[i]].alt=""; game[i]=0; } if(!playerstarts)pcturn(); } function writetext(num){ switch(num){ case 1: content='Este jogo foi um empate.'; break; case 2: content='O computador ganhou esta rodada.'; break; case 3: content='Você ganhou esta rodada.'; break; case 4: content='NÍVEL: '+level+'\n\nComputador ganhou: Este nível- '+pcwins[level]+' (Total: '+(pcwins[0]+pcwins[1]+pcwins[2]+pcwins[3])+')\nJogador ganhou : Este nível- '+playerwins[level]+' (Total: '+(playerwins[0]+playerwins[1]+playerwins[2]+playerwins[3])+')\nEmpates : Este nível- '+draws[level]+' (Total: '+(draws[0]+draws[1]+draws[2]+draws[3])+')'; break; } document.scores.scores2.value=content if(num<4)setTimeout('init(4)',1000); } function setlevel(x){ if (level!=x){ level=x; init(); }} function setbutton(cellnum){ if (!iswon){ // Thanks to Roger for finding this Bug !!! if(moves[cellnum]==0){ document.images['rc'+cellnum].src="http://beckerqueiroz.googlepages.com/ex.gif"; document.images['rc'+cellnum].alt=" X "; moves[cellnum]=1; game[done]=cellnum; done++; findwinner(true); }else alert('Você não pode mexer aqui!'); }} function pcstrategy(istowin){ if (level>0){ var str=(istowin)? 2 : 1; for(n=1;n<=8;n++){ if((moves[ways[n][1]]==str) && (moves[ways[n][2]]==str) && (moves[ways[n][3]]==0)) tmp=ways[n][3]; if((moves[ways[n][1]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][2]]==0)) tmp=ways[n][2]; if((moves[ways[n][2]]==str) && (moves[ways[n][3]]==str) && (moves[ways[n][1]]==0)) tmp=ways[n][1]; }}} function selecCorner(which){ if (which=="empty"){ do{ tmp=corners[Math.floor(Math.random()*4)]; }while(moves[tmp]!=0); } else tmp=corners[Math.floor(Math.random()*4)]; } function pcdontlose(){ if (!playerstarts){ if (done==0){ tmp=choices[2*Math.floor(Math.random()*5)]; if (tmp==22) myway=1; else myway=2; } else if (done==2){ if (myway==1){ if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33) tmp=44-game[1]; else{ dlta=22-game[1]; op0=22+dlta+(10/dlta); op1=22+dlta-(10/dlta); tmp=eval("op"+Math.floor(Math.random()*2)); }} else if (myway==2){ if (game[1]==22){ tmp=44-game[0]; myway=21; } else if (game[1]==11 || game[1]==13 || game[1]==31 || game[1]==33){ selecCorner("empty"); myway=22; } else{ tmp=22; myway=23; }}} else if (done==4){ if (myway==22){ for (i=0; i<4 ;i++){ if (moves[corners[i]]==0){ tmp=corners[i]; }}} else if (myway==23){ dlta=game[1]-game[0]; op0=44-(game[1]+dlta); op1=(op0+game[0])/2; tmp=eval("op"+Math.floor(Math.random()*2)); } else if (myway==1) tmp=44+game[2]-(2*game[3]); }} else if (level==3){ if (done==1){ if (game[0]==11 || game[0]==13 || game[0]==31 || game[0]==33){ tmp=22; myway=1; } else if (game[0]==22){ selecCorner("any"); myway=2; } else{ tmp=22; myway=3; }} else if (done==3){ if (myway==1){ if (game[2]==44-game[0]) tmp=choices[1+(2*Math.floor(Math.random()*4))]; else tmp=44-game[0] } else if (myway==2){ if (game[2]==44-game[1]) selecCorner("empty"); } else if (myway==3){ if (game[2]==11 || game[2]==13 || game[2]==31 || game[2]==33) tmp=44-game[2]; if (game[2]==44-game[0]){ dlta=22-game[2]; tmp=22+(10/dlta); mynextmove=tmp+dlta; } else{ dlta=22-game[0]; op0=game[0]+(10/dlta); op1=game[0]-(10/dlta); op2=game[2]+dlta; tmp=eval("op"+Math.floor(Math.random()*3)); }}} else if (done==5 && myway==3){ tmp=mynextmove; }}} function findwinner(isplayer){ me=(isplayer)? 1 : 2; for(n=1;n<=8;n++){ if( (moves[ways[n][1]]==me) && (moves[ways[n][2]]==me) && (moves[ways[n][3]]==me) ){ iswon=true; break; }} if(iswon){ if(isplayer){ playerwins[level]++; playerstarts=true; writetext(3); }else{ pcwins[level]++; playerstarts=false; writetext(2); }}else{ if(done>8){ draws[level]++; playerstarts=!playerstarts; writetext(1); }else if(isplayer) pcturn(); }} function pcrandom(){ do{ tmp=choices[Math.floor(Math.random()*9)]; }while(moves[tmp]!=0); } function pcturn(){ tmp='00'; pcstrategy(true); if(tmp=='00')pcstrategy(false); if(tmp=='00' && level>1) pcdontlose(); if(tmp=='00') pcrandom(); moves[tmp]=2; game[done]=tmp; document.images['rc'+tmp].src="http://beckerqueiroz.googlepages.com/oh.gif"; document.images['rc'+tmp].alt=" O "; done++; findwinner(false); } window.onload=init; window.onresize=function(){ if(ns4)setTimeout('history.go(0)',400); } </script> <table border="5" bordercolor="black" cellpadding="0" cellspacing="0" bordercolorlight="gray" bgcolor="white"><tr> <td width="55"><a href="javascript:setbutton(11)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc11"/></a></td> <td width="55"><a href="javascript:setbutton(12)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc12"/></a></td> <td width="55"><a href="javascript:setbutton(13)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc13"/></a></td> </tr><tr> <td width="55"><a href="javascript:setbutton(21)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc21"/></a></td> <td width="55"><a href="javascript:setbutton(22)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc22"/></a></td> <td width="55"><a href="javascript:setbutton(23)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc23"/></a></td> </tr><tr> <td width="55"><a href="javascript:setbutton(31)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc31"/></a></td> <td width="55"><a href="javascript:setbutton(32)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc32"/></a></td> <td width="55"><a href="javascript:setbutton(33)"><img border="0" src="http://beckerqueiroz.googlepages.com/nothing.gif" name="rc33"/></a></td> </tr></table><br/> <form name="scores"><textarea rows="6" cols="30" name="scores2" readonly></textarea> <br/><br/> <input id="level" name="level" onclick="setlevel(0)" type="radio"/>nível 0 -- o Computador é completamente tonto. <br/> <input id="level" checked name="level" onclick="setlevel(1)" type="radio"/>nível 1 -- O Computador é mais esperto. <br/> <input id="level" name="level" onclick="setlevel(2)" type="radio"/>nível 2 -- Você pode conseguir ganhar (somente se você começar). <br/> <input id="level" name="level" onclick="setlevel(3)" type="radio"/>nível 3 -- O Computador NÃO perde. <br/> </form>

E está pronto! Experimente em seu blog agora.

Como bloquear o mouse em seu blog

Aqui veremos um dos muitos truques para proteger seu blog de cópia. No entanto, sempre haverão outros métodos para gravar o texto ou imagem bloqueados, esteja certo. O script que veremos aqui impede a utilização do botão direito do mouse, desabilitando assim a forma mais usada de gravação e cópia. O script é muito fácil de instalar, e funciona nos navegadores Internet Explorer, Firefox e Opera com sucesso. Quanto a outros, não sei. Para proteger seu blog deste modo, proceda assim:

1. Entre em Layout -- Editar HTML.

2. Clique em Adicionar um Gadget.

3. Na janela pop-up que abrirá então, escolha a opção HTML/Javascript.

4. E, finalmente, cole o código abaixo neste gadget e salve. Depois disso é só verificar seu blog para comprovar o funcionamento do script.

Código necessário:

<script> function click() { if (event.button==2||event.button==3) { oncontextmenu='return false'; } } document.onmousedown=click document.oncontextmenu = new Function("return false;") </script>

Tabela de códigos das cores (postagem referencial)

Aqui temos um script retirado e customizado à partir do origninal no site Dynamic Drive que mostra os códigos referentes a todas as cores. Para utilizá-lo, clique aqui e abra o selecionador. Veja na imagem acima como conseguir o código desejado. É só clicar na cor com o mouse que o código refente a ela aparecerá. Mais simples impossível! :)

Formulário de e-mail Kontactr

Há alguns dias um de nossos leitores não conseguiu instalar em seu blog o formulário de e-mail básico e então eu prometi que faria uma postagem sobre como conseguir um formulário de e-mail do Kontactr. Este formulário é simples, mas muito prático e útil. Além de evitar os robôs de busca dos spammers, também pode dar um toque elegante em sua página, dependendo de como você customizá-lo (ou então isto é besteira minha...). O melhor de tudo é que o negócio é incrivelmente fácil de instalar. Porém, para os que estiverem com muita preguiça, fiz este tutorial aqui, que espero facilite para vocês. Vamos lá? Vou dar tudo bem ilustrado com telas, seguindo os passos. ;)

1. Entre no site http://www.kontactr.com/ e clique em Sign Up, como na imagem abaixo.

2. Preencha o formulário de inscrição  com os dados: Nome, Sobrenome, Endereço de e-mail, Nome de usuário, senha e confirme a senha. Muito fácil! Quando tiver preenchido todos clique em Submit.

3. Você será redirecionado para a página Sucesso. Agora, você deve verificar seus e-mails buscando o e-mail de confirmação do Kontactr. Lembre-se de que alguns servidores de e-mail identificam e-mails automaticamente gerados como este como spam. Então, se não achar o e-mail, verifique se ele não se escondeu na pasta de itens excluídos.

4. Após receber o e-mail, clique no link nele fornecido, para ativar a sua conta.

5. Então, na página Sucesso, clique onde está escrito Click here to login once you have activated.

6. Faça login, com seu nome de usuário e senha.

7. Após fazer o login você entrará numa página como a da figura abaixo. Você verá duas caixas de texto. Uma Embed Widget e a outra Embed Widget - AJAX. Clique em Customize this widget, embaixo da segunda caixa.

8. Nesta página, você poderá customizar o seu formulário de contato, definindo suas cores. Ao acabar, clique em OK.

9. Copie o código desta caixa de texto (ver imagem abaixo) e cole-o em uma nova postagem em seu blog. Dê o nome à postagem de Contato ou do que achar melhor e publique.

 Seu formulário estará pronto! Que tal o achou?

Widget Top Comentaristas customizado

Wanda e Cosmo, os comentaristas mágicos!

Há alguns dias atrás me veio uma ideiazinha impertinente que me perseguiu até que a pus em prática: uma customização do super-usado widget Compulsivo Top Comentaristas.

A modificação coloca tudo numa lista em menu suspenso, em vez da lista clássica e sempre usada. Após enviar um e-mail para o Compulsivo perguntando se estava tudo bem publicar aqui o código, e-mail este que foi respondido em menos de dois minutos, aqui estou disponibilizando para quem quiser a modificação. E para facilitar ainda mais para quem quiser instalar o widget, há o mesmo gerador usado lá no Compulsivo. Vejamos o que é dito sobre o widget na postagem original:

Quer aumentar pra valer os comentários no seu blog? Instale o Widget Compulsivo Top Comentaristas para o Blogger / Blogspot e estimule seus leitores a participarem das discussões para ganhar links!

Este Widget exibe uma lista de links para os sites dos comentaristas mais ativos, permite filtrar até dois nomes na lista e definir a quantidade de comentaristas exibidos.

E as principais características e diferenciais do widget do Yahoo no qual foi baseado:

Características e Diferenciais do Widget Compulsivo:

• Backlinks: Os links na lista apontam para o blog do comentarista e não para o comentário mais recente. Este é o maior estimulante, pois os aqueles que mais comentaram usando a opção OpenID, recebem um backlink direto. Quem comenta usando a Conta Google recebe um backlink para a página do seu perfil no Blogger;
• Lista simples: Ao invés de usar uma lista numerada, optei pela lista simples. Afinal os Top Comentaristas já são organizados em ordem decrescente. Além disso a lista simples integra-se melhor a maioria dos templates;
• Filtragem de Comentaristas: Além de filtrar seu próprio nome da lista de comentaristas mais ativos, você também terá disponível a opção de filtrar mais um nome, caso haja necessidade. Essa opção é particularmente útil em blogs com mais de um autor ou onde o nome do autor tenha sido alterado;
• Quantidade de comentaristas: Com o Widget Compulsivo Top Comentaristas, você pode definir a quantidade de links exibidos na lista sem necessidade de alterar códigos.

Diferença do Widget Modificado

• Lista em menu suspenso: ao invés de utilizar a lista normal, a lista é contida em um espaço muito menor em um menu suspenso. Assim, mesmo ocupando um lugar de destaque em seu template, não preencherá muito espaço do seu blog.

Veja aqui as duas imagens do widget em meu blog:

         Lista no modo anterior                  Lista em menu suspenso 

Como faço para instalar este widget?

Muito fácil! Para instalar o widget original, clique aqui, e para instalar o widget customizado, clique aqui!

É só preencher os campos no gerador e clicar, que o widget será instalado automaticamente em seu blog. Bom proveito!
Aviso: Não remova os créditos, agora acrescidos dos meus. ;)

Abrir links externos em nova janela

Durante estes últimos dias, achei no site Dynamic Drive um script muito interessante, que muitos gostariam de ter em seus blogs. Em geral, quando queremos que links em nosso blog abram em uma nova janela, adicionamos o atributo target="_blank" no código do link. Porém, para não ter que fazer isto em todos os links, e deixar o leitor escolher se quer sair da página ou não, existe este belo script. Uma das coisas mais chatas para por num blog é fazer com que os links do próprio blog abram em outras janelas. E o script inclui esta opção... O script aparece assim:

Podem vê-lo na minha barra lateral. Se a caixa for marcada, com está na imagem acima, todos os links para outros blogs e sites abrirão em uma nova janela, ou aba, porém os links do Mestre Blogger continuarão na mesma janela. Tirando a marca da caixa, links externos também abrirão em nova janela. O melhor de tudo é que este excelente script é facílimo de instalar em seu blog, leva poucas modificações, e não sobrecarrega a página. Para instalá-lo em seu blog...:

1. Vá para o painel de seu blog. Entre na página Layout -- Elementos de página.

2. Clique em Adicionar um Gadget. Escolha a opção HTML/Javascript na janela pop-up que aparecerá.

3. Neste gadget, cole o seguinte script:

<script type="text/javascript">
//Open offsite links in new window script- http://www.dynamicdrive.com/
//Created: August 28th, 2007'
var ddwindowlinks={
//1)Enter domains to be EXCLUDED from opening in new window:
excludedomains: ["mestreblogger.blogspot.com"],
//2) Target for links that should open in a new window (ie: "_blank", "secwin" etc):
linktarget: "_blank",
//3) Specify operating mode ("auto" or "manual"):
mode: "manual",
//4) If mode is "manual", customize checkbox HTML to show to users (Preserve id attribute):
toggleHTML: '<form><input id="targetcheckbox" checked="checked" type="checkbox"/><label for="targetcheckbox">Abrir links exteriores em uma nova janela?</label></form>',
//5) If mode is "manual", enable user persistence so the state of the checkbox is remembered?
persist: true,
assigntarget:function(){
var rexcludedomains=new RegExp(this.excludedomains.join("|"), "i")
var all_links=document.getElementsByTagName("a")
if (this.mode=="auto" || (this.mode=="manual" && this.togglebox.checked)){
for (var i=0; i<=(all_links.length-1); i++){
if (all_links[i].hostname.search(rexcludedomains)==-1 && all_links[i].href.indexOf("http:")!=-1)
all_links[i].target=ddwindowlinks.linktarget
}
}
else{
for (var i=0; i<=(all_links.length-1); i++)
all_links[i].target=""
}
if (this.mode=="manual" && this.persist)
this.setCookie("dlinktarget", (this.togglebox.checked)? "yes" : "no", 30) //remember user setting for 30 days (set to -1 then reload page to erase cookie)
},
init:function(){
if (document.getElementById && this.mode=="manual"){
document.write(this.toggleHTML)
this.togglebox=document.getElementById("targetcheckbox")
this.togglebox.onclick=function(){ddwindowlinks.assigntarget()}
if (this.persist && this.getCookie("dlinktarget")!="")
this.togglebox.checked=(this.getCookie("dlinktarget")=="yes")? true : true
}
if (window.addEventListener)
window.addEventListener("load", function(){ddwindowlinks.assigntarget()}, true)
else if (window.attachEvent)
window.attachEvent("onload", function(){ddwindowlinks.assigntarget()})
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
},
setCookie:function(name, value, days){
var expireDate = new Date()
//set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}
}
ddwindowlinks.init()
</script>

Sim, a coisa é longa, mas não precisa se incomodar, pois é muito fácil de adicionar...

4. Modifique o trecho em vermelho do script para o endereço de seu blog. Lembre-se: o endereço não deve levar os atributos http:// ou www.

5. Salve o gadget e visualize o blog. Está feito!

Importante - Os créditos ao site http://www.dynamicdrive.com/ devem permanecer intactos para uso legal. Não os remova sob hipótese alguma. Fora isto, use o script à vontade que nada irá incomodá-lo.

Prêmio Dardos - Indicação

Ao passar hoje pelo blog Ferramentas Blog, do Marcos Lemos, tive uma certa surpresa ao ver que fôra recomendado em primeiro lugar num "meme" lançado aí: o Prêmio Dardos. Bem, em geral eu não gosto de memes, mesmo porque eles 'obrigam' os recomendados a retribuirem. No entanto, este veio à calhar, pois eu estive pensando em fazer uma lista com os meus blogs favoritos e os melhores blogs para os meus leitores. Então, vamos lá!

Primeiro, faço aqui uma lista dos blogs que serão mais úteis para meus leitores, blogs de dicas e ajuda a blogueiros.

1. Dicas Blogger - Este blog, creio, é o meu favorito de toda blogosfera. Visito-o mais de 10 vezes ao dia, e sou fã dele. ;) Tem ótimas dicas para blogueiros iniciantes. Altamente recomendado!
2. HTMHelen - Achei este blog recentemente, e logo foi para minha lista de visitação diária. Também nos traz dicas, muitas inéditas, e já me ajudou muitas vezes em questões de códigos HTML.
3. Dicas para Blogs - Este blog foi o primeiro blog de dicas que visitei, quando eu ainda era um tanto 'verde' na blogosfera. Estou sempre a conferir para ver se há uma nova postagem. ;)
4. Ferramentas Blog - Também este blog conheci bem recentemente, e de outro modo não poderia ser, pois o blog mesmo é recente. No entanto, com pouco tempo de vida já conseguiu uma visitação muito boa com suas dicas para iniciantes na blogosfera.

Agora, ponho na recomendação os principais blogs de meus Seguidores. (em ordem alfabética) Valem o clique!

1. Abrazar la Vida -  do Marcelo
2. Bubuzando na Net! - da Elisabeth
3. Cafusão sem Confusão - do Rafael
4. Filmes Dublados - do Deyvid
5. Helen Fernanda - da Helen Fernanda
6. In-Antenado - do Gustavo Bellentani
7. Livre Afluência - do Marcelo A.S.
8. Marcos Lemos [idéias] - do Marcos Lemos
9. O Mundo Mágico de - do Anderson Ricardo
10. Shine Factory - do Márcio Richarde
11. Te Ensino - do Phoenix
12. Winnetou und Old Shatterhand 

Meus agradecimentos aos que acompanham o blog e ao Marcos Lemos, por sua indicação e parabéns aos aqui indicados.