quinta-feira, 30 de janeiro de 2020

#11 - Jogo da Velha feito com Javascript

Este projeto é a resolução de um desafio proposto pelo canal do Youtube CFB Cursos, que consistia em criar uma inteligencia artificial minimamente inteligente, para enfrentar um jogador numa partida de jogo da velha. Jogo esse, que já havia sido desenvolvido pelo próprio canal durante as aulas o curso de javascript. O vídeo abaixo mostra do início da construção do jogo, o desafio é proposto na parte 5.



Em relação ao projeto original, destacam-se três implementações:

  • Inteligencia artificial mais inteligente.
  • Modo para se jogar com dois jogadores.
  • Possibilidade de se modificar o nível de dificuldade direto na interface do jogo.

Download Link

Ah, ainda sou capaz de me lembrar de uma época em que eu brincava de jogo da velha riscando um chão de terra com gravetos. O tempo passa...

quarta-feira, 29 de janeiro de 2020

#10 - Mil cartas no Anki e uma forma de se adicionar a tags ruby e rt automaticamente

Na data de 16/01/20 atingi o número de mil cartas adicionadas no Anki, um aplicativo que eu utilizo no auxílio do estudo da língua japonesa. Para quem não o conhece, a lógica de funcionamento do anki - pelo menos para o estudo de idiomas - é a seguinte:

  • Passo 01: O usuário adiciona cartas no aplicativo. Um lado da carta contem uma frase no idioma que ele está estudando, o outro contem a tradução e informações necessárias para se entender toda a frase.
  • Passo 02: O usuário revisa as cartas adicionadas.
  • Passo 03: O algoritmo do aplicativo faz com que as cartas que o usuário errar durante a revisão sejam revisadas mais vezes, e as que ele acertar sejam revisadas menos vezes.
  • Passo 04: Volta-se para o passo 1.

Para uma explicação mais detalhada acerca do Anki recomendo esse vídeo do canal do programa japonês online no youtube, que foi onde eu descobri a existência desse aplicativo:



No post de hoje, eu listarei quais foram as cartas que apareceram para que eu revisasse logo após atingir essa marca. Certamente, ao menos para minha pessoa, esse será interessante registro, para ser observado no futuro, e ter uma ideia de como andavam os meus estudos. Abaixo seguem as frases:

けない!
Não vou perder!
冬休ふゆやすみは くに かえる?
Você vai voltar para o seu país nas férias de inverno?
今日きょう 天気てんきはどうですか。
Como está o tempo hoje?
ねるまえに、テレビをみます。
Ver TV antes de ir para cama.
授業じゅぎょう あさ はち はじまります。
A aula começa às 08:00 da manhã.
ねこだ。
É um gato.
トム くんはスキーをしたことある?
Tom kun, você já esquiou alguma vez?
これは 重要じゅうよう 仕事しごとだ。
Isto é um trabalho importante.
あしたこなくてもいいです。
Você não precisa vir amanhã.
つぎのミーティングはなんようびですか。
Qual é o dia da próxima reunião?
学生がくせいはお かねをはらわなくてもいいです。
Estudantes não precisam pagar.
えいごのうたをうたうことができます。
Eu consigo cantar músicas em inglês.
ろくじにおきます。
Acordo às 06:00.
火星かせい そら あおいですか。
O céu de marte também é azul?
あしたでかけるとおもいます。
Acho que vou sair amanhã.
今朝けさ はち kmキロメートル はしりました。
Está manhã corri 8 quilômetros.
えきでともだちにあいます。
Encontro com o meu amigo na estação.
どこにせんせいがいますか。
Onde está o professor?
ドン・キホーテはどこですか。
Onde é a Dom Quixote?
フォークで べる。
Comer de garfo.
すしをつくることができます。
Eu sei fazer sushi.

errei

オンラインでべんきょうすることができます。
Eu posso estudar on-line.
彼氏かれしがいます。
Tenho namorado.
ここから はじめてください。
Comece por aqui, por favor.
からだにいい。
Bom para o corpo.
しょくじのまえに、てをあらいます。
Antes da refeição, lavo as mãos.
およぐことができません。
Eu não sei nadar.
あまりたべませんね。
Não comeu muito, né?
だれをさそいましたか。
Quem você convidou?
からだ 調ちょうし わるいんです。
Estou passando mal / Não me sinto bem.
うみ およぎに行こう。
Vamos nadar na praia.
あそんだり、テレビをみたりします。
Brinco, assisto TV, etc.
びじゅつかんでしゃしんをとることができません。
Não posso tirar fotos no museu.
うけつけにおとこのひとがいます。
Na recepção tem um senhor.
このバッグはわたしのではありません。
Esta bolsa não é minha.
かぎをあけていた。
Estava destrancando a fechadura.
ここは 西口にしぐちです。
Aqui é a saída oeste.
あなたのポケットのなかになにがありますか。
O que tem dentro do seu bolso?
このバスは 新宿しんじゅく きません。
Este ônibus não vai a Shinjuku.
かりた ほんをバッグに れました。
Coloquei o livro que peguei emprestado na bolsa.
やすみのひはなにをしますか。
O que você faz no dia de folga?
かれはお りの うた うたっています。
Ele está cantando sua canção favorita.
あなたのれいぞうこのなかになにがありますか。
O que tem dentro da sua geladeira?
昼食ちゅうしょくはいりません。
Eu não preciso de almoço.
あそこにポストがあります。
Ali tem uma caixa de correio.
ビールはすきですけど、たくさんのむことができません。
Gosto de cerveja, mas não posso beber muito.
また あとであいましょう。
Vamos nos encontrar de novo depois.
ぎゅうにゅうやくだものややさいなどがあります。
Tem leite, frutas, verduras etc.
問題もんだいがない。
Não tem problema.
たまごをかわなければなりませんか。
Eu preciso comprar ovos?
じゃ、これからお とうさんの いえまで く。
Então, a partir de agora vou até a casa do meu pai.
ひるごはんは?
E o almoço?
ベッドのしたになにがありますか。
O que tem embaixo da cama?
くすりをのまなければなりませんか。
Eu tenho que tomar o remédio?
いいえ、くすりをのまなくてもいいです。
Não, não precisa tomar o remédio.
みせのまえにくるまがあります。
Em frente a loja tem um carro.
だれがケーキをたべましたか。
Quem comeu o bolo?
なにもありません。
Não tem nada.
かなさんはいもうとがいますか。
Kana San, Você tem uma irmã mais nova?
わたしには、 3人さんにん あにがいます。
Eu tenho três irmãos mais velhos.
とうきょうにいえをもっています。
Eu tenho uma casa em Tóquio.
まどのひだりになにがありますか。
O que tem à esquerda da janela?
むねがムカムカします。
Meu peito dói.
えきからここまであるいて 1時間いちじかんくらいかかりました。
Caminhar da estação até aqui levou cerca de uma hora.
まいにちこえんをさんぽします。
Todos os dias eu passeio no parque.
きょうどこもいきません。
Hoje, não vou a lugar nenhum.
カレンダーがあります。
Tem um calendário.
このアイスクリーム、おいしいですよ。
Este sorvete está delicioso viu.
学校がっこう ってはいけない。
Você não deve ir à escola!
その かんじで いてください。
Escreva com esse sentimento, por favor.
わたし 何回なんかいもダイエットをしたことがあります。
Eu também já fiz dieta muitas vezes.
だれもいません。
Não tem ninguém.
納豆なっとう べません。
Não como nattou.
パンやはどこにありますか。
Onde tem uma padaria?
とびらをあけない。
Não abro a porta.
いいえ、のんだことがありません。
Não, nunca bebi.
ベッドのしたになにがありますか。
O que tem embaixo da cama?
こえんにふんすいがあります。
No parque tem um chafariz.
このとけいはすすんでいますか。
Este relógio está adiantado?
どののみものがすきですか。
De qual bebida você gosta?
私は はは 香水こうすい おくります。
Eu dei um perfume para minha mãe.
この いえ にわ
O jardim desta casa.
タクシーに ります。
Pegar o táxi.
みずかジュース、どちらがいいですか。
Você quer água ou suco?
好印象こういんしょうだったかなあ。。。
Será que passei uma boa impressão?

errei

って!
Espera!
まどのひだりになにがありますか。
O que tem à esquerda da janela?
はなみずがでるんです。
(Meu) nariz está escorrendo.
おくれてすみません。
Desculpe pelo atraso.
ちょっと って!
Espera um pouco!
ここまでだいじょうぶですか。
Está tudo bem até aqui?
おちゃかコーヒー、どちらがいいですか。
Você quer chá ou café?
今日きょう あめなので、かさがいります。
Hoje está chovendo, por isso um guarda chuva é necessário.
よく べって。
Coma bem.
インターネットで 日本語にほんご ならいます。
Aprender japonês com a internet.

errei

Algumas observações sobre as frases que eu errei:

すしをつくることができます。
Eu sei fazer sushi.

EU a li como se fosse uma pergunta, provavelmente porque eu não sei fazer sushi, e claro, porque eu sou muito lesado.

好印象こういんしょうだったかなあ。。。
Será que passei uma boa impressão?

Me esqueci completamente do significado de 好印象.

インターネットで 日本語にほんご ならいます。
Aprender japonês com a internet.

Mesmo após, meses de estudo eu ainda tenho uma acentuada dificuldade para ler Katakana. Quando eu comecei a travar na leitura da palavra インターネット eu perdi a paciencia.

No fim, eu errei menos cartas do que erro normalmente, certamente saber que ia fazer um post sobre isso me deixou mais alerta durante a revisão.

E agora uma observação sobre uma palavra que provavelmente foi a terceira que eu aprendi em japonês, partindo do ponto que as duas primeiras foramありがとう e さようなら.

って!
Espera!

Numa tarde quente do inicio dos anos 2000, um garoto acompanhava vidrado em frente a tv a um clássico filme de artes marciais, que já fora exaustivamente exibido. O Filme era O Grande Dragão Branco, estrelado por Jean-Claude Van Damme e Bolo Yeung. A obra retrata a história de um lutador americano que participa de um violento torneio de artes marciais em Hong Kong.

As regras desse torneio determinam que uma luta é finalizada em três hipóteses.

  • 01 - Um lutador nocauteia o outro.
  • 02 - Um lutador joga o outro para fora do ringue.
  • 03 - Um lutador desiste da luta, pedindo para o outro "esperar", dizendo a palavra って,que significa "espere" em japonês.

Acredito que só essa explicação já fosse o bastante para eu memorizar a palavra. Mas o combate final do filme, que se deu entre Frank Dux (Van Damme) e Chong Li (Bolo Yeung) após muitos lutadores serem nocauteados e jogados para fora do ringue trouxe uma cena que a tornou absolutamente inesquecivel:



Diga!! DIIIGAAA!! DIIIIGAAAAAA!!! Ma...tte... Epic Win.

Posteriormente, o fato de Frank ter feito Chong Li dizer って ainda seria celebrado no hospital onde Ray Jackson (um amigo de Frank) estava internado, após quase ser morto pelo vilão.

Sobre as tags ‹ruby› e ‹rt›

Inicialmente eu não pretendia tratar sobre programação nesse post, mas como eu nunca resisto vou trazer aqui um projeto que eu desenvolvi enquanto estava o escrevendo.

Sobre muitos Kanjis que foram mostrados nas frases acima aparecem umas letras em fonte menor, isso é chamado de furigana e serve para mostrar como o kanji deve ser lido em hiragana.

O HTML5 oferece TAGS especificas para se trabalhar com textos com caracteres asiáticos e se adicionar furigana nas palavras, são elas ‹ruby› e ‹rt›. Durante a criação desse post percebi que o processo de se adicionar essa tags manualmente pode ser muito cansativo.

Para se ter uma ideia, para gerar essa frase: わたしはは香水こうすい おくります。 Eu precisaria todo o código abaixo:

Diante disso, criei um projeto que recebe um bloco de texto mais simples e adiciona as tags ruby e rt automaticamente. Dessa forma, para gerar o código acima eu precisaria inserir o seguinte código:

私は 母[はは]に 香水[こうすい]を 贈[おく]ります。

Esse padrão de código é o mesmo utilizado no anki para se inserir furigana nas palavras.




Download Link

Bom, estudar a língua japonesa tem se mostrado um enorme exercício de paciência, existem pessoas que tem uma enorme facilidade para aprender uma nova língua. Eu certamente não sou uma delas. Olhando como estão meus estudos hoje, acho que tenho que passar a trabalhar melhor minha compreensão auditiva, que é praticamente nula e aprender a ler palavras em kanji, sendo que eu ainda sou muito dependente do furigana. Além disso é claro, tento que continuar buscando aprender cada vez mais e mais padrões e estruturas da língua. Enfim, é uma jornada longa. Mas eu não pretendo desistir.

terça-feira, 14 de janeiro de 2020

#10 - Timer / Despertador Feito com Javascript | Versão 3.0

Essa é a versão 3.0 do Timer / Despertador feito com Javascript. Inicialmente muitas implementações estavam previstas, porém, algumas limitações da linguagem, e minhas, as tornaram inviáveis. De qualquer forma, não deixa de ser uma interessante evolução em relação às versões anteriores.

Nessa nova versão, três novidades se destacam:

  • Modo soneca.
  • Design mais elegante, e responsivo.
  • Remodelação do script que controla o tempo, que corrigiu um certo atraso que era observado nas versões anteriores.



Download Link

É o que tem pra hoje, flw!

terça-feira, 7 de janeiro de 2020

#9 - Cronômetro em JavaScript

Esse projeto consiste em um cronômetro feito com javascript. Nele, o usuário tem a possibilidade de iniciar, pausar, retomar e zerar o dispositivo.

A primeira vista, o funcionamento básico do cronômetro se daria através dos seguintes passos:

  • -> Usuário inicia o cronômetro.
  • -> O valor de uma variável chamada valCrono é incrementado a cada cem milissegundos através da função setInterval().
  • -> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
  • -> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.

Na teoria, tudo certo, porém um comportamento peculiar do javascript fez com que o cronômetro não funcionasse de forma correta seguindo a lógica acima. Esse comportamento faz com que quando a a página não está sendo visualizada (seja pela janela estar minimizada ou por outra aba estar selecionada) a função setInterval() trabalhe num ritmo bem mais lento, isso, quando o intervalo de tempo em que a função deve ser chamada é inferior a mil milissegundos (nesse caso, ele era de cem milissegundos).

Mudar o intervalo de tempo de chamamento da função para mil milissegundos resolveria esse problema, mas criaria outro, pois dessa forma não seria possível calcular os centésimos transcorridos.

Por fim, o problema foi resolvido mudando-se a lógica básica do script para a que se observa abaixo:

  • -> Usuário inicia o cronômetro.
  • -> O valor de uma variável chamada tmpIni é definido através da função new Date(). Com isso, essa variável passa a armazenar uma data e uma hora, no caso, a data e a hora do sistema operacional no exato momento em que o cronômetro foi iniciado.
  • -> O valor de uma variável chamada tmpAtual é definido também com a função new Date() e atualizado a cada *cem milissegundos através da função setInterval().
  • -> O valor da variável valCrono recebe a subtração entre as variáveis tmpAtual e tmpIni.
    • valCrono = tmpAtual - tmpIni; // Essa subtração sempre retornará o total de milissegundos que se passou entre a data/hora armazenada na variável tmpAtual e a data/hora armazenada tmpIni.
  • -> O valor da variável valCrono e tratado, calculando-se quantas horas, minutos, segundos e centésimos ela possui.
  • -> O Cronômetro exibido na tela para o usuário é atualizado com os valores calculados anteriormente.
*A função setInterval() segue trabalhando em ritmo mais lento quando a página não está selecionada, porém, como o script não se baseia mais em simplesmente incrementar o valor de uma variável a cada cem milissegundos, isso já não é mais um problema. Sempre que a página voltar a ser visualizada a data e a hora do sistema operacional serão colhidos e os cálculos necessários serão feitos baseados neles.

Claro que existem outras peculiaridades no funcionamento do script, mas isso eu deixarei para quem tiver curiosidade de olhar para ele descobrir.





Download Link


This is the end.