├── README.md
├── index.html
├── javascript
└── app.js
├── resources
└── images
│ ├── favicon.png
│ ├── game.png
│ ├── option1.png
│ ├── option2.png
│ ├── option3.png
│ └── question.png
└── styles
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # Portafolio Web Plantilla Responsive Design
2 | Esta es una pagina web en donde se realiza el juego **Piedra Papel o Tijera**, creada para dar continuación del curso de **JavaScript Básico** de Platzi y asi afianzar términos básicos del lenguaje, este curso se puede encontrar en el [siguiente link](https://platzi.com/clases/basico-javascript/).
3 |
4 | # Características
5 | Dentro del curso se implementan varias características de HTML, CSS y JavaScript como:
6 |
7 | * Manejo y manipulación del DOM a traves de JavaScript
8 | * Gestión de eventos a traves de JavaScript para agregar interactividad.
9 | * Uso de Funciones, Variables, condicionales y operaciones lógicas para gestionar la lógica detrás del juego.
10 | * Asignación de clases CSS para agregar o remover estilos a partir de la activación de eventos escuchados desde JavaScript.
11 | * Uso de etiquetas HTML especializadas al las vistas responsive como el meta viewport de HTML5.
12 | * Uso de posiciones de componentes como Relative y Absolute para manipulación de muestra de objetos en la pagina asi como superposición de objetos a traves del z-index.
13 | * Uso de Displays enfocándose en el display flex-box para dar una alineación horizontal a los elementos y tengan propiedades responsive con el tamaño de la pagina.
14 | * Uso de MediaQueries para el control Responsive de la página web en otras pantallas.
15 |
16 | # Resultado
17 | A continuación se muestra el resultado del juego **Piedra Papel o Tijera**, si quiere ver la pagina por usted mismo puede entrar al [siguiente link](https://crissud.github.io/GameJavaScript/index.html).
18 |
19 |
20 |
21 |
Muestra Juego Piedra Papel o Tijera
22 |
25 |
26 |
Muestra Juego Piedra Papel o Tijera
27 |
Piedra Papel Tijera
8 |
12 |
13 |
14 |
JsGame
15 |
17 |
21 |
22 |
23 |
24 |
!! Piedra Papel o Tijeras !!
25 |
26 |
27 |
28 |
29 |
Tu elección
30 |
31 |
32 |
33 |
Vs
34 |
35 |
36 |
Maquina
37 |
38 |
39 |
40 |
41 |
Resultado
42 |
43 |
44 |
45 |
46 |
Selecciona tu jugada !!
47 |
48 |
49 |
51 |
52 |
54 |
55 |
57 |
58 |
59 | Jugar de Nuevo
60 |
61 |
62 |
64 |
68 |
69 |
70 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/javascript/app.js:
--------------------------------------------------------------------------------
1 | function play(humanOption){
2 | const result = document.querySelector('.result');
3 | const humanImg = document.querySelector('.human-img');
4 | const machineImg = document.querySelector('.machine-img');
5 | const machineOption = Math.floor(Math.random() * (4 - 1)) + 1;
6 | humanImg.src = './resources/images/option'+humanOption+'.png';
7 | machineImg.src = './resources/images/option'+machineOption+'.png';
8 | machineImg.classList.add('reflex');
9 | document.querySelector('.cover').classList.add('reset');
10 | if(
11 | humanOption === 1 && machineOption === 3 ||
12 | humanOption === 2 && machineOption === 1 ||
13 | humanOption === 3 && machineOption === 2
14 | )
15 | result.innerHTML = "!Felicidades! Has Ganado";
16 | else if(humanOption === machineOption)
17 | result.innerHTML = "!Empate!";
18 | else
19 | result.innerHTML = "!Lo siento! La maquina ha ganado";
20 | }
21 |
22 | function reset(){
23 | document.querySelector('.human-img').src = './resources/images/question.png';
24 | document.querySelector('.machine-img').src = './resources/images/question.png';
25 | document.querySelector('.machine-img').classList.remove('reflex');
26 | document.querySelector('.cover').classList.remove('reset');
27 | document.querySelector('.result').innerHTML = "Resultado";
28 | }
--------------------------------------------------------------------------------
/resources/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrissUD/GameJavaScript/1bef4d22684ec935be96e6a67681670f659c4ada/resources/images/favicon.png
--------------------------------------------------------------------------------
/resources/images/game.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrissUD/GameJavaScript/1bef4d22684ec935be96e6a67681670f659c4ada/resources/images/game.png
--------------------------------------------------------------------------------
/resources/images/option1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrissUD/GameJavaScript/1bef4d22684ec935be96e6a67681670f659c4ada/resources/images/option1.png
--------------------------------------------------------------------------------
/resources/images/option2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrissUD/GameJavaScript/1bef4d22684ec935be96e6a67681670f659c4ada/resources/images/option2.png
--------------------------------------------------------------------------------
/resources/images/option3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrissUD/GameJavaScript/1bef4d22684ec935be96e6a67681670f659c4ada/resources/images/option3.png
--------------------------------------------------------------------------------
/resources/images/question.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrissUD/GameJavaScript/1bef4d22684ec935be96e6a67681670f659c4ada/resources/images/question.png
--------------------------------------------------------------------------------
/styles/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
3 | body{
4 | margin: 0;
5 | padding: 0;
6 | background: #053666;
7 | overflow-x: hidden;
8 | }
9 | figure{
10 | margin: 15px;
11 | }
12 | header, header div, header ul{
13 | display: flex;
14 | align-items: center;
15 | }
16 | header{
17 | justify-content: space-between;
18 | background: #369;
19 | padding: 0 30px 0 30px;
20 | font-family: 'Roboto', sans-serif;
21 | box-sizing: border-box;
22 | width: 100vw;
23 | }
24 | header, header a{
25 | color: #fff;
26 | text-decoration: none;
27 | }
28 | header li{
29 | list-style: none;
30 | margin: 10px;
31 | }
32 | header img{
33 | width: 40px;
34 | }
35 | header a{
36 | transition: all 0.3s ease-in-out;
37 | }
38 | header a:hover{
39 | display: block;
40 | transform: scale(1.2);
41 | }
42 | .container{
43 | box-sizing: border-box;
44 | background: #369;
45 | padding: 30px;
46 | display: flex;
47 | flex-direction: column;
48 | align-items: center;
49 | color: #fff;
50 | width: 100vw;
51 | font-family: 'Bangers', cursive;
52 | }
53 | .container h1, .container h2, .container h3{
54 | font-weight: lighter;
55 | }
56 | .container h1{
57 | font-size: 48px;
58 | color: #F8CB2B;
59 | }
60 | .resultados, .resultados-container{
61 | border: 5px solid;
62 | border-radius: 20px;
63 | }
64 | .resultados{
65 | padding: 5px;
66 | }
67 | .results-up{
68 | display: flex;
69 | align-items: center;
70 | }
71 | .results-up div{
72 | margin: 20px;
73 | text-align: center;
74 | }
75 | .machine-img.reflex{
76 | transform: scaleX(-1);
77 | }
78 | .results-down{
79 | text-align: center;
80 | }
81 | .down-panel{
82 | text-align: center;
83 | position: relative;
84 | border-radius: 30px;
85 | overflow: hidden;
86 | }
87 | .down-panel h2{
88 | color: #F8CB2B;
89 | font-size: 32px;
90 | }
91 | .eleccion button{
92 | background: transparent;
93 | padding: 10px;
94 | width: 240px;
95 | height: 240px;
96 | cursor: pointer;
97 | outline: none;
98 | box-sizing: border-box;
99 | }
100 | .paper img{
101 | transform: scaleX(-1);
102 | }
103 | .eleccion button, .eleccion button figure{
104 | border: 5px solid #fff;
105 | border-radius: 100%;
106 | margin: 10px;
107 | }
108 | .eleccion button figure{
109 | margin: 0;
110 | height: 95%;
111 | display: flex;
112 | align-items: center;
113 | justify-content: center;
114 | }
115 | .eleccion button img{
116 | width: 140px;
117 | height: 140px;
118 | }
119 | .eleccion button:hover{
120 | background: #fff;
121 | box-shadow: -1px 2px 18px 0px #fff;
122 | }
123 | .eleccion button:hover figure{
124 | border: 5px solid #369;
125 | }
126 | .cover{
127 | position: absolute;
128 | top: 0;
129 | left: 0;
130 | width: 100%;
131 | height: 100%;
132 | background: rgba(0, 0, 0, .3);
133 | display: none;
134 | justify-content: center;
135 | align-items: center;
136 | }
137 | .cover button{
138 | color: #fff;
139 | outline: none;
140 | background: #ffc800;
141 | cursor: pointer;
142 | border: none;
143 | font-family: 'Roboto', sans-serif;
144 | font-size: 20px;
145 | padding: 30px 50px;
146 | }
147 | .cover button:hover{
148 | background: #f8d041;
149 | }
150 | .cover.reset{
151 | display: flex;
152 | }
153 | svg{
154 | min-width: 320px;
155 | }
156 | footer{
157 | text-align: center;
158 | color: #fff;
159 | font-family: 'Roboto', sans-serif;
160 | }
161 | @media (max-width:480px){
162 | .results-up div{
163 | margin: -5px;
164 | }
165 | header{
166 | padding: 0;
167 | }
168 | }
--------------------------------------------------------------------------------
21 | 
26 | 
