Ayuda con la validación de imagenes en javascript
Publicado por Itthsys (1 intervención) el 29/10/2019 05:05:16
Hola que tal me encuentro realizando un rompecabezas en html y javascript para lo cual muestro las imágenes dispersas en la tabla1 con la ayuda de un arreglo, el rompecabezas funciona de la siguiente manera al seleccionar una de las imagenes de la tabala1 se copian en la tabla2 para ir formando la imagen. El problema que tengo es que no puedo comprobar cuando se ha completado el rompecabezas y si este fue resuelto correctamente.
He tratado con la siguiente funcion, pero no consigo validar por lo menos una celda para hacer lo mismo con las demás.
ESTE ES EL CÓDIGO DE INDEX.HTML
ESTE ES EL DOCUMENTO script.js
He tratado con la siguiente funcion, pero no consigo validar por lo menos una celda para hacer lo mismo con las demás.
1
2
3
4
if(document.getElementById('25a').src=='img/1.png')
{alert('Acertaste');
}ESTE ES EL CÓDIGO DE INDEX.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
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Ejercicio (Rompecabezas)</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="shortcut icon" href="img/rompecabezas.ico"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/estilo.css"/>
<link rel="stylesheet" href="css/animate.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<!-- Página 1 --><div data-role="page" id="pageone">
<div data-role="header" data-theme="b">
<h1 class="animated bounceInLeft">Rompecabezas</h1>
</div>
<div data-role="main" class="ui-content">
<audio src=""></audio>
<p id="barra">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<p class="cuadro1"><a href="#pagetwo" data-transition="flip">Presiona para continuar</a></p>
<audio src="1.mp3" autoplay loop></audio>
</div>
<div data-role="footer" data-theme="b">
<h1>Autores:</br>
Itthsys Ramírez</br>
</h1>
</div>
</div>
<!-- Página 2 --><div data-role="page" id="pagetwo">
<div data-role="header" data-theme="b">
<h1 class="animated bounceInRight">Rompecabezas</h1>
</div>
<div data-role="main" class="ui-content">
<form name="formulario" id="formulario">
<fieldset class="rayado">
<legend>Jugador</legend>
<input type="button" name="cargar" id="cargar" value="Cargar"/>
<img src="img/oceano.png">
</fieldset>
</form>
<form name="datos" id="datos">
<label>Intentos:</label>
<input type="number" id="intentos" disabled/>
</dl>
</form>
<h1>Imagen modelo</h1>
<table id="tabla1">
<tr>
<td><img src="img/25.png" id="1a" class="boton"></td>
<td><img src="img/26.png" id="2a" class="boton"></td>
<td><img src="img/27.png" id="3a" class="boton"></td>
<td><img src="img/28.png" id="4a" class="boton"></td>
<td><img src="img/29.png" id="5a" class="boton"></td>
<td><img src="img/30.png" id="6a" class="boton"></td>
<td><img src="img/31.png" id="7a" class="boton"></td>
<td><img src="img/32.png" id="8a" class="boton"></td>
</tr>
<tr>
<td><img src="img/33.png" id="9a" class="boton"></td>
<td><img src="img/34.png" id="10a" class="boton"></td>
<td><img src="img/35.png" id="11a" class="boton"></td>
<td><img src="img/36.png" id="12a" class="boton"></td>
<td><img src="img/37.png" id="13a" class="boton"></td>
<td><img src="img/38.png" id="14a" class="boton"></td>
<td><img src="img/39.png" id="15a" class="boton"></td>
<td><img src="img/40.png" id="16a" class="boton"></td>
</tr>
<tr>
<td><img src="img/41.png" id="17a" class="boton"></td>
<td><img src="img/42.png" id="18a" class="boton"></td>
<td><img src="img/43.png" id="19a" class="boton"></td>
<td><img src="img/44.png" id="20a" class="boton"></td>
<td><img src="img/45.png" id="21a" class="boton"></td>
<td><img src="img/46.png" id="22a" class="boton"></td>
<td><img src="img/47.png" id="23a" class="boton"></td>
<td><img src="img/48.png" id="24a" class="boton"></td>
</tr>
</table>
<h1>Actual</h1>
<table id="tabla2">
<tr>
<td><img src="img/25.png" id="25a" class="boton"></td>
<td><img src="img/26.png" id="26a" class="boton"></td>
<td><img src="img/27.png" id="27a" class="boton"></td>
<td><img src="img/28.png" id="28a" class="boton"></td>
<td><img src="img/29.png" id="29a" class="boton"></td>
<td><img src="img/30.png" id="30a" class="boton"></td>
<td><img src="img/31.png" id="31a" class="boton"></td>
<td><img src="img/32.png" id="32a" class="boton"></td>
</tr>
<tr>
<td><img src="img/33.png" id="33a" class="boton"></td>
<td><img src="img/34.png" id="34a" class="boton"></td>
<td><img src="img/35.png" id="35a" class="boton"></td>
<td><img src="img/36.png" id="36a" class="boton"></td>
<td><img src="img/37.png" id="37a" class="boton"></td>
<td><img src="img/38.png" id="38a" class="boton"></td>
<td><img src="img/39.png" id="39a" class="boton"></td>
<td><img src="img/40.png" id="40a" class="boton"></td>
</tr>
<tr>
<td><img src="img/41.png" id="41a" class="boton"></td>
<td><img src="img/42.png" id="42a" class="boton"></td>
<td><img src="img/43.png" id="43a" class="boton"></td>
<td><img src="img/44.png" id="44a" class="boton"></td>
<td><img src="img/45.png" id="45a" class="boton"></td>
<td><img src="img/46.png" id="46a" class="boton"></td>
<td><img src="img/47.png" id="47a" class="boton"></td>
<td><img src="img/48.png" id="48a" class="boton"></td>
</tr>
</table>
</div>
<div data-role="footer" data-theme="b">
<h1>Autores:</br>
Itthsys Ramírez</br>
</h1>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
ESTE ES EL DOCUMENTO script.js
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
$(function(){
vectorImagen= new Array(25);
var valor1=0; var valor2=0; var turno=0; var intentos=0;function CargarAleatorio(){
//Carga de imagenes 1-16 posiciones
for(i=1;i<25;i++){
vectorImagen[i]= i+".png";
} //Carga imagenes 17-32 posiciones
var k=1;for(i=25;i<25;i++){
vectorImagen[i]= k+".png";
k++;
} //Intercambio de imagenes
var aux="";
for(i=1;i<24;i++){
var aleatorio=Math.floor((Math.random()*24)+1); //Redondear valor
aux=vectorImagen[i];
vectorImagen[i]=vectorImagen[aleatorio];
vectorImagen[aleatorio]=aux;
}for(i=1;i<25;i++){
$("#"+i+"a").attr("src","img/"+vectorImagen[i]);
} } //Llamamos a la funcion cargar aleatorio
$("#cargar").on("click",function(){
CargarAleatorio();
intentos=0;$("#intentos").val(intentos)=intentos;
})
//Copiar y pegar
$(document).ready(function (){
start();
})
var ruta;
function start(){
$('#tabla1 tr td img').on('click', copy);
}function copy(){
ruta=$(this).attr('src');
$('#tabla2 tr td img').on('click',paste);
}function paste(){
$(this).attr('src',ruta);
intentos++;
var a=if(a==document.getElementById('25a').src)
{alert('Acertaste');
}$("#intentos").val(intentos)=intentos;
}})
Valora esta pregunta
0
