Skip to content

Commit 1b20d32

Browse files
CrissUDCrissUD
committed
Primer version de proyecto JavaScript Game
0 parents  commit 1b20d32

10 files changed

Lines changed: 271 additions & 0 deletions

File tree

‎README.md‎

Whitespace-only changes.

‎index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" type="image/png" href="./resources/images/favicon.png">
7+
<title>Piedra Papel Tijera</title>
8+
<link rel="stylesheet" href="./styles/styles.css">
9+
</head>
10+
<body>
11+
<header>
12+
<div class="logo-page">
13+
<figure><img src="./resources/images/game.png" alt=""></figure>
14+
<h2>JsGame</h2>
15+
</div>
16+
<nav>
17+
<ul>
18+
<li><a href="#">Home</a></li>
19+
<li><a href="#">About</a></li>
20+
</ul>
21+
</nav>
22+
</header>
23+
<div class="container">
24+
<h1>!! Piedra Papel o Tijeras !!</h1>
25+
<div class="resultados">
26+
<div class="resultados-container">
27+
<div class="results-up">
28+
<div class="human-pane">
29+
<h2>Tu elección</h2>
30+
<figure><img class="human-img" src="./resources/images/question.png" alt=""></figure>
31+
</div>
32+
<div class="vs-pane">
33+
<h1>Vs</h1>
34+
</div>
35+
<div class="machine-pane">
36+
<h2>Maquina</h2>
37+
<figure><img class="machine-img" src="./resources/images/question.png" alt=""></figure>
38+
</div>
39+
</div>
40+
<div class="results-down">
41+
<h2 class="result">Resultado</h2>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="down-panel">
46+
<h2>Selecciona tu jugada !!</h2>
47+
<div class="eleccion">
48+
<button class="stone" onclick="play(1)">
49+
<figure><img src="https://img.icons8.com/color/144/000000/angry-fist.png"/></figure>
50+
</button>
51+
<button class="paper" onclick="play(2)">
52+
<figure><img src="https://img.icons8.com/color/144/000000/so-so.png"/></figure>
53+
</button>
54+
<button class="scissors" onclick="play(3)">
55+
<figure><img src="https://img.icons8.com/color/144/000000/hand-scissors.png"/></figure>
56+
</button>
57+
</div>
58+
<div class="cover">
59+
<button onclick="reset()">Jugar de Nuevo</button>
60+
</div>
61+
</div>
62+
</div>
63+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
64+
<path
65+
fill="#369"
66+
fill-opacity="1"
67+
d="M0,128L120,149.3C240,171,480,213,720,213.3C960,213,1200,171,1320,149.3L1440,128L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z">
68+
</path>
69+
</svg>
70+
<footer>
71+
<p>©Derechos reservados @CissUD</p>
72+
</footer>
73+
<script src="./javascript/app.js"></script>
74+
</body>
75+
</html>

‎javascript/app.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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‎

3.17 KB
Loading

‎resources/images/game.png‎

2.27 KB
Loading

‎resources/images/option1.png‎

3.7 KB
Loading

‎resources/images/option2.png‎

5.76 KB
Loading

‎resources/images/option3.png‎

2.39 KB
Loading

‎resources/images/question.png‎

2.87 KB
Loading

‎styles/styles.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
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+
}

0 commit comments

Comments
 (0)