Juego Infantil
Publicado por Santiago (3 intervenciones) el 22/05/2023 14:04:27
Hola buenas hice una pagina para mi hija de un juego arrastrando una imagen despues de seleccionar un sonido.
Elige el sonido y marca la opcion correcta, si es asi suena sonido correcto y sino, sonido incorrecto.
El problema viene porque en el movil no me deja utilizar la funcion de arrastrar y soltar y quiero hacerlo con un clic, primero selecciona el sonido y despues la imagen, si es correcto que emita un sonido y si es error que emita otro sonido, pero no soy capaz de hacerlo, si me pudierais ayudar.
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
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
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilos para la página */ body {background-color: pink; /* Fondo rosa */
font-family: Arial, sans-serif; /* Fuente de texto */
}.container {
display: flex;flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;max-width: 800px;
margin: 0 auto; }.imagen {
width: 125px; height: 125px; }.sonido-button {
width: 100px; height: 100px; }.zonaSoltar {
width: 200px; height: 200px; border: 1px solid black; }</style>
</head>
<body>
<div class="container">
<div>
<!-- Imágenes --><img id="imagen1" src="imagen1.png" draggable="true" ondragstart="drag(event)" class="imagen">
<img id="imagen2" src="imagen2.png" draggable="true" ondragstart="drag(event)" class="imagen">
<img id="imagen3" src="imagen3.png" draggable="true" ondragstart="drag(event)" class="imagen">
<img id="imagen4" src="imagen4.png" draggable="true" ondragstart="drag(event)" class="imagen">
<img id="imagen5" src="imagen5.png" draggable="true" ondragstart="drag(event)" class="imagen">
<img id="imagen6" src="imagen6.png" draggable="true" ondragstart="drag(event)" class="imagen">
<!-- Agrega más imágenes según sea necesario --></div>
<div>
<!-- Zona de soltar --><div id="zonaSoltar" ondrop="drop(event)" ondragover="allowDrop(event)" class="zonaSoltar"></div>
</div>
<div>
<!-- Botones de sonido --><button id="sonido1" onclick="reproducirSonido('sonido1')" class="sonido-button">Sonido 1</button>
<button id="sonido2" onclick="reproducirSonido('sonido2')" class="sonido-button">Sonido 2</button>
<button id="sonido3" onclick="reproducirSonido('sonido3')" class="sonido-button">Sonido 3</button>
<button id="sonido4" onclick="reproducirSonido('sonido4')" class="sonido-button">Sonido 4</button>
<button id="sonido5" onclick="reproducirSonido('sonido5')" class="sonido-button">Sonido 5</button>
<button id="sonido6" onclick="reproducirSonido('sonido6')" class="sonido-button">Sonido 6</button>
<!-- Agrega más botones de sonido según sea necesario --></div>
</div>
<audio id="exito" src="sonido-exito.mp3"></audio>
<audio id="error" src="sonido-error.mp3"></audio>
<audio id="sonido1-audio" src="sonido1.mp3"></audio>
<audio id="sonido2-audio" src="sonido2.mp3"></audio>
<audio id="sonido3-audio" src="sonido3.mp3"></audio>
<audio id="sonido4-audio" src="sonido4.mp3"></audio>
<audio id="sonido5-audio" src="sonido5.mp3"></audio>
<audio id="sonido6-audio" src="sonido6.mp3"></audio>
<script>
var sonidoActual = '';
var correspondencias = {
"imagen1": "sonido6",
"imagen2": "sonido3",
"imagen3": "sonido5",
"imagen4": "sonido1",
"imagen5": "sonido2",
"imagen6": "sonido4"
// Agrega más correspondencias según sea necesario
};function reproducirSonido(idSonido) {
sonidoActual = idSonido;// Aquí deberías reproducir el sonido correspondiente
var audioElement = document.getElementById(idSonido + "-audio");
audioElement.play();
}function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}function allowDrop(event) {
event.preventDefault();
}function drop(event) {
event.preventDefault();
var idImagen = event.dataTransfer.getData("text");
if (comprobarCorrespondencia(idImagen, sonidoActual)) {
console.log('¡Correcto!');
reproducirSonidoExito();
} else {
console.log('¡Incorrecto!');
reproducirSonidoError();
}// Detener la reproducción del sonido actual
var audioElement = document.getElementById(sonidoActual + "-audio");
audioElement.pause();
}function comprobarCorrespondencia(idImagen, idSonido) {
var idSonidoEsperado = correspondencias[idImagen];
return idSonidoEsperado === idSonido;
}function reproducirSonidoExito() {
var audio = document.getElementById("exito");
audio.play();
// Detener la reproducción del sonido actual
var audioElement = document.getElementById(sonidoActual + "-audio");
audioElement.pause();
}function reproducirSonidoError() {
var audio = document.getElementById("error");
audio.play();
// Detener la reproducción del sonido actual
var audioElement = document.getElementById(sonidoActual + "-audio");
audioElement.pause();
}</script>
</body>
</html>
El problema viene porque en el movil no me deja utilizar la funcion de arrastrar y soltar y quiero hacerlo con un clic, primero selecciona el sonido y despues la imagen, si es correcto que emita un sonido y si es error que emita otro sonido, pero no soy capaz de hacerlo, si me pudierais ayudar.
Gracias
Valora esta pregunta
0