JavaScript - Ayuda para Añadir funciones a mi rompecabezas

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

Ayuda para Añadir funciones a mi rompecabezas

Publicado por miguel (23 intervenciones) el 19/10/2017 12:14:23
Hola tengo un rompecabezas para mi peque, en el cual se mueven las piezas para conseguir una foto y funciona pero no veo la forma de conseguir crear la funcion de que me avise cuando esta completado.
Quiero que me avise ke complete la imagen con un alert o un evento que estoy creando con sonido.echen un vistazo al codigo por si me pueden dar ideas, el paso ke llevo, lo va a termonar el antes.
Un saludo y gracias


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
<!DOCTYPE html>
 
<html>
 
<head>
 
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Rompecabezas</title>
</head>
 
<body>
    <h1>Puzzle</h1>
    <p>Haz clic en las piezas para hacer la foto</p>
 
        <div class="main">
 
        <div class="board" id="board">
 
              <div class="box one" style="top:0%;left:0%;"> <div class="border"> </div> </div>
              <div class="box two" style="top:0%;left:20%;"> <div class="border"> </div> </div>
              <div class="box three" style="top:0%;left:40%;"> <div class="border"> </div> </div>
              <div class="box four" style="top:0%;left:60%;"> <div class="border"> </div> </div>
              <div class="box five" style="top:0%;left:80%;"> <div class="border"> </div> </div>
              <div class="box six" style="top:20%;left:0%;"> <div class="border"> </div> </div>
              <div class="box seven" style="top:20%;left:20%;"> <div class="border"> </div> </div>
              <div class="box eight" style="top:20%;left:40%;"> <div class="border"> </div> </div>
              <div class="box nine" style="top:20%;left:60%;"> <div class="border"> </div> </div>
              <div class="box ten" style="top:20%;left:80%;"> <div class="border"> </div> </div>
              <div class="box eleven" style="top:40%;left:0%;"> <div class="border"> </div> </div>
              <div class="box twelve" style="top:40%;left:20%;"> <div class="border"> </div> </div>
              <div class="box thirteen" style="top:40%;left:40%;"> <div class="border"> </div> </div>
              <div class="box fourteen" style="top:40%;left:60%;"> <div class="border"> </div> </div>
              <div class="box fifteen" style="top:40%;left:80%;"> <div class="border"> </div> </div>
              <div class="box sixteen" style="top:60%;left:0%;"> <div class="border"> </div> </div>
              <div class="box seventeen" style="top:60%;left:20%;"> <div class="border"> </div> </div>
              <div class="box eighteen" style="top:60%;left:40%;"> <div class="border"> </div> </div>
              <div class="box nineteen" style="top:60%;left:60%;"> <div class="border"> </div> </div>
              <div class="box twenty" style="top:60%;left:80%;"> <div class="border"> </div> </div>
              <div class="box twenty_one" style="top:80%;left:0%;"> <div class="border"> </div> </div>
              <div class="box twenty_two" style="top:80%;left:20%;"> <div class="border"> </div> </div>
              <div class="box twenty_three" style="top:80%;left:40%;"> <div class="border"> </div> </div>
              <div class="box twenty_four" style="top:80%;left:60%;"> <div class="border"> </div> </div>
              <div class="box twenty_five" style="top:80%;left:80%;"> <div class="border"> </div> </div>
 
            </div>
        </div>
    <!--<img src="img\acueducto.jpg"  >-->
    <!--<iframe src="audio\entredosaguas.mp3" id="music"></iframe>-->
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
 
</html>


Y aki mi problema, js, la imagen esta en 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
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
var slide = document.getElementsByClassName("box");
var blank = slide[Math.sqrt(slide.length) - 1];   //para identificar la diapositiva en blanco
var root = Math.sqrt(slide.length);
for (var i = 0; i < slide.length; i++) {
    slide[i].frameNumber = i + 1;
    slide[i].coOrdinate = i + 1;   // esto cambia con la posición de la diapositiva. ¡nunca es constante!
}
 
var slideTraced = function (number) {
    for (var a = 0; a < slide.length; a++) {
        if (slide[a].coOrdinate == number) {
            return slide[a];
        }
    }
};
 
// esta función dispersa las diapositivas aleatoriamente cuando la ventana se carga .....
var randomization = function () {
    var movementOrder = [1, root, -1, -root];
    for (var i = 0; i <= 100; i++) {
        var guestPosition = blank.coOrdinate + (movementOrder[Math.floor(Math.random() * movementOrder.length)]);
        if (guestPosition > 0 && guestPosition <= slide.length) {
            var guest = slideTraced(guestPosition);
            var left = blank.coOrdinate;
            var right = guest.coOrdinate;
            if (left % root == 0 && right % root == 1) {
                i--;
            } else if (left % root == 1 && right % root == 0) {
                i--;
            } else {
                var swPos = guest.getAttribute("style");
                var swPosBl = blank.getAttribute("style");
                guest.coOrdinate = left;
                blank.coOrdinate = right;
                guest.setAttribute("style", swPosBl);
                blank.setAttribute("style", swPos);
            }
        } else {
            i--;
        }
    }
};
 
// llama a la función de aleatorización en la ventana de carga y dispersa las diapositivas ..
 
window.addEventListener("load", randomization);
 
// esta es una función para cambiar las posiciones de diapositivas en el clic del usuario ....
var changePosition = function () {
    var left = this.coOrdinate;
    var right = blank.coOrdinate;
    var possibility = left - right;
    if (possibility == 1 || possibility == -1 || possibility == root || possibility == -root) {
        if (left % root == 1 && right % root == 0) {
            return false;
        } else if (left % root == 0 && right % root == 1) {
            return false;
        } else {
            var swapped = this.coOrdinate;
            var swPos = this.getAttribute("style");
            var swPosBl = blank.getAttribute("style");
            this.coOrdinate = blank.coOrdinate;
            blank.coOrdinate = swapped;
            this.setAttribute("style", swPosBl);
            blank.setAttribute("style", swPos);
        }
    }
};
 
for (var i = 0; i < slide.length; i++) {
    slide[i].addEventListener("click", changePosition);
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder