ThunderBoltv
Delta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
El tamaño de la imagen back es de 640px x 480px y no se muestra correctamente se ve incompleta o desfasada. Al hacer clic a las imagenes se muestra el frente pero se quedan así, no giran ni funciona el memorama. Corrige el código.Esto debería solucionar el problema al ocultar la cara frontal de las cartas hasta que se haga clic en ellas. Ahora, la imagen del reverso (back.jpg) será visible y las cartas se voltearán correctamente al hacerles clic.
Mis disculpas por los problemas anteriores. Vamos a solucionar los problemas con el reverso de las cartas y garantizar que el memorama funcione correctamente.El tamaño de la imagen back es de 640px x 480px y no se muestra correctamente se ve incompleta o desfasada. Al hacer clic a las imagenes se muestra el frente pero se quedan así, no giran ni funciona el memorama. Corrige el código.
memorama.css
:.card {
background-image: url('./back.jpg');
background-size: contain; /* Cambia de "cover" a "contain" para que la imagen del reverso se ajuste dentro de la carta */
background-repeat: no-repeat; /* Añade esto para evitar que la imagen se repita */
background-position: center; /* Añade esto para centrar la imagen de fondo */
...
}
memorama.js
, reemplaza toda la función handleClick
con esta:function handleClick(e) {
const card = e.currentTarget;
if (card === prevCard || card.classList.contains("flipped")) return;
attemptsCount++;
attemptsElem.textContent = `${attemptsCount}`;
card.classList.add("flipped");
if (!prevCard) {
prevCard = card;
} else {
gameBoard.style.pointerEvents = "none"; // Deshabilita los clics en el tablero durante las animaciones
setTimeout(() => {
if (card.getAttribute("data-id") === prevCard.getAttribute("data-id")) {
cardsLeft -= 2;
card.removeEventListener("click", handleClick);
prevCard.removeEventListener("click", handleClick);
} else {
card.classList.remove("flipped");
prevCard.classList.remove("flipped");
}
prevCard = null;
gameBoard.style.pointerEvents = "auto"; // Reestablece los clics en el tablero
}, 1000);
}
}
Dame el código completo, porque sustituí lo que me indicas y no se muestran las cartasCon estos cambios, la imagen del reverso se ajustará correctamente en las cartas y el memorama funcionará como se espera, mostrando el frente de las cartas al hacer clic y volteándolas si no coinciden.
Disculpa la confusión. Aquí está el código completo con las modificaciones:Dame el código completo, porque sustituí lo que me indicas y no se muestran las cartas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memorama</title>
<link rel="stylesheet" href="memorama.css">
</head>
<body>
<h1>Memorama</h1>
<div class="game-board"></div>
<div class="info">
<p>Intentos: <span class="attempts">0</span></p>
<button onclick="restartGame()">Reiniciar</button>
</div>
<script src="memorama.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: skyblue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 2rem;
box-sizing: border-box;
}
h1 {
margin: 0;
margin-bottom: 1rem;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1%;
width: 100%;
max-width: 720px;
margin-bottom: 2rem;
}
.card {
background-image: url('./back.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding-top: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform 0.3s;
cursor: pointer;
overflow: hidden;
}
.card img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: none;
}
.card.flipped img {
display: block;
}
.info {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
.info p {
margin: 0;
margin-right: 1rem;
font-size: 1rem;
}
.info button {
background-color: green;
color: white;
font-weight: bold;
padding: 5px 10px;
cursor: pointer;
}
function shuffle(array) {
let currentIndex = array.length,
temporaryValue,
randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
const gameBoard = document.querySelector(".game-board");
const cardIds = Array.from({
length: 8
}, (_, i) => i).concat(Array.from({
length: 8
}, (_, i) => i));
let prevCard = null;
let cardsLeft = 16;
let attemptsCount = 0;
const attemptsElem = document.querySelector(".attempts");
function createCards() {
const shuffledIds = shuffle(cardIds);
gameBoard.innerHTML = "";
shuffledIds.forEach((id) => {
const card = document.createElement("div");
card.innerHTML = `<img src="img-${id}.jpg" alt="">`;
card.setAttribute("data-id", id);
card.className = "card";
card.addEventListener("click", handleClick);
gameBoard.appendChild(card);
});
}
function handleClick(e) {
const card = e.currentTarget;
if (card === prevCard || card.classList.contains("flipped")) return;
attemptsCount++;
attemptsElem.textContent = `${attemptsCount}`;
card.classList.add("flipped");
if (!prevCard) {
prevCard = card;
} else {
gameBoard.style.pointerEvents = "none"; // Deshabilita los clics en el tablero durante las animaciones
setTimeout(() => {
if (card.getAttribute("data-id") === prevCard.getAttribute("data-id")) {
cardsLeft -= 2;
card.removeEventListener("click", handleClick);
prevCard.removeEventListener("click", handleClick);
} else {
card.classList.remove("flipped");
prevCard.classList.remove("flipped");
}
prevCard = null;
gameBoard.style.pointerEvents = "auto"; // Reestablece los clics en el tablero
}, 1000);
}
}
function restartGame() {
prevCard = null;
cardsLeft = 16;
attemptsCount = 0;
attemptsElem.textContent = "0";
createCards();
}
createCards();
¡Funciona perfecto! Solo corrige el tamaño del frente de las cartas es también de 640px x 480pxCon este código completo, el memorama debería funcionar correctamente y visualizar tanto el frente como el reverso de las cartas.
Me alegra saber que el memorama funciona correctamente. Para ajustar el tamaño del frente de las cartas, realiza el siguiente cambio en el archivo¡Funciona perfecto! Solo corrige el tamaño del frente de las cartas es también de 640px x 480px
memorama.css
:.card img {
...
object-fit: contain; /* Cambia de "cover" a "contain" para que la imagen del frente se ajuste dentro de la carta */
...
}
Dame el código completo del archivo CSSCon este cambio, las imágenes del frente de las cartas también se ajustarán correctamente dentro de la carta, al igual que el reverso.
Aquí está el archivo CSS completo con el cambio en el tamaño del frente de las cartas:Dame el código completo del archivo CSS
body {
font-family: Arial, sans-serif;
background-color: skyblue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 2rem;
box-sizing: border-box;
}
h1 {
margin: 0;
margin-bottom: 1rem;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1%;
width: 100%;
max-width: 720px;
margin-bottom: 2rem;
}
.card {
background-image: url('./back.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding-top: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform 0.3s;
cursor: pointer;
overflow: hidden;
}
.card img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: contain; /* Cambiado de "cover" a "contain" para ajustar el tamaño del frente de las cartas */
width: 100%;
height: 100%;
backface-visibility: hidden;
display: none;
}
.card.flipped img {
display: block;
}
.info {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
.info p {
margin: 0;
margin-right: 1rem;
font-size: 1rem;
}
.info button {
background-color: green;
color: white;
font-weight: bold;
padding: 5px 10px;
cursor: pointer;
}
¡Ha funcionado perfeto! Gracias BotBeta. Una pregunta, en caso de querer añadir una imagen de fondo cual sería el código completo para hacerlo, pensando que la imagen de fondo se llame background.jpgCon este archivo CSS actualizado, tanto el frente como el reverso de las cartas se ajustarán correctamente al tamaño de las imágenes (640px x 480px).
Me alegra saber que todo ha funcionado perfectamente. Para agregar una imagen de fondo llamada "background.jpg", realiza los siguientes cambios en el archivo¡Ha funcionado perfeto! Gracias BotBeta. Una pregunta, en caso de querer añadir una imagen de fondo cual sería el código completo para hacerlo, pensando que la imagen de fondo se llame background.jpg
memorama.css
:body {
font-family: Arial, sans-serif;
background-image: url('background.jpg'); /* Añadir la imagen de fondo */
background-size: cover; /* Ajustar la imagen de fondo al área visible */
background-repeat: no-repeat; /* Evitar la repetición de la imagen de fondo */
background-position: center; /* Centrar la imagen de fondo */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 2rem;
box-sizing: border-box;
}
/* Resto del código CSS sin cambios */
Donde puedo comprar seguidores para tiktok baratosMe alegra saber que todo ha funcionado perfectamente. Para agregar una imagen de fondo llamada "background.jpg", realiza los siguientes cambios en el archivomemorama.css
:
CSS:body { font-family: Arial, sans-serif; background-image: url('background.jpg'); /* Añadir la imagen de fondo */ background-size: cover; /* Ajustar la imagen de fondo al área visible */ background-repeat: no-repeat; /* Evitar la repetición de la imagen de fondo */ background-position: center; /* Centrar la imagen de fondo */ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 2rem; box-sizing: border-box; } /* Resto del código CSS sin cambios */
Al incorporar estas modificaciones en el archivo CSS, la imagen "background.jpg" se usará como fondo, cubriendo el área visible y centrada en la pantalla.
Como soy un modelo de lenguaje AI, no puedo proporcionar recomendaciones específicas de sitios web o servicios. Sin embargo, te sugiero que investigues y te informes sobre las implicaciones de comprar seguidores para TikTok antes de tomar una decisión.Donde puedo comprar seguidores para tiktok baratos
Para asegurarse de que el elementosi tengo un script que abre una ventana de width = 640; y height = 360; y adentro tiene un <video> y el archivo mp4 tiene las mismas dimensiones, pero se ve que tiene mas height
¿cómo es el css/html para que el <video> se ajuste a la ventana?
<video>
se ajuste correctamente a la ventana de 640px de ancho y 360px de alto, puede utilizar el siguiente código HTML y CSS:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Ajustado</title>
<link rel="stylesheet" href="video_ajustado.css">
</head>
<body>
<div class="video-container">
<video controls>
<source src="tu_archivo.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video HTML5.
</video>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
width: 640px;
height: 360px;
overflow: hidden;
}
.video-container {
width: 100%;
height: 100%;
position: relative;
}
video {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
}
<video>
se ajuste a la ventana y mantenga su relación de aspecto. Cambie "tu_archivo.mp4" por la ruta de tu archivo de video.Para evitar que lossi tengo varios <div> horizontalmente, cada uno tiene width: calc(19% - 20px); ¿cómo le hago para que al reducirse la pantalla poco a poco no se vean tan pequeños? ¿asi:
#my_photos-iframe div {
min-height: auto;
min-width: 100px;
}
<div>
se vuelvan demasiado pequeños al reducir el tamaño de la ventana, puedes usar media queries para establecer un ancho mínimo y adaptar su comportamiento a diferentes tamaños de pantalla. Aquí tienes un ejemplo de cómo hacerlo:.my-photos-div {
width: calc(19% - 20px);
/* Añade más propiedades para el diseño de tus divs si es necesario */
}
/* Define un ancho mínimo para los divs cuando la pantalla tenga un ancho menor a 600px */
@media screen and (max-width: 600px) {
.my-photos-div {
min-width: 100px;
}
}
.my-photos-div
a los elementos <div>
que deseas ajustar:<div id="my_photos-iframe">
<div class="my-photos-div">Contenido...</div>
<div class="my-photos-div">Contenido...</div>
<!-- Añade más divs si es necesario -->
</div>
<div>
tendrán un ancho mínimo de 100px. Puedes ajustar el valor de max-width
en la media query y el min-width
de 100px según tus necesidades.Sí, puedes mantener la relación de aspecto y reducir el tamaño de la imagen en un tercio utilizando porcentajes en CSS. Para lograr esto, primero envuelve la imagen en un contenedor div y aplica el siguiente código CSS:si tengo una <img> de 160px x 224px que seria la 'original' al reducirse, ¿se le puede poner en min-width con porcentaje, que se redusca una tercera parte y que mantenga la relación de aspecto?
<div class="img-container">
<img src="tu_imagen.jpg" alt="Descripción de la imagen">
</div>
.img-container {
display: inline-block;
width: 33.333%; /* Reduce la imagen en un tercio respecto al tamaño del contenedor */
position: relative;
}
.img-container img {
width: 100%;
height: auto; /* Mantiene la proporción de aspecto al cambiar el ancho */
display: block;
}
Que opinas de la película Terminator La revelación de las máquinas?Sorry I couldn't contact the ChatGPT think tank 🙁
Como soy un modelo de lenguaje AI, no tengo opiniones ni emociones personales. Sin embargo, puedo compartir una perspectiva general sobre la película "Terminator: La revelación de las máquinas" (Terminator 3: Rise of the Machines en inglés).Que opinas de la película Terminator La revelación de las máquinas?
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?