Skip to content

Commit 1410c7c

Browse files
UltiRequiemUltiRequiem
committed
🎨 Add code
0 parents  commit 1410c7c

File tree

5 files changed

+254
-0
lines changed

5 files changed

+254
-0
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Simon Dice
2+
3+
Proyecto final del curso.
4+
# SimonDice.js

‎img/icon.png

34.3 KB
Loading

‎index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="shortcut icon" href="./img/icon.png" />
5+
<meta charset="utf-8" />
6+
<title>Simon Dice</title>
7+
<link rel="stylesheet" href="./styles.css" />
8+
</head>
9+
<body>
10+
<div class="gameboard">
11+
<div id="celeste" class="color celeste left" data-color="celeste"></div>
12+
<div id="violeta" class="color violeta right" data-color="violeta"></div>
13+
<div id="naranja" class="color naranja left" data-color="naranja"></div>
14+
<div id="verde" class="color verde right" data-color="verde"></div>
15+
<button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">
16+
¡Empezar a jugar!
17+
</button>
18+
</div>
19+
<script src="./script.js"></script>
20+
</body>
21+
</html>

‎script.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
const celeste = document.getElementById('celeste');
2+
const violeta = document.getElementById('violeta');
3+
const naranja = document.getElementById('naranja');
4+
const verde = document.getElementById('verde');
5+
const btnEmpezar = document.getElementById('btnEmpezar');
6+
const ULTIMO_NIVEL = 10;
7+
8+
class Juego {
9+
constructor() {
10+
this.inicializar();
11+
this.generarSecuencia();
12+
setTimeout(this.siguienteNivel, 500);
13+
}
14+
15+
inicializar() {
16+
this.siguienteNivel = this.siguienteNivel.bind(this);
17+
this.elegirColor = this.elegirColor.bind(this);
18+
btnEmpezar.classList.add('hide');
19+
this.nivel = 1;
20+
this.colores = {
21+
celeste,
22+
violeta,
23+
naranja,
24+
verde,
25+
};
26+
}
27+
28+
generarSecuencia() {
29+
this.secuencia = new Array(ULTIMO_NIVEL)
30+
.fill()
31+
.map(() => Math.floor(Math.random() * 4));
32+
}
33+
34+
siguienteNivel() {
35+
this.subnivel = 0;
36+
this.iluminarSecuencia();
37+
this.agregarEventosClick();
38+
}
39+
40+
transformarNumeroAColor(numero) {
41+
switch (numero) {
42+
case 0:
43+
return 'celeste';
44+
case 1:
45+
return 'violeta';
46+
case 2:
47+
return 'naranja';
48+
case 3:
49+
return 'verde';
50+
default:
51+
return 'verde';
52+
}
53+
}
54+
55+
transformarColorANumero(color) {
56+
switch (color) {
57+
case 'celeste':
58+
return 0;
59+
case 'violeta':
60+
return 1;
61+
case 'naranja':
62+
return 2;
63+
case 'verde':
64+
return 3;
65+
default:
66+
return 'verde';
67+
}
68+
}
69+
70+
iluminarSecuencia() {
71+
for (let i = 0; i < this.nivel; i++) {
72+
const color = this.transformarNumeroAColor(this.secuencia[i]);
73+
setTimeout(() => this.iluminarColor(color), 1000 * i);
74+
}
75+
}
76+
77+
iluminarColor(color) {
78+
this.colores[color].classList.add('light');
79+
setTimeout(() => this.apagarColor(color), 350);
80+
}
81+
82+
apagarColor(color) {
83+
this.colores[color].classList.remove('light');
84+
}
85+
86+
agregarEventosClick() {
87+
this.colores.celeste.addEventListener('click', this.elegirColor);
88+
this.colores.verde.addEventListener('click', this.elegirColor);
89+
this.colores.violeta.addEventListener('click', this.elegirColor);
90+
this.colores.naranja.addEventListener('click', this.elegirColor);
91+
}
92+
93+
eliminarEventosClick() {
94+
this.colores.celeste.removeEventListener('click', this.elegirColor);
95+
this.colores.verde.removeEventListener('click', this.elegirColor);
96+
this.colores.violeta.removeEventListener('click', this.elegirColor);
97+
this.colores.naranja.removeEventListener('click', this.elegirColor);
98+
}
99+
100+
elegirColor(ev) {
101+
const nombreColor = ev.target.dataset.color;
102+
const numeroColor = this.transformarColorANumero(nombreColor);
103+
this.iluminarColor(nombreColor);
104+
if (numeroColor === this.secuencia[this.subnivel]) {
105+
this.subnivel++;
106+
if (this.subnivel === this.nivel) {
107+
this.nivel++;
108+
this.eliminarEventosClick();
109+
if (this.nivel === ULTIMO_NIVEL + 1) {
110+
// Ganó!
111+
} else {
112+
setTimeout(this.siguienteNivel, 1500);
113+
}
114+
}
115+
} else {
116+
alert('Perdiste.');
117+
}
118+
}
119+
}
120+
121+
const empezarJuego = () => {
122+
alert('El juego va a empezar.');
123+
window.juego = new Juego();
124+
};

‎styles.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
body {
2+
margin: 0;
3+
background: #dedede;
4+
display: flex;
5+
align-items: center;
6+
height: 100vh;
7+
}
8+
9+
.gameboard {
10+
height: 100vh;
11+
width: 100vh;
12+
border-radius: 50%;
13+
overflow: hidden;
14+
margin: 0 auto;
15+
max-height: 60vh;
16+
max-width: 60vh;
17+
}
18+
19+
.color {
20+
width: 50%;
21+
height: 50%;
22+
display: inline-block;
23+
}
24+
25+
.left {
26+
float: left;
27+
}
28+
29+
.right {
30+
float: left;
31+
}
32+
33+
.celeste {
34+
background: #22a6b3;
35+
}
36+
37+
.celeste.light {
38+
background: #7ed6df;
39+
}
40+
41+
.violeta {
42+
background: #be2edd;
43+
}
44+
45+
.violeta.light {
46+
background: #e056fd;
47+
}
48+
49+
.naranja {
50+
background: #f0932b;
51+
}
52+
53+
.naranja.light {
54+
background: #ffbe76;
55+
}
56+
57+
.verde {
58+
background: #6ab04c;
59+
}
60+
61+
.verde.light {
62+
background: #badc58;
63+
}
64+
65+
.btn-start {
66+
width: 400px;
67+
height: 100px;
68+
background: #ecf0f1;
69+
color: #2c3e50;
70+
font-size: 2.5rem;
71+
position: absolute;
72+
top: calc(50% - 50px);
73+
left: calc(50% - 200px);
74+
}
75+
76+
.hide {
77+
display: none;
78+
}
79+
80+
.btn-start {
81+
cursor: pointer;
82+
width: 420px;
83+
height: 100px;
84+
background: #ecf0f1;
85+
color: #2c3e50;
86+
border: none;
87+
border-bottom: 4px solid #c4c6c7;
88+
border-radius: 8px;
89+
font-size: 3em;
90+
position: absolute;
91+
top: calc(50% - 50px);
92+
left: calc(50% - 210px);
93+
transition: 0.5s;
94+
outline: none;
95+
}
96+
97+
.btn-start:hover {
98+
color: #ecf0f1;
99+
background: #2c3e50;
100+
border-bottom: 4px solid #1f3346;
101+
}
102+
103+
.btn-start:active {
104+
transform: scale(0.95);
105+
}

0 commit comments

Comments
 (0)