Código de JavaScript - Completa el puzzle arrastrando y soltando las imágenes

Imágen de perfil
Val: 3.483
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Completa el puzzle arrastrando y soltando las imágenesgráfica de visualizaciones


JavaScript

Publicado el 4 de Marzo del 2020 por Joel (148 códigos)
964 visualizaciones desde el 4 de Marzo del 2020
Este código muestra como arrastras y soltar imágenes para completar un simple "puzzle" con javascript. Una vez las imágenes estas colocadas correctamente, nos indica que se ha completado.

Muestra como utilizar los eventos dragstart, dragenter, dragover, dragleave y drop, que se utilizan para arrastrar cualquier elemento por el navegador del PC.

puzzle-inicial

puzzle-no-completado

puzzle-completado

Versión 1.0

Publicado el 4 de Marzo del 2020gráfica de visualizaciones de la versión: Versión 1.0
965 visualizaciones desde el 4 de Marzo del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Estas son las imágenes que he utilizado!!!

0.jpg
0

1.jgp
1

2.jgp
2

3.jgp
3

4.jgp
4

5.jgp
5
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Puzzle</title>
 
    <style>
    h2 {
        padding: 1em;
        margin: 0em;
    }
    article {
        background-color: rgb(173, 159, 255);
        border-radius: 1em;
        text-align: center;
        max-width: 640px;
        margin: auto;
    }
 
    #contenedor {
        display: inline-block;
        margin: 1em;
    }
    #contenedor>div {
        float: left;
        width: 202px;
        height: 202px;
        background-color: #808080;
    }
 
    #imagenes {
        display: inline-block;
        height:90px;
        width:570px;
        border:1px solid #808080;
        text-align:center;
    }
    #imagenes>img {
        height: 80px;
        margin: 5px;
    }
 
    .over {
        background-color:#CEF608;
        opacity: 0.5;
    }
 
    #resultado {
        color:Red;
        font-size:2em;
    }
    .hide {
        display:none;
    }
    </style>
</head>
<body>
    <article>
        <h2>PUZZLE</h2>
 
        <div id="imagenes"></div>
 
        <div id="resultado" class="hide">Completado !!!</div>
 
        <div id="contenedor">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </article>
</body>
</html>
 
<script>
window.onload = init();
 
function init() {
    // funcion que devuelve n numeros aleatorios sin repetirse
    const random = (n) => {
        let elem=Array.from({length: n}, (v, i) => i);
        return Array.from({length: n}).reduce((acum) => {
            let pos=Math.floor(Math.random()*elem.length);
            acum.push(elem[pos]);
            elem.splice(pos,1);
            return acum;
        }, []);
    };
 
    // ponemos las imagenes aleatoriamente
    random(6).forEach(el => {
        document.getElementById("imagenes").innerHTML+="<img id='i"+el+"' draggable='true' src='"+el+".jpg'>";
    });
 
    puzzle();
}
 
function puzzle() {
 
    // cremos los eventos para iniciar a arrastrar las imagenes
    const imgOrigin=document.querySelectorAll("#imagenes img");
    imgOrigin.forEach(el => {
        el.addEventListener("dragstart", dragStart, false);
    });
 
    // creamos los eventos para mover y soltar
    const imgDest=document.querySelectorAll("#contenedor div");
    imgDest.forEach(el => {
        el.addEventListener("dragenter", dragEnter, false);
        el.addEventListener("dragover", dragOver, false);
        el.addEventListener("dragleave", dragLeave, false);
        el.addEventListener("drop", drop, false);
    });
 
    function dragStart(e) {
        e.dataTransfer.effectAllowed = 'move';
 
        // guardamos el id del elemento que estamos moviendo
        e.dataTransfer.setData("text/plain", this.id);
    }
 
    function dragEnter(e) {
        e.dataTransfer.dropEffect = 'move';
        e.preventDefault();
    }
 
    function dragOver(e) {
        e.dataTransfer.dropEffect = 'move';
        this.classList.add("over");
        e.preventDefault();
    }
 
    function dragLeave(e) {
        this.classList.remove("over");
        e.preventDefault();
    }
 
    function drop(e) {
        this.classList.remove("over");
 
        // obtenemos el id de la imagen que estamos moviendo
        const imgID=e.dataTransfer.getData("text/plain");
        const img=document.getElementById(imgID);
 
        if (this.innerHTML) {
            if (img.parentElement.parentElement.id=="contenedor") {
                // movemos una imagen encima de otra imagen dentro del contenedor
 
                // cogemos los valores de la imagen que se encuentra en el destino
                const orig=this.querySelector("img");
                // cogemos el contenedor de la imagen original
                const dest=img.parentElement;
 
                // movemos la imagen que arrastramos
                moverImagen(img, this);
                // movemos la imagen que se encuentra en el contenedor donde
                // hemos arrastrado la imagen
                moverImagen(orig, dest);
            }
        } else {
            // movemos la imagen a un contenedor vacio
            moverImagen(img, this);
        }
        e.preventDefault();
 
        completado();
    }
 
    /**
     * Funcion para mover una imagen.
     *
     * @param {object} origen - imagen a mover
     * @param {object} destino - contenedor donde poner la imagen
     */
    function moverImagen(origen, destino) {
        const fragment = document.createDocumentFragment();
        fragment.appendChild(origen);
        destino.appendChild(fragment);
    }
 
    /**
     * Funcion que verifica si se ha completado
     */
    function completado() {
        const resultado=document.getElementById("resultado");
        resultado.classList.add("hide");
 
        const imgs=document.querySelectorAll("#contenedor img");
        if (imgs.length!=6) {
            return false;
        }
 
        if ([...imgs].every((el, index) => el.id=="i"+index)) {
            resultado.classList.remove("hide");
        }
    }
}
</script>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5993