JavaScript - Ayuda con la validación de imagenes en javascript

 
Vista:
sin imagen de perfil
Val: 1
Ha disminuido su posición en 153 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.340
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ayuda con la validación de imagenes en javascript

Publicado por Alejandro (289 intervenciones) el 30/10/2019 17:24:18
Necesitas un array con las imágenes en su posición correcta,
Generas un array con las posiciones revueltas.
Cuando copias las imágenes se genera el array que define el usuario
Comparas el array de la posiciones correctas con el array definido por el usuario, si es igual esta el rompecabezas esta resuelto.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar