/Jogo-da-velha

Projeto final da disciplina de Arquitetura de Software - Demo jogo da velha em html + css + react

Primary LanguageJavaScriptOtherNOASSERTION

Jogo-da-velha

Projeto final da disciplina de Arquitetura de Software - Demo jogo da velha em HTML + CSS + REACT

Jogo da velha encontrado no tutorial da documentação do React

Tutorial: https://pt-br.reactjs.org/tutorial/tutorial.html

Autores

Danny Sullivan e Deisilani Nunes

Conceitos

O React é uma biblioteca JavaScript declarativa, eficiente e flexível para criar interfaces com o usuário.

Ele permite compor UIs complexas a partir de pequenos e isolados códigos chamados “componentes”.

possibilita aos desenvolvedores criarem aplicações web, tendo a facilidade de alterar elementos ou os dados exibidos, sem recarregar a página. Por exemplo, o número de likes de uma rede social pode aumentar ou diminuir sem a necessidade de realizar o refresh na página.

Arquitetura

O React trabalha com o modelo de arquitetura mvc (model, view controller).

MODEL: classes que armazenam os dados manipulados pela aplicação e que têm a ver com o domínio do sistema em construção.

View: classes responsáveis pela apresentação da interface gráfica do sistema, incluindo janelas, botões, menus, barras de rolagem, etc.

controller: classes que tratam e interpretam eventos gerados por dispositivos de entrada, como mouse e teclado.

Objetivos

O diferencial do React é ser rápida, escalável e simples, podendo ser usada com outras bibliotecas ou frameworks de JavaScript, como o Angular JS.

Essa amplitude de funcionalidades e sua forma descomplicada de realizar processos são os responsáveis pela ferramenta ser tão buscada pelos programadores.

Elementos

Props: Um componente recebe parâmetros, chamados props (abreviação de propriedades), e retorna uma hierarquia de elementos para exibir através do método render.

RENDER: o método render retorna uma descrição do que você deseja ver na tela. React recebe a descrição e exibe o resultado. Em particular, render retorna um elemento React, que é uma descrição simplificada do que renderizar.

Funcionalidades do Jogo:

Este exemplo é do clássico jogo da velha, onde ganha o jogador que primeiro fizer 3 pontos.

  • Um jogador ganha ao preencher 3 campos que caem em uma linha horizontal, vertical ou diagonal.
  • Os jogadores empatam se não houver mais movimentos possíveis (ou seja, todas os campos são reivindicados).
  • Ao finalizar a partida, é anunciado um vencedor e o jogo pode ser reiniciado.
  • Quando clicar no botão de reiniciar, é exibida uma caixa de diálogo perguntando ao usuário se ele tem certeza. Se clicar no "OK", reinicia a partida, se clicar em cancelar, a caixa de diálogo é fechada e o jogo atual é retomado.
  • Quando o jogo termina, exibe uma caixa de diálogo indicando o vencedor ou o empate, juntamente com um botão de iniciar uma nova partida.

Prints do Jogo

Inicio do Jogo image

Jogador ganhou image

Empate image

Instalando

Licença

Licenciado nos termos da licença MIT.