Olá pessoal, tudo bem com vocês?
Hoje iremos explorar como criar uma rotina que automatize a criação de um jogo da memória, simplificando o trabalho realizado. Vamos unir imagens disponíveis e um modelo de atividade para que o aluno possa recortar e montar o jogo.
Vamos lá?
Tópicos:
- Introdução
- Posição das Imagens
- Duplicação de Imagem
- Função Posição
- Fluxo para Download
Introdução
Nesta etapa, nosso foco será criar uma rotina que permita automatizar a criação de um jogo da memória.
A ideia é simplificar o processo, unindo imagens e modelos de atividade para que o aluno possa recortar e montar o jogo. Isso facilita o trabalho do educador e torna o aprendizado mais interativo e divertido.
Posição das Imagens
Para definir onde cada imagem será posicionada, utilizaremos um software que permite analisar o modelo e obter as informações de coordenadas X, Y e tamanho.
Essas informações serão aplicadas na atividade final, garantindo que as imagens estejam corretamente alinhadas.
Na ferramenta photopea (photopea.com) iremos colocar o nosso modelo e após utilizando a ferramenta régua iremos pegar as posição das imagens (X, Y).
Com as posições coletadas iremos armazenar em um objeto contendo as informações de posição de cada elemento pela sua ordem. Teremos oito imagens, no exemplo abaixo temos a posição de cada imagem que será incluída.
{
0: { x: 117, y: 300 },
1: { x: 530, y: 300 },
2: { x: 930, y: 300 },
3: { x: 117, y: 820 },
4: { x: 530, y: 820 },
5: { x: 930, y: 820 },
6: { x: 320, y: 1340 },
7: { x: 730, y: 1340 }
}Duplicação de Imagem
Como estamos criando um jogo da memória, é necessário duplicar cada imagem, posicionando-a em duas posições diferentes.
Isso é essencial para criar o efeito de duplicidade, que é a base do jogo da memória.
Na caixinha “filtra_e_seleciona” esse trabalho é realizado através de código, ele irá duplicar a inserção de imagem em resultado, porém alterando a posição do outro elemento.
Com isso teremos a mesma imagem duplicada e em posições diferentes, gerando assim, na atividade o efeito necessário para o jogo da memória.
Função Posição
Desenvolvemos a função get_position para aplicar as informações de posicionamento conforme o número da imagem que será incluída.
Essa função garante que cada imagem seja posicionada corretamente, facilitando a montagem do jogo.
function getPosition(index, positions) {
return positions[index] || { x: 0, y: 0 };
}Pela posição da imagem iremos recuperar as informações de posição já coletadas nas etapas anteriores.
Fluxo para Download
Por hoje é só.
Disponibilizamos o fluxo para download. Lembre-se de ajustar para a sua planilha Google Sheets e para o caminho onde estão os mockups criados.
Até a próxima!