Jogos mentais: treine e fortaleça seu cérebro com tecnologias web
O cérebro, como os computadores, é um sistema complexo de processamento de informações. Ter um computador e um cérebro poderoso é uma ferramenta eficaz para a realização de suas atividades.
Uma seção muito importante é a memória: dela depende nossa capacidade de armazenamento, ou seja, experiências evocadas e conhecimentos adquiridos.
Ter uma memória boa ou ruim depende da manutenção, treino e fortalecimento dos nossos sistemas. Seus benefícios incluem: aumento da capacidade, aumento da atenção, aumento da criatividade, capacidade de eliminar pensamentos obsoletos, aumento do aprendizado, aumento do bem-estar, aumento da saúde e, esse ponto específico, segundo especialistas em neurociências, depende do nível de aprendizagem processual que vivenciamos. , como aprender a andar de bicicleta. Lembre-se de que nossa memória é uma ferramenta valiosa que podemos fortalecer e desenvolver.
Através da tecnologia e da programação, podemos criar jogos interativos que estimulem nossas habilidades cognitivas e ao mesmo tempo nos entretenham. Neste artigo, irei guiá-lo passo a passo para que você possa construir seu próprio aplicativo da web usando HTML, CSS e JavaScript. Você aprenderá como projetar as cartas do jogo e como implementar a lógica do jogo. Hora de ativar os neurônios!
Primeiro passo
O primeiro seria abrir nosso editor de código, bem como o arquivo onde nosso programa estará armazenado. A seguir, você criará um arquivo HTML que chamaremos de index.html.A continuación, una breve explicación de nuestro archivo HTML que seguramente ya conoces.
A etiqueta <!DOCTYPE html> define o tipo de documento como HTML5.
A etiqueta <html lang="en"> define o idioma do documento para inglês.
O bloco <head> contém metadados e links para arquivos externos.
A etiqueta <meta charset="UTF-8"> especifica a codificação de caracteres do documento como UTF-8, que é amplamente suportada e suporta caracteres internacionais.
A etiqueta <meta name="viewport" content="width=device-width, initial-scale=1.0"> configura a visualização do conteúdo em dispositivos móveis.
O atributo width=device-width define a largura da página para a largura do dispositivo e escala inicial = 1,0 define o nível de zoom inicial para 1,0, o que significa que a página será exibida sem escala em dispositivos móveis.
O link <link rel="stylesheet" href="styles.css"> vincula o arquivo CSS externo chamado "styles.css" ao documento HTML, permitindo que estilos personalizados sejam aplicados ao conteúdo.
A etiqueta<title>Memoria</title> define o título do documento como "Memória".
O conteúdo do corpo do documento está localizado na tag <body>.
A div com o id "stats" é usado para exibir o número de tentativas. A div com o id "wrapper" e a div com o id "game" são recipientes para o jogo da memória.
Por fim, a etiqueta <script src="script.js"></script> é usado para incluir o arquivo JavaScript externo chamado "script.js", que contém a lógica do jogo de memória.
Segundo passo
O próximo passo será criar um arquivo CSS que chamarei de styles.css. Esses estilos CSS que você verá a seguir serão aplicados aos elementos do jogo da memória para dar-lhes uma aparência visual específica.
body: define a margem como 0, o fundo como preto e oculte o estouro da página.
Estilos do container principal
#wrapper: Define a altura para 100vh (100% da altura da janela), exibe os elementos em uma coluna e os distribui uniformemente no espaço verticalmente.
Estilos do área do jogo
#game: define a altura para 100vh (100% da altura da janela) e uma altura máxima de 700px. Exibe elementos em uma grade e centraliza-os vertical e horizontalmente.
#stats: define a cor do texto como branco, a posição como absoluta, o preenchimento como 1rem, o texto centralizado, a largura como 100% menos 2rem e o tamanho da fonte como 3rem.
Estilos dos cartões
.card: defina a largura para 100px, a altura para 140px, a margem para 1rem, a posição para relativa, transforme a transição para 0,5s e transforme o estilo para preservar-3d.
.card.active: aplica uma transformação de rotação no eixo Y de 180 graus quando a classe "active" está presente.
.card div: define a largura e a altura para 100%, o raio da borda para 1rem, exibe os elementos em uma grade e centraliza-os vertical e horizontalmente. Além disso, ele define a posição como absoluta, oculta o verso do cartão e desativa eventos de ponteiro.
.card .face: defina o fundo para uma cor amarela (#f0db4f), aplica uma transformação de rotação no eixo Y de 180 graus, define a cor do texto para preto e o tamanho da fonte para 6rem.
.card .back: define uma borda amarela sólida de 3px (#f0db4f) e o fundo da imagem de fundo para o centro, com contenção de tamanho e sem repetição. Para a imagem utilizada nesta seção, armazenamos a imagem que queríamos exibir no verso da cartão, na mesma pasta onde estão localizados os arquivos do nosso projeto.
Tercer passo
A mágica vai acontecer aqui, já que usaremos JavaScript. Até agora o código não tinha nenhuma funcionalidade, mas era hora de colocar a cabeça para trabalhar para criar a lógica dos cartões. Primeiro, geraremos nosso arquivo que chamaremos de script.js.
Neste jogo você deve encontrar pares de cartas iguais. Agora, vamos ver o que faz cada parte do código que você verá no final desta explicação.
Variáveis
totalCards: é o número total de cartas no jogo. Neste caso, existem 16 cartões.
cards: é uma lista vazia onde os cartões do jogo serão armazenadas.
selectCards: é uma lista vazia onde serão armazenados os cartões que o jogador selecionar.
valuesUsed: é uma lista vazia onde serão armazenados os valores utilizados para os cartões.
currentMove: é uma variável que registra quantos movimentos o jogador fez no turno atual.
currentAttempts: é uma variável que registra quantas tentativas o jogador fez no total.
Modelo de cartão
cardTemplate: é uma string de texto que representa a estrutura HTML de um cartão. Possui uma parte traseira (traseira) e uma parte frontal (face).
Función activate
Esta função é executada quando o jogador clica em uma carta. Verifica se o jogador pode selecionar a carta atual. Se você já selecionou 2 cartas, não poderá selecionar mais. Adiciona a classe ativa ao cartão selecionado para exibi-lo.
Também verifica se já existe um cartão selecionado, se não houver nenhum cartão selecionado ele adiciona o cartão atual à lista selectCards e aumenta o valor de currentMove em 1.
Se dois cartões já estiverem selecionados, aumente currentAttempts em 1 e exiba o número de tentativas na tela. Compare os valores das duas cartas selecionadas. Se os valores corresponderem, os cartões selecionados serão removidos e currentMove será redefinido para 0.
Se os valores não corresponderem, aguarde 600 milissegundos e oculte os cartões selecionados.
Função randomValue
Esta função é usada para gerar valores aleatórios para cartões. Gera um número aleatório entre 0 e metade do número total de cartas. Verifica se esse valor já foi usado em valuesUsed. Se não tiver sido usado, será adicionado à lista de valuesUsed. Se o valor já tiver sido usado duas vezes, a função randomValue será chamada recursivamente para gerar outro valor aleatório.
Loop for
Este loop é usado para criar as cartas do jogo. Em cada iteração, um elemento div é criado e o modelo de carta é atribuído a ele. O cartão é adicionado à lista de cartões e exibido na tela. A função randomValue é chamada para atribuir um valor aleatório ao cartão. Um manipulador de eventos de clique sob demanda é atribuído para chamar a função activate quando ela é clicada.
E isso e tudo! Agora você tem um jogo de memória em JavaScript. E você, em quantas tentativas completa o jogo da memória?
A criação de jogos mentais bem desenvolvidos, utilizando as linguagens de programação HTML, CSS e JavaScript, são ideais para iniciar no mundo dos games e gerar um universo de possibilidades em benefício da humanidade.
Eu desafio você a melhorar sua lógica de programação codificando um jogo mental que definitivamente ativará seus neurônios.
Saudações!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.