Estilo pagina Juego Infantil
Publicado por Santiago (1 intervención) el 22/05/2023 14:47:00
Hola buenas, soy menos creativo que el salpicadero de un panda. Si me pudierais ayudar a dar algo de estilo a esta pagina que hice para jugar con mi hija os lo agradeceria.
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
<!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: left;
align-items: left;
gap: 10px;max-width: 800px;
margin: 0 auto; }.imagen {
width: 200px; /* Ajusta el tamaño de las imágenes en relación al ancho de la ventana */
height: 200px; /* Ajusta la altura automáticamente */
}.sonido-button {
width: 100px; /* Ajusta el tamaño de los botones de sonido en relación al ancho de la ventana */
height: 100px; /* Ajusta la altura automáticamente */
}</style>
</head>
<body>
<div class="container">
<div>
<!-- Imágenes --><img id="imagen1" src="imagen1.png" draggable="true" onclick="seleccionarImagen('imagen1')" class="imagen">
<img id="imagen2" src="imagen2.png" draggable="true" onclick="seleccionarImagen('imagen2')" class="imagen">
<img id="imagen3" src="imagen3.png" draggable="true" onclick="seleccionarImagen('imagen3')" class="imagen">
<img id="imagen4" src="imagen4.png" draggable="true" onclick="seleccionarImagen('imagen4')" class="imagen">
<img id="imagen5" src="imagen5.png" draggable="true" onclick="seleccionarImagen('imagen5')" class="imagen">
<img id="imagen6" src="imagen6.png" draggable="true" onclick="seleccionarImagen('imagen6')" class="imagen">
<!-- Agrega más imágenes según sea necesario --></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>
<!-- Agrega más elementos de audio según sea necesario --><script>
var sonidoActual = '';
function reproducirSonido(idSonido) {
sonidoActual = idSonido; // Aquí deberías reproducir el sonido correspondientevar audioElement = document.getElementById(idSonido + "-audio");
audioElement.play();
}function seleccionarImagen(idImagen) {
if (comprobarCorrespondencia(idImagen, sonidoActual)) {
console.log('¡Correcto!');
reproducirSonidoExito();
} else {
console.log('¡Incorrecto!');
reproducirSonidoError();
} // Detener la reproducción del sonido actualvar audioElement = document.getElementById(sonidoActual + "-audio");
audioElement.pause();
}function comprobarCorrespondencia(idImagen, idSonido) {
var correspondencias = {
"imagen1": "sonido6",
"imagen2": "sonido3",
"imagen3": "sonido5",
"imagen4": "sonido1",
"imagen5": "sonido2",
"imagen6": "sonido4"
// Agrega más correspondencias según sea necesario };var idSonidoEsperado = correspondencias[idImagen];
return idSonidoEsperado === idSonido;
}function reproducirSonidoExito() {
var audio = document.getElementById("exito");
audio.play();
}function reproducirSonidoError() {
var audio = document.getElementById("error");
audio.play();
}</script>
</body>
</html>
Valora esta pregunta
0