2009 14/05

Ligue os pontos!

Tags: , , , , ,

Tudo começou quando eu vi um jornal na rua e nele eu vi um passatempo que era bastante comum no jornal que meu pai comprava quando eu era criança. Esse passatempo consiste numa imagem /semi-?completa/ em que alguns pontos devem ser conectados para formar a imagem final.

Diante dessa lembrança eu pensei em usar o objeto Canvas do HTML 5 que eu havia comentado anteriormente para, digamos, “reviver” essa brincadeira numa formato digital.

Procurei uma imagem para fazer os testes e acabei encontrando um site bem legal, com várias imagens no estilo “ligue os pontos”. Dentre as várias opções, escolhi a imagem abaixo:

Ligue os pontos
Ligue os pontos e ganhe um pato (ou cisne, ou ganso, ou marreco)

A partir daí comecei a pesquisar um pouco mais sobre os métodos de desenho disponíveis para codificar algo que permitisse desenhar umas linhas sobre a imagem acima. O tutorial de Canvas no MDC foi bastante importante nesse sentido.

Bom, mas chega de enrolação e deixe-me mostrar esse tal “ligue os pontos digital“. =) Basta sair clicando para ver o resultado. Há também alguns comandos de teclado disponíveis mas eu vou deixar que você descubra (espero) intuitivamente (ou por associação).

O código-fonte está bem simples  o que permite entender relativamente fácil o que foi feito. E falando sobre o código, vale lembrar que o código em si é mais uma prova de conceito do que um exemplo de código bem estruturado. Ah, e detalhe importante é a imagem no canto superior direito na página. :D

Pra ficar mais legal ainda, embora o tempo não me permita, seria legal colocar junto do código algum algoritmo para descobrir quando a imagem foi desenhada corretamente.

E por fim, o “liga pontos” acima foi testado (e funcionou) em Firefox 3.0.10, Opera 9.64, Safari 3.2.3 e Chrome 2.0.172. No IE 8, nativamente, não funciona. :(

Update! Enquanto eu “jogava” eu estive pensando e cheguei a conclusão que esse tipo de jogo pode ser interessante para pessoas que estão iniciando no mundo da informática, principalmente para adquirir destreza ao usar um mouse. Interessante!

3 comentários »

  1. kika disse,

    14/05/2009 @ 20:04

    é mesmo, principalmente se tiver curvas! bem legal, só acho q vc deve por um aviso que para brincar precisa acessar o link, fiquei q nem tonta clicando nessa pato do post :P

  2. Klaus Paiva disse,

    14/05/2009 @ 20:18

    @kika
    Existem métodos para se fazer curvas sim, inclusive dá pra até escolher entre curvas Bézier quadráticas ou cúbicas, mas eu optei por fazer com retas por ser mais simples. :D

    E sobre a imagem… agora tem um link nela!

    Valeu!

  3. Fábio R. de Miranda disse,

    14/05/2009 @ 21:23

    Eu entrei para dar a sugestão de fazer curvas mas vi que alguém já o tinha feito antes :)

    Aproveito para deixar este link então:
    http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm

    Se bem que agora com o Canvas do HTML 5você não precisa mais desta biblioteca.

    []s

Deixe seu comentário

* campos obrigatórios