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.
Mis disculpas por los problemas anteriores. Vamos a solucionar los problemas con el reverso de las cartas y garantizar que el memorama funcione correctamente.
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 cartas
Disculpa la confusión. Aquí está el código completo con las modificaciones:
<!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 480px
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
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 CSS
Aquí está el archivo CSS completo con el cambio en el tamaño del frente de las cartas:
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.jpg
Me alegra saber que todo ha funcionado perfectamente. Para agregar una imagen de fondo llamada "background.jpg", realiza los siguientes cambios en el archivo
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 baratos
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.
Para asegurarse de que el elemento
<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 los
<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:
<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?
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).
