├── _config.yml ├── images ├── favicon-32x32.png ├── icon-rock.svg ├── icon-scissors.svg └── icon-paper.svg ├── README.md ├── index.html ├── styles.css └── index.js /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jpbrab0/pedra-papel-tesoura/HEAD/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/icon-rock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-scissors.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌑Pedra, 📄Papel e ✂️Tesoura! 2 | 3 | ## Feito por [👨‍💻João Pedro Resende🚀](https://jpres.dev) 4 | ## Desafio 5 | Desafio do [Frontend-Mentor.io](https://www.frontendmentor.io/) 6 | 7 | [clique aqui para ir para o desafio](https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH) 8 | ## Apresentação📄 9 | 10 | Feito em live na [twitch.tv/jpbrab0](https://twitch.tv/jpbrab0). E utilizando conceitos basicos da programação como: 11 | 12 | * Lógica Basica 13 | * Váriaveis 14 | * Constantes 15 | * Funções 16 | * Estruturas condicionais 17 | * DOM 18 | 19 | ## Projeto 20 | Caso você queira ver como ficou o projeto [**clique aqui**](https://jpbrab0.github.io/pedra-papel-tesoura/)😉 21 | 22 | ## Tecnologias💻 23 | * Html 24 | * Css 25 | * Js 26 | 27 | ## Contribuição 28 | Caso você queira contribuir com o projeto deixa uma estrela e compartilhe para ver mais projetos como este!😁 29 | 30 | ### **Feito para estudo e diversão!!!** 31 | -------------------------------------------------------------------------------- /images/icon-paper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Pedra, Papel e Tesoura! | João Pedro 11 | 12 | 13 |

14 |

Pedra, Papel e Tesoura!

15 | 16 | 17 |

18 |

19 | 20 |

21 | 22 | 26 | 27 | 31 | 35 |

36 |

Pontuação

37 |

38 |

39 |

Jogador

40 |

41 |

42 |

43 |

Bot

44 |

45 |

46 |

47 |

48 |

49 |

Jogador

50 | 51 |

52 |

X

53 |

54 |

Bot

55 | 56 |

57 |

58 |

59 |

Resultado:

60 |

61 |

62 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(40, 87, 119); 3 | } 4 | 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | border: none; 9 | } 10 | header{ 11 | background-color: #fff; 12 | font-family: sans-serif; 13 | text-align: center; 14 | width: 100%; 15 | } 16 | main{ 17 | width: 100%; 18 | margin-top: 60px; 19 | display: flex; 20 | align-items: center; 21 | flex-direction: column; 22 | } 23 | main h2{ 24 | margin-top: 23px; 25 | color: #fff; 26 | font-weight: bold; 27 | font-family: sans-serif; 28 | } 29 | main .game{ 30 | display: grid; 31 | gap: 130px; 32 | grid-template-columns: 1fr 1fr 1fr; 33 | } 34 | main .game button{ 35 | outline: none; 36 | padding: 13px; 37 | border-radius: 13px; 38 | border:5px solid green; 39 | background-color: grey; 40 | cursor: pointer; 41 | } 42 | main .scores{ 43 | display: flex; 44 | justify-content: space-evenly; 45 | width: 60%; 46 | text-align: center; 47 | } 48 | main .scores .score{ 49 | background-color: grey; 50 | border: 3px solid orange; 51 | color: #fff; 52 | font-weight: bold; 53 | font-family: sans-serif; 54 | padding: 13px; 55 | border-radius: 13px; 56 | } 57 | main .result{ 58 | margin-top: 32px; 59 | display: flex; 60 | text-align: center; 61 | color: white; 62 | font-family: sans-serif; 63 | } 64 | main .result h1{ 65 | margin: 42px 23px; 66 | color: red; 67 | } 68 | main .result p{ 69 | margin-bottom: 10px; 70 | text-align: center; 71 | font-family: sans-serif; 72 | font-weight: bold; 73 | } 74 | main .result .img{ 75 | background-color: grey; 76 | border: 4px solid blue; 77 | padding: 23px; 78 | border-radius: 10px; 79 | } 80 | main .result .img + .img { 81 | margin-left: 23px; 82 | } 83 | main .resultP{ 84 | margin-top: 32px; 85 | color: #fff; 86 | font-weight: bold; 87 | font-family: sans-serif; 88 | background-color: grey; 89 | padding: 13px; 90 | border-radius: 13px; 91 | border:5px solid orange; 92 | } 93 | main label{ 94 | margin-top: 33px; 95 | text-align: center; 96 | } 97 | 98 | footer{ 99 | margin-top: 42px; 100 | text-align: center; 101 | width: 100%; 102 | color: #fff; 103 | font-weight: bold; 104 | font-family: sans-serif; 105 | } 106 | footer a{ 107 | text-decoration: none; 108 | cursor: pointer; 109 | 110 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Importando elementos do HTML 2 | const pedraElement = document.querySelector("button[name=pedra]") 3 | const papelElement = document.querySelector("button[name=papel]") 4 | const tesouraElement = document.querySelector("button[name=tesoura]") 5 | const jogadorElement = document.querySelector("img[name=jogador]") 6 | const botElement = document.querySelector("img[name=bot]") 7 | const score1Element = document.querySelector("#score1") 8 | const score2Element = document.querySelector("#score2") 9 | const resultElement = document.querySelector("p[name=result]") 10 | // Itens do jogo 11 | // Sendo 0 = Pedra, 1 = Papel e 2 = Tesoura 12 | const itens = ["Pedra", "Papel", "Tesoura"] 13 | 14 | let contadorJogador = 0 15 | let contadorPc = 0 16 | // Função para alterar o score 17 | function alterarScore(){ 18 | score1Element.innerHTML = `${contadorJogador}` 19 | score2Element.innerHTML = `${contadorPc}` 20 | } 21 | // Adicionando eventos de click 22 | papelElement.addEventListener("click", () => { 23 | var bot = Math.floor(Math.random() * 3) 24 | jogadorElement.src = 'images/icon-paper.svg' 25 | switch(bot){ 26 | case 0: 27 | botElement.src = 'images/icon-rock.svg' 28 | resultElement.innerHTML = "Resultado: Você venceu!!! :D" 29 | contadorJogador++ 30 | break 31 | case 1: 32 | botElement.src = 'images/icon-paper.svg' 33 | resultElement.innerHTML = "Resultado: EMPATE... :(" 34 | break 35 | case 2: 36 | botElement.src = 'images/icon-scissors.svg' 37 | resultElement.innerHTML = "Resultado: Você Perdeu... D:" 38 | contadorPc++ 39 | break 40 | } 41 | alterarScore() 42 | }) 43 | 44 | tesouraElement.addEventListener("click", () => { 45 | var bot = Math.floor(Math.random() * 3) 46 | jogadorElement.src = 'images/icon-scissors.svg' 47 | switch(bot){ 48 | case 0: 49 | botElement.src = 'images/icon-paper.svg' 50 | resultElement.innerHTML = "Resultado: Você venceu!!! :D" 51 | contadorJogador++ 52 | break 53 | case 1: 54 | botElement.src = 'images/icon-rock.svg' 55 | resultElement.innerHTML = "Resultado: Você Perdeu... D:" 56 | contadorPc++ 57 | break 58 | case 2: 59 | botElement.src = 'images/icon-scissors.svg' 60 | resultElement.innerHTML = "Resultado: EMPATE... :(" 61 | break 62 | } 63 | alterarScore() 64 | }) 65 | 66 | pedraElement.addEventListener("click", () => { 67 | var bot = Math.floor(Math.random() * 3) 68 | jogadorElement.src = 'images/icon-rock.svg' 69 | switch(bot){ 70 | case 0: 71 | botElement.src = 'images/icon-rock.svg' 72 | resultElement.innerHTML = "Resultado: EMPATE... :(" 73 | 74 | break 75 | case 1: 76 | botElement.src = 'images/icon-paper.svg' 77 | resultElement.innerHTML = "Resultado: Você Perdeu... D:" 78 | contadorPc++ 79 | break 80 | case 2: 81 | botElement.src = 'images/icon-scissors.svg' 82 | resultElement.innerHTML = "Resultado: Você venceu!!!:D" 83 | contadorJogador++ 84 | break 85 | 86 | } 87 | alterarScore() 88 | }) --------------------------------------------------------------------------------