Executando verificação de segurança...
11
RodrigoSchio
1 min de leitura ·

Como programar um jogo de xadrez com javascript

Eu escrevi um tutorial com dicas de programação. Programar um jogo de xadrez é mais difícil do que parece.

https://aimowin.github.io/tutoriais/modulos/2/index.htm

Os resumos das lições são:

  1. Desenhar o tabuleiro e as peças
  2. Armazenar a posição das peças em um array
  3. Implementar mudança de posição
  4. Lista de Jogadas

Pode parecer uma ideia legal calcular a lista de jogadas válidas no momento que o user seleciona a peça. Mas não é uma boa ideia.

Para quer quer ver como fica:
https://xadrez-html.web.app/

Carregando publicação patrocinada...
3
3
2
RodrigoSchio
Autor
Autor

Essa competição é interessante, mas parece code-golf ao invés de minimalismo, cara.
Eu não conhecia essa mas já participei de uma js13k. Fiz um joguinho simples.

Certa vez, por aí na internet, me indicaram a procurar por "Code Golf".
Alegaram que meu codigo parecia "semi-golfed".
Acho que foi num site de code-review do stackoverflow.

Eu fui atrás e vi que tem programadores que geram software com muito pouco source-code.
Eu fiquei um pouco interessado em code-golf mas nem tanto.

Código escrito assim é mais dificil de manter. Eu ja tenho bastante dificuldade em trabalhar em equipe por falta das softSkils.

Geralmente eu procuro manter nomes de variavel entendível. Nesse caso do jogo de xadrez eu mantive o código js em inglês e comentários em português (além do tutorial).

Nesses links que você postou o adversário é muito mais inteligente que o que eu programei. A minha versão o oponente sempre captura se puder... se não puder ele randomValidMove.

1
gpoleszuk

RodrigoSchio, valeu por seu comentário!

Confesso que nunca entendi o algoritmo que esse esse carinha implementou, mas ele sempre me venceu nas partidas que tentei vencê-lo. Qualquer dia desses devo tentar reverter o código que ele minificou.

PS: Removi um dos links que erroneamente apontavam para outro recurso. Ah, e parabéns pelo visual que deu ao seu jogo!

1
RodrigoSchio
Autor
Autor

O visual da minha versão ficou parecida com a do Óscar Toledo por que a gente optou por usar os unicode characters ao invés de imagens:

O chrome renderiza

♞

com o código
♞

(testaê)

Muitas das decisões em 'code time' foram tomadas pensando em minimizar processamento e evitar disperdicio de hardware do user.
Mas ele abriu mão da legibilidade do codigo e eu não.

1
2
arthuraquino

Parabens pela ideia, achei bastante criativa.
Mas falta algo importante porque no teste não consegui dar o roque, movinento fundamental numa partida.
Eu não cheguei a testar o en passant, de todo caso esteja atento tambem

2
DivinSphere

cara o resultado ficou muito bom, eu só mudaria o background das peças do adversário, quando eles vão pro meu lado do tabuleiro eu fico perdido e não sei qual é as minhas peças de forma rápida visual kkk (eu percebi que as peças são diferentes, mas misturando tudo fica meio difícil de identificar rapidamente)

1
1
1
1
1
2
RodrigoSchio
Autor
Autor

O oponente sempre captura se hover jogada que permite. Quando não dá pra capturar nada ele joga uma randomValidMove.

Não tem inteligencia artificial.

1
EduardoWorrel

Top demais Rodrigo!

Tenho profundo interesse em xadrez e programação e não pude deixar de fazer um projeto relacionado, mas fui menos ousado e usei lib de tabuleiro e outra pra interpretar os lances.

A ideia é acompanhar torneios ao vivo mas ficou mt caro fazer o Texto To Speech então foquei em partidas já jogadas.

O output da aplicação são vídeos:
https://www.youtube.com/@ai-chess-global

Tenho buscado parceiros pra me ajudar a desenvolver a ideia, se você ou alguém se interessar, plis fala comigo :)