PROJETO INTEGRADO

JOGOS DIGITAIS

Proposta :1- JavaScript (abreviado como "JS") é uma linguagem de programação dinâmica cheia de
recursos

que quando aplicada em um documento HTML, pode fornecer interatividade dinâmica em sites. O

Javascript pode ser muito versátil e amigável ao iniciante, mas se você se dedicar, irá adquirir uma

grande experiência e poderá criar coisas incríveis como jogos, gráficos 2D e 3D animados, aplicativos

e muito mais!

A) Construa seu próprio jogo de memória seguindo o tutorial da leitura recomendada utilizando

conceitos básicos de HTML5, CSS3 e Javascript puro. Customize seu próprio jogo: escolha suas

imagens, cores e efeitos ao virar/embaralhar as cartas. Compartilhe o resultado postando seu código

no GitHub Classroom: https://classroom.github.com/a/kTJwSrDv

B) Nesta atividade, você irá realizar uma gestão ágil do projeto anterior, crie um Quadro Scrum para

organizar as atividades do projeto. Detalhe as tarefas a serem executadas e associe-as ao progresso

correspondente. Recomenda-se a utilização do Trello (https://trello.com/) como ferramenta para

essa finalidade.

C) Os servidores de jogos desempenham um papel crucial no gerenciamento de jogos multiplayer,

assegurando uma experiência de jogo coesa e interativa para múltiplos jogadores simultaneamente.

Descreva como os servidores de jogos são utilizados para gerenciar sessões multiplayer, manter a

integridade do jogo, balancear carga e fornecer atualizações em tempo real.

 Projeto criado no
trello
https://trello.com/invite/b/nxw7m3W
A/ATTIc85071ad68be3bbd58f981d6ac
a9f2f120928F01/jogo-da-memoria
 Repositorio no gitHub
https://github.com/rogeriocabr
al30/jogo-da-mem-ria
- Os servidores de jogos desempenham um papel crucial
no gerenciamento de jogos multiplayer,
assegurando uma experiência de jogo coesa e interativa
para múltiplos jogadores simultaneamente.
Descreva como os servidores de jogos são utilizados
para gerenciar sessões multiplayer, manter a
integridade do jogo, balancear carga e fornecer
atualizações em tempo real.
Gerenciamento de Sessões Multiplayer: Os servidores de jogos são responsáveis por
criar e gerenciar sessões multiplayer. Eles facilitam a conexão entre os jogadores, permitindo que
entrem em partidas juntos e interajam dentro do mundo virtual do jogo.

Integridade do Jogo: Os servidores garantem a integridade do jogo, implementando regras e

verificando a validade das ações dos jogadores. Isso ajuda a evitar trapaças e garantir uma experiência
de jogo justa para todos os participantes.

Balanceamento de Carga: Em jogos com um grande número de jogadores, os servidores

precisam distribuir equitativamente a carga de trabalho para garantir que o desempenho do jogo não
seja prejudicado. Isso pode envolver a alocação dinâmica de recursos do servidor com base na
demanda atual, redirecionando jogadores para instâncias de servidor menos ocupadas ou
aumentando a capacidade do servidor conforme necessário.

Fornecimento de Atualizações em Tempo Real: Os servidores de jogos são

responsáveis por fornecer atualizações em tempo real para todos os jogadores conectados. Isso inclui
informações sobre a posição de outros jogadores, eventos no jogo e alterações no ambiente. Essas
atualizações são essenciais para garantir uma experiência de jogo fluida e coesa para todos os
participantes.
 Em resumo, os servidores de jogos desempenham um papel crucial na
facilitação de jogos multiplayer, garantindo uma experiência de jogo justa,
suave e interativa para todos os jogadores envolvidos. Eles são
responsáveis por gerenciar sessões, manter a integridade do jogo,
equilibrar a carga de trabalho e fornecer atualizações em tempo real para
todos os participantes.

Jogo da Memória:

1: ferramenta usada, visual studio code .

2 criar pasta imagens com todas imagens no formato png que serao usada no jogo.

3 criar pasta js, css, pages e index.html.

4- index.html criado , dentro da pasta css crie um arquivo (reset.css)

volte no index.html e digita o link para chamar este arquivo:

<link rel = "stylesheet" href="./css/reset.css">

crie o h1 , um parágrafo e um botão

usando o reset css zerar e modificar , para criaçao de nossa pagina inicial.

.reset.css

(@import url é a fonte usada , retirada do google fonts)

voltando a pagina css. crie mais um arquivo com o nome login.css , para nossa pagina de login, chame
este arquivo utilizando:

<link rel = "stylesheet" href="./css/login.css">

agora vamos cria a nossa pagina de login , apague o h1 ,paragrafo e botao

crie um formulario utilizando

< form class="login form">

crie uma div class ="login_header que vai ser o cabeçalho de nossa pagina

utilize (img src) para selecionar a imagem da sua pagina inicial

crie um imput type do tipo texto para pessoa digitar o nome, um botao para que possa ser realizdo o
login

e o titulo do seu jogo (jogo da memoria)

em login.css vamos editar nossa pagina de login

nossa pagina inicial esta assim
 assim ecerramos o modelo da pagina de login , agora vamos usar o javaScript para nossa pagina
funcionar.

crie um arquivo login.js na pasta Js

no index.html utilize o script :

utilize defer para que nao pare o carregamento do nosso html quando chegar no script .

agora vamos criar um script usando o metodo validateinput

para que toda vez que o jogador digita um nome que seja maior que 2 caracteres habilite o botao jogar

utilize o seguinte script(utilize o metodo querySelector para selecionar a class login_input e login_buton
e o metodo addEventListener para criar a funçao do input)

agora criamos a funçao para o formulario seja enviado utilizando handlesubmit

utilize event.preventDefault(); para evitar que o comportamento padrao de recarregar a pagina

utilize localStorage.setItem('nome', input.value); para salvar e recuperar o nome do jogador no
localstorage

agora iremos redirecionar o jogador para nossa pagina do game

para isso entramos em pages e criamos um arquivo chamado game.html(como game.html e uma pagina
nova nao esqueça de criar o doctype da pagina)

window.location.href = 'pages/game.html';

assim nosso codigo esta finalizado e funcional

Pagina do game

acesse game.html e insira a linha do reset css , crie um arquivo na pasta css com nome de game.css
no game css vamos começar a prepara nosso grid onde vai ter todas as cartas do nosso jogo .

vamos comecar criando um div com a class grid.

vamos comecar editar nosso grid

dentro do nosso grid, crie uma div chamada card essa div sera das nossas cartas
vamos editar nossa card (carta)

nossa carta ira aparecer desse jeito

agora no nosso grid a gente precisa definir as colunas e as linhas que nosso grid vai ter .

nosso jogo vai ter 20 cartas entao vamos criar 5 colunas . para isto utilizamos o metodo fr ou seja fraçao
este metodo ira dividir nosso grid em 1 fraçao ou seja uma coluna , mas com o 'repeat' podemos repetir
esta fraçao ou seja criar a nossa 5 colunas . utilize este metodo no grid template columns :
no grid eu mutiplique nossa div card para ver como nossa pagina esta ficando e coloquei um background
color para mostrar o espaço entre nossas cartas isto sera removido mais tarde.

e nossas cartas ja ganharam formato

agora vamos centralizar nosso grid . para isso vamos criar uma margin , em margin colocomas 0 , auto (
em cima e embaixo a margin vai ser 0, e esquerda e direita a margin vai ser automatica)

e nosso grid esta assim.

agora deixe somente uma div card, para criarmos a estrutura da nossa carta

nossa carta vai ter frente e verso , entao

criamos 2 divs uma com a class face front e outra com a class face back, ultilizamos ' face' por que
iremos utilizar propriedades que sao comuns paras duas , porem o front vai ter coisa diferentes do back ,
exemplo a imagem do front vao ser diferentes e o back que vai ser a parte de tras de nossa carta vai ter
imagens repetidas como a de um baralho .

como nossa carta vai ter proporçoes iguais , no css vamos utilizar aspect radio 3/4 para criar a
proporçao de nossa carta e um border radius de 5px para dar cantos arredondas para nossa carta
no css vamos editar nossas face
e nossa carta ficou assim
o back ficou em baixou do front e nao é isso que a gente quer ,queremos uma em cima da outra para
isto na .face utilizamos o position absolute e na div card que é a div mae de nossas cartas utilizamos
position relative .
e nossa e o back sobrepoes sobre o front
vamos editar o back e o front da nossa carta colocando imagens e dando rotaçao e aplicando um
elemento 3d.

para isto iportamos utilizamos o background - image e importamos o url de nossa carta uma imagem
png na pasta imagens. para centralizar as imagens nas cartas temos uma class comun para back e front
que face iremos utilizar na class face um background - size -cover e um background position - center ,
iremos pegar nossa class card e colocar um houver e utilizar o transform e colocar uma rotaçao no eixo Y
de 180 graus para girar nossa carta quando e revelar a face da frente e na class card aplicamos
transistion : all 400 ms ease e um transform style preserve 3d, e na class back aplicamos um backface -
visbility- hidden, para que a face de tras de nossa carta se esconda quando a frente for revelada
para dar um pouco mais de estilo coloquei uma borda de 2px verde na nossa carta e copie o boder
radius de 5 px para arredondar a carta

assim esta nosso back:

e o nosso front
agora vamos criar nosso script, para criarmos todas as cartas do jogo e suas funcoes.

na pasta JS vamos criar um arquivo game.js

no nosso game.html vamos chamar o script , lembre se de colocar o 'defer'

vamos criar a funçao que irar criar as cartas para gente

nossa carta tem 3 elementos card, face front, faceback vamos utilizar o metodo create Elemente para
criar todos esses elementos .
nossa carta tambem possui classes , entao vamo usar o metodo className para colocar estas classes

mas todos os elementos de nossa carta estao separados. entao vamos utilizar o appendChild para
acrecentar dentro da nossa div card
agora temos que colocar nossa carta dentro do nosso grid utilizamos o querySelector para chamarmos
nosso grid e o utilizamos o appendChild para criar nosso grid . no final testamos usando o createCard
e temos 2 cartas
nossa funçao ja esta criando uma carta removemos entao aquela carta que esta sendo criada pela nossa
div no html deixamos só a que esta sendo cria pelo nosso script.

podemos reduzir nosso condigo utlizand uma const para criar todos os elementos de nossa carta

usando o createElemente colocamos uma (tag, e um classename) nossa tag sera nossa div e o classname
sera nossa class este metodo irar chamar nossas div e class criar nossa card e retornar para gente.

esta funçao vai ser responsavel apenas por criar nossa carta ela nao vai adcionar no nosso grid .entao
removemos grid.appendChild do nosso script e retornamos nossa carta
 ja temos a funcao que cria a carta , porem precisamos criar varias cartas com imagens diferente para
isso criarmos uma constante para isso criamos um array com os nomes que vao representar cada carta
que a gente tem. para isso precisa colocar o nome de todas as imagens que a gente tem no formato png
que ira representar os personagens de nossas cartas
 agora vamos criar uma const para carregar o nosso jogo esta const ira se chamar loadgame dentro desta
const iremos criar uma funçao chamado forEach o forEach irar chamar elemento por elemento do nosso
array . e dentro do foreach criamos uma const para ele criar varias cartas para gente e colocar no nosso
grid.
ele criara 10 cartas , por que no array e composto por 10 elementos

porem todas as cartas do front vao ser iguais para isso devemos remover do no css o url da imagens do
nosso front, depois vamos passar dinamicamente a funçao de criar estas imagens atraves do javascript .
para isso na hora de criarmos nossa carta a gente precisa receber com paramento de nossa carta um
personagem esse personagem vai ser utilizado no front da carta.

entao dentro do const createCard colocamos (character ), depois devemos mecher no css do front , para
fazemos isto acessamos a div do front e utilizamos front.style backgroundimage . para a gente conseguir
passar variaveis dentro de strings utilizamos o templateliterals (``) entao nosso codigo fica
front.style.backgroundimage= `` url(../imagens/${character}.png

para acessar a pasta de imagens dentro do Js utilizamos (..) dois ponto para passar a variavel character
dentro do tamplateliterals utilizamos ($ {} ) utilizamos cifrao e abre chaves e fecha chaves.

nosso codigo ficou assim

e ele criou uma carta para cada personagem

agora vamos duplicar nossas cartas

dentro de loadgame vamos criar uma const chamada duplicatecharacter e utilizamos 3 pontos para
selecionar nosso array , como nos queremos duplicar ultilzaremos duas vezes
(...characters...characters)

pegamos a const duplicatecharacter e colocamos no for.each para ele pecorrer os characters duplicados
. entao nosso codigo fica assim

pronto temos todos os pares do nosso jogo

agora vamos embaralhar nossas cartas para isso criamos uma const usando shuffledarray que seria um
array embaralhado e o metodo sort para embaralhar um determinado array o metodo sort ele
embaralha um conjunto de array em ordem alfabetica e nao é isso que queremos , entao vamos passar
uma funçao dentro do metodo sorte com um resultado positivo ou negativo escolhido aleatoriamente
para isso utilizamos o match random - 0,5 dentro do sort.

Apos isto ao inves de usar duplicateCharacter no for.each a gente passa o array que ja esta embaralhado
. para ele percorrer o array embaralhado e entregar as cartas embaralhadas no nosso grid
agora nossas cartas estao sendo embaralhadas
agora precisamos revelar nossas cartas para isso no game.css

excluimos card.hover e criamos uma classe chamada reveal card e colocamos transform .rotate 180deg
 para virarmos a carta quando clicarmos a gente precisa criar um eventlistener dentro do eventlistener
vamos colocar o evento de click e a funçao reveal card, precisamos criar a const revealcard e a funçao
target que é pra ele recuperar o elemento que foi clicado para isso criamos target e usamos parentnode
para pegar a div pai que seria nossa carta inteira, utilizamos o classlist e adicionamos a class revealcard
agora a funcao click da nossa carta esta funcionando

agora vamos criar uma condicional a gente vai pode virar uma carta que nao esta virada se a carta ja
estiver virada e a gente clicar nela denovo nao é pra acontecer mais nada para isso vamos criar um if

vamos pegar o parentnode verificar se essa carta ja possui uma class entao a gente acessa o classname
ultiliza o metodo includes a gente verifica se essa carta possui a class reveal card

para ve se ela ja foi revelada, se ela foi revelada agente nao vai fazer nada entao vamos por um return
vamos criar agora a funçao de que se revelarmos duas cartas iguais ela mantem de face para cima se
nao forem iguais ela esconde as cartas.

para isso vamos criar duas variaveis , firstcard e secondcard, utilizando o let

o que vai acontecer a gene vai clicar na primeira carta e vai guarda em first card

vamos clicar na segunda carta e guarda em second card , vamos comparar as duas se forem igual elas se
mantem reveladas e se forem diferentes elas esconde .

vamos criar um if e um else if para isto

agora vamos criar a funçao para que compare as cartas se ela forem iguais elas se mantem reveladas e
se forem diferentes se escondem e começamos denovo.

vamos chamar a funçao checkcards

para executar esta funçao precisamos criar um atributo para criar um atributo vamos utilizar o
setAtribute com o atributo data-character e o valor que vai para este atributo e o valor que estamos
passando pro personagem no createCard "character'

agora vamos criar a funçao para verificar se a pessoa acertou

dentro da const checkCards vamos criar uma cont firsticharacter e pegar o atributo para com o metodo
getAtribute no caso e o data-character e agente cria uma const para secondCharacter tbm

agora vamos criar o if e o else

entao no if vamos criar a funçao se o firstcharacter for igual ao secondcharacter

as imagens fiquem reveladas , pretas e brancas e um pouco opaca com aparencia desabilitada . entao
primeiro vamos la no css e vamos criar uma class disabled-card
agora quando a pessoa acerta vamos colocar essa class nas cartas que ela acertou, para isso no if agente
pega a firtCard acessa a classList e adiciona a class disabled -card . fazemos isto para a firstcard e a
second card, porem queremos colocar este estilo somente no front da carta e nao na carta inteira, para
isso devemos pegar o primeiro elemento da carta usando Child

vamos verificar
 para
continuarmos jogando precisamos resetar as cartas entao inclua fisrtcard e secondcard com elementos
vazios

else
se a pessoa errou a gente remove as cartas a primeira e a segunda carta ou seja removemos a firstcard e
a secondcard e o reveal card tambem, para que as cartas nao sejam reveladas muito rapido vamos criar
tambe um setTimeout que é um delay de 500 ms

para que conseguimos clicar denovo ne outras cartas precisamos zerar nossa variaveis

entao vamos fazer isto no else no firstcard e no secondcard

para ficar com um pouco mais de estilo na hora que o jogador acertar vamos colocar uma transiçao nas
cartas para ela ir ficando transparente . vamos no nosso css na class face e colocar uma transition all de
400ms (sigla all , e para todas propriedades)
agora vamos criar a funçao para quando a pessoa vencer o jogo ou seja virar as 20 cartas

para isso criamos uma const checkendgame e uma funçao checkandgame

entao a gente faz o seguinte criamos a const disabledcards usando o metodo queryselectorAll
procuramos todas as cartas com o elemento disabled

criamos o if diasbledcards e verifica se o tamanho do array ou seja o length for igual a 20

a gente coloca um alerta parabens voce venceu

vamos testar