├── styles.css ├── index.html ├── README.md ├── app.js └── img ├── paper.svg ├── scissors.svg └── rock.svg /styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | footer{ 9 | text-align: center; 10 | padding: 10px; 11 | } 12 | 13 | footer a{ 14 | color: black; 15 | text-decoration: none; 16 | } 17 | 18 | button{ 19 | background-color: #ffe97d; 20 | border: 4px solid black; 21 | margin: 5px; 22 | } 23 | 24 | .container{ 25 | max-width: 420px; 26 | height: 100vh; 27 | max-height: 745px; 28 | margin: 0 auto; 29 | background-color: #ffb74d; 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: space-between; 33 | border: 5px solid black; 34 | box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); 35 | } 36 | 37 | h1{ 38 | font-size: 35px; 39 | text-align: center; 40 | padding: 20px; 41 | } 42 | 43 | #result{ 44 | text-align: center; 45 | } 46 | 47 | #result img{ 48 | width: 40%; 49 | } 50 | 51 | #start-text{ 52 | font-size: 36px; 53 | padding: 20px; 54 | } 55 | 56 | #group-btn{ 57 | display: flex; 58 | width: 100%; 59 | } 60 | 61 | #group-btn > button > img{ 62 | width: 100%; 63 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rock Paper Scissors | Kiko Palomares 7 | 8 | 9 | 10 |

11 |

Rock Paper Scissors

12 | 13 |

14 | 15 |

16 | 17 |

18 | Choose an option 19 |

20 | 21 |

22 | 23 |

24 | 25 |

26 | 29 | 32 | 35 |

36 | 37 | 38 | 39 |

40 | 41 | 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rock-paper-scissors 2 | 3 | Pequeño juego de piedra, papel, tijeras desarrollado con Vanilla JavaScript. 4 | 5 | Puedes ver el vídeo explicativo del proyecto para aprender a hacerlo paso a paso en [mi canal de youtube](https://youtu.be/_LpFG9VlTAY). 6 | 7 | Puedes probar el juego [aquí](https://rock-paper-scissors-kikopalomares.netlify.app/) 8 | 9 | ------------ 10 | 11 | ## 👋 Hola, mi nombre es Kiko Palomares 12 | 13 | Soy fullstack developer desde hace más de 10 años, autor del libro [*No todo es programar*](https://notodoesprogramar.com/), trabajo como líder de equipo en una empresa y también me dedico a divulgar contenido sobre programación y tecnología en la red. Puedes seguir todo mi contenido desde mi página web [https://kikopalomares.com/](https://kikopalomares.com/) o mis redes sociales como [@kikopalomares](https://kiko.pro/). 14 | 15 | Puedes apoyar mi trabajo nominándome como [GitHub Star](https://stars.github.com/nominate/) o marcando la *★ Star* del repositorio. 16 | 17 | [![GitHub Star](https://img.shields.io/badge/-%E2%98%85%20Nominar%20a%20Star-yellow)](https://stars.github.com/nominate/) 18 | 19 | ----- 20 | 21 | [![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UClk6ZM2sM04tofDdFro8pag?style=social)](https://www.youtube.com/kikopalomares/?sub_confirmation=1) 22 | [![Discord](https://img.shields.io/discord/701885087217614959?style=social&label=Discord&logo=discord)](http://kikopalomares.com/discord) 23 | [![Twitter Follow](https://img.shields.io/twitter/follow/kikopalomares?style=social)](https://twitter.com/kikopalomares) 24 | [![GitHub followers](https://img.shields.io/github/followers/kikopalomares?style=social)](https://github.com/KikoPalomares) 25 | [![GitHub Stars](https://img.shields.io/github/stars/kikopalomares?style=social)](https://github.com/KikoPalomares) 26 | 27 | ----- 28 | 29 | [![Powered by Kiko Palomares](https://img.shields.io/badge/-Powered%20by%20Kiko%20Palomares-red)](https://kikopalomares.com/) 30 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const ROCK = "rock"; 2 | const PAPER = "paper"; 3 | const SCISSORS = "scissors"; 4 | 5 | const TIE = 0; 6 | const WIN = 1; 7 | const LOST = 2; 8 | 9 | let isPlaying = false; 10 | 11 | const rockBtn = document.getElementById("rock"); 12 | const paperBtn = document.getElementById("paper"); 13 | const scissorsBtn = document.getElementById("scissors"); 14 | const resultText = document.getElementById("start-text"); 15 | const userImg = document.getElementById("user-img"); 16 | const machineImg = document.getElementById("machine-img"); 17 | 18 | rockBtn.addEventListener("click", () => { 19 | play(ROCK); 20 | }); 21 | paperBtn.addEventListener("click", () => { 22 | play(PAPER); 23 | }); 24 | scissorsBtn.addEventListener("click", () => { 25 | play(SCISSORS); 26 | }); 27 | 28 | function play(userOption) { 29 | if(isPlaying) return; 30 | 31 | isPlaying = true; 32 | 33 | userImg.src = "img/" + userOption + ".svg"; 34 | 35 | resultText.innerHTML = "Chossing!"; 36 | 37 | const interval = setInterval(function(){ 38 | const machineOption = calcMachineOption(); 39 | machineImg.src = "img/" + machineOption + ".svg"; 40 | }, 200); 41 | 42 | setTimeout(function () { 43 | 44 | clearInterval(interval); 45 | 46 | const machineOption = calcMachineOption(); 47 | const result = calcResult(userOption, machineOption); 48 | 49 | machineImg.src = "img/" + machineOption + ".svg"; 50 | 51 | switch (result) { 52 | case TIE: 53 | resultText.innerHTML = "You have tied!"; 54 | break; 55 | case WIN: 56 | resultText.innerHTML = "You win!"; 57 | break; 58 | case LOST: 59 | resultText.innerHTML = "You lost!"; 60 | break; 61 | } 62 | isPlaying = false; 63 | }, 2000); 64 | } 65 | 66 | function calcMachineOption() { 67 | const number = Math.floor(Math.random() * 3); 68 | switch (number) { 69 | case 0: 70 | return ROCK; 71 | case 1: 72 | return PAPER; 73 | case 2: 74 | return SCISSORS; 75 | } 76 | } 77 | 78 | function calcResult(userOption, machineOption) { 79 | if (userOption === machineOption) { 80 | return TIE; 81 | 82 | } else if (userOption === ROCK) { 83 | 84 | if (machineOption === PAPER) return LOST; 85 | if (machineOption === SCISSORS) return WIN; 86 | 87 | } else if (userOption === PAPER) { 88 | 89 | if (machineOption === SCISSORS) return LOST; 90 | if (machineOption === ROCK) return WIN; 91 | 92 | } else if (userOption === SCISSORS) { 93 | 94 | if (machineOption === ROCK) return LOST; 95 | if (machineOption === PAPER) return WIN; 96 | 97 | } 98 | } -------------------------------------------------------------------------------- /img/paper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/scissors.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/rock.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------