Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolasgabriiel/rock-paper-scissors
Rock-Paper-Scissors Game: Um site interativo do clássico jogo de pedra, papel e tesoura, com elementos visuais e sons. Desenvolvido utilizando HTML, CSS e JavaScript para uma experiência envolvente e divertida.
https://github.com/nicolasgabriiel/rock-paper-scissors
css html javascript
Last synced: about 2 months ago
JSON representation
Rock-Paper-Scissors Game: Um site interativo do clássico jogo de pedra, papel e tesoura, com elementos visuais e sons. Desenvolvido utilizando HTML, CSS e JavaScript para uma experiência envolvente e divertida.
- Host: GitHub
- URL: https://github.com/nicolasgabriiel/rock-paper-scissors
- Owner: nicolasgabriiel
- Created: 2022-12-12T23:46:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-22T23:45:59.000Z (about 2 years ago)
- Last Synced: 2024-05-28T18:47:36.822Z (8 months ago)
- Topics: css, html, javascript
- Language: CSS
- Homepage: https://nicolasgabriiel.github.io/Rock-Paper-Scissors/
- Size: 2.45 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rock-Paper-Scissors
Esta é uma solução para o desafio [Rock, Paper, Scissors game](https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH) do site [Front End Mentor](https://www.frontendmentor.io/challenges), onde você escontra diversos desafios que vão te ajudar a melhorar o seu conhecimento no Front-End.
## Sumário
- [Resumo](#Resumo)
- [Desafio](#Desafio)
- [Screenshot](#screenshot)
- [Link](#link)
- [Processo](#Processo)
- [Construido com](#construido-com)
- [O que eu aprendi](#o-que-eu-aprendi)
- [Autor](#autor)
## Resumo
O desafio é construir o projeto e deixá-lo o mais próximo possível do design oferecido. Podendo usar qualquer ferramenta para ajudar a concluir o desafio. O objetivo principal dessa página era criar um jogo tradicional e muito conhecido: O pedra, papel e tesoura. O front-end mentor te dá duas opções ao escolher esse projeto, o modo de jogo Bônus e o Tradicional. A diferença entres os dois está em quantos elementos de batalha teremos, no meu caso eu escolhi o projeto Bônus, então o jogo se torna Pedra, Papel, tesoura, lagartixa e spock. É identico ao jogo tradicional porém contém mais elementos. As regras do jogo são exatamente iguais, apenas acrescentando o caso de vítoria ou derrota dos itens novos, vocês podem entender isso melhor ao clicar no botão "rules" dentro do jogo.
### Desafio
O site deveria ter uma boa usabilidade, um design fiel ao oferecido, e oferecer uma boa expêriencia ao usuário, vou destacar aqui alguns pontos importantes do desenvolvimento:
-Botão para ver as regras do jogo
-Escolha de qual das opções você usará na disputa
-Um Adversário que escolhe suas opções aleatóriamente
-Lógica de vencedor ou perdedor
-Exibir placar de pontuação
-Design Responsivo
-Emitir efeitos sonoros (Bônus criado por mim)
### Screenshots
Página inicial
------
Página de Regras
------
Página de Disputa
------
Página em modo responsivo
------
Gif animado do site em funcionamento
### Link: https://nicolasgabriiel.github.io/Rock-Paper-Scissors/
## Processo
### Construido com
-HTML5
-CSS3
-JavaScript
### Principais coisas que aprendi
Adicionar trilhas de audio no html
```html
```
O radial-gradient que eu utilizei pra fazer o background da página
```css
background-image: radial-gradient(circle farthest-side at 50% 0%, #1E3756 10%, #131637 100%);
```
O atributo disabled que funciona em buttons e inputs
```js
for(let i = 0; i < listaBotoes.length ; i ++){
listaBotoes[i].disabled = false
}
```
A função Math para gerar um número aleatório
```js
function gerarAleatório (min, max) {
min = Math.ceil(1);
max = Math.floor(5);
codeHouse = Math.floor(Math.random() * (max - min + 1) + min);
}
```
A função .play() pra reproduzir um som
```js
sounds[1].play()
```
Usando setTimeout pra gerar tempo antes de uma função
```js
setTimeout(gerarOponente, 3200)
```
## Autor
- Site pessoal - [Nicolas Gabriel](https://www.linkedin.com/in/nicolasgabriiel/)
### Planejamento de Projeto:
- [X] Criar Repositório
- [X] Adicionar as imagens que serão usadas
- [X] Criar Background da Página
- [X] Estruturar Header
- [X] Importar Fonte
- [X] Estilizar Header
- [X] Esturural a Main principal
- [X] Estilizar a Main Principal
- [X] Estruturar o botão rules no footer
- [X] Estilizar o botão rules do footer
- [X] Receber o onclick do botão rules
- [X] Criar Lógica pra desabiltar toda a página
- [X] Construir a lógica pra abrir nova tela
- [X] Estruturar nova tela
- [X] Estilizar nova tela de rules
- [X] Receber o onclik pra fechar
- [X] Criar Lógica pra habilitar a tela
- [x] Construir a lógica pra fechar
- [x] Arrumar todos os posicionamentos dos botões
- [X] Receber o input de todos os Botões principais
- [X] Exibir o background dos botões
- [X] Criar lógica de selecionar
- [x] Estruturar section onde acontecerá a disputa
- [X] Criar Lógica de ocultar as sections quando um botão for clicado
- [x] Exibir a div oculta com o botão Selecionado
- [x] Estilizar section onde acontecerá a disputa
- [X] Criar lógica de escolher algum aleatóriamente
- [X] Criar Lógica de vencedor
- [X] Exibir o Resultado na tela
- [x] Receber o input do elemento play again
- [X] Criar lógica pra escolher novamente
- [x] Receber input de score
- [x] Criar Lógica de Score
- [x] Exibir e estilizar na tela o score
- [X] Aplicar o Responsivo na página principal
- [x] Aplicar o Responsivo na Página secundária
- [X] Aplicar o Responsivo na Aba Rules
- [X] Aplicar testes para ver se tudo funciona adequadamente
- [X] Corrigir possíveis bugs que apareçam na última etapa
- [X] Melhorar Sombras e tamanho dos botoes
- [X] Criando um bom Readme para o projeto
### Bônus
- [X] Efeitos sonoros especiais
- [ ] Criar o efeito de background no vencedor