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
Y aki mi problema, js, la imagen esta en css:
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
0