Puzzle sencillo en JavaScript
Publicado por Meneth (5 intervenciones) el 19/12/2020 16:12:46
Hola
Estoy haciendo un puzzle sencillo en JavaScript y tengo muchas dudas. Tengo dos cuadriculas en el html, la de la izquierda contiene las piezas del puzle desordenadas y la de la derecha contiene las celdas donde deben colocarse las piezas del puzzle ordenadas correctamente.
Hasta aquí todo bien, el problema es que he conseguido el efecto contrario y no sé como lo he hecho (wtf?), es decir, puedo colocar las celdas de la derecha (que contienen solamente una imagen con un X como el icono de error) al tablero de la izquierda pero no puedo hacerlo al revés, que es el objetivo del ejercicio.
dejo aqui los códigos por si alguien puede echarme una mano:
El html:
El código JavaScript:
Y el archivo CSS:
Agradacería mucho si alguien puede guiarme un poco porque me he perdido completamente...
Estoy haciendo un puzzle sencillo en JavaScript y tengo muchas dudas. Tengo dos cuadriculas en el html, la de la izquierda contiene las piezas del puzle desordenadas y la de la derecha contiene las celdas donde deben colocarse las piezas del puzzle ordenadas correctamente.
Hasta aquí todo bien, el problema es que he conseguido el efecto contrario y no sé como lo he hecho (wtf?), es decir, puedo colocar las celdas de la derecha (que contienen solamente una imagen con un X como el icono de error) al tablero de la izquierda pero no puedo hacerlo al revés, que es el objetivo del ejercicio.
dejo aqui los códigos por si alguien puede echarme una mano:
El html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="desordenadas" class="game-board">
<div class="box" draggable="true"><img src="1.jpg"></div>
<div class="box" draggable="true"><img src="2.jpg"></div>
<div class="box" draggable="true"><img src="3.jpg"></div>
<div class="box" draggable="true"><img src="4.jpg"></div>
<div class="box" draggable="true"><img src="5.jpg"></div>
<div class="box" draggable="true"><img src="6.jpg"></div>
<div class="box" draggable="true"><img src="7.jpg"></div>
<div class="box" draggable="true"><img src="8.jpg"></div>
<div class="box" draggable="true"><img src="9.jpg"></div>
</div>
<div id="solucion" class="game-board">
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
<div class="box"><img src="error.png"></div>
</div>
</body>
</html>
El código JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
window.addEventListener("load",
()=>{
let piezas_desordenadas=["3.jpg","9.jpg","1.jpg","8.jpg","7.jpg","6.jpg","5.jpg","4.jpg","2.jpg"];
//Con esto cada vez que se juegan están desordenadas de distinta manerapiezas_desordenadas = piezas_desordenadas.sort(
()=>{
return Math.random() - 0.5
});
//Este array solo se utiliza una vez para colocar las imagenes desordenadas en la casillalet piezas_ordenadas=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"];
let casillas=document.querySelectorAll("#desordenadas img");
let celdas=document.querySelectorAll(".box");
for(let i=0;i<casillas.length;i++){
casillas[i].src=piezas_desordenadas[i];
celdas[i].addEventListener("dragstart",
(evento)=>{
evento.dataTransfer.setData("pieza",celdas[i].children[0].src);
celdas[i].classList.add("agarre");
});
casillas[i].addEventListener("dragend",
()=>{
celdas[i].classList.remove("agarre");
});
}let celdas_solucion=document.querySelectorAll("#solucion img");
for(let i=0;i<celdas_solucion.length;i++){
celdas_solucion[i].addEventListener("dragenter",
()=>{
celdas_solucion[i].classList.add("encima");
});
celdas_solucion[i].addEventListener("dragleave",
()=>{
celdas_solucion[i].classList.remove("encima");
});
celdas_solucion[i].addEventListener("dragover",
(evento)=>{
evento.preventDefault();
evento.dataTransfer.dropEffect="move";
});
celdas_solucion[i].addEventListener("drop",
(evento)=>{
celdas_solucion[i].classList.remove("encima");
celdas_solucion[i].children[0].src=evento.dataTransfer.getData("pieza");
});
}})
Y el archivo CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.game-board {
display: grid;grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
margin-left:100px;
}.box img{
width:100%;
}body { display: flex;justify-content: center;
}.box {
background: #444;
border: 1px solid #555;
display: flex;align-items: center;
justify-content: center;
color: #AAA;
}.box.agarre{
border: 2px dashed tomato;}.box.encima {
border: 2px dashed green; }Agradacería mucho si alguien puede guiarme un poco porque me he perdido completamente...
Valora esta pregunta
0
